Part15 – 前端之jQuery
本节内容
- jQuery
一、jQuery
jQuery是对DOM的封装
jQuery
中文在线文档：http://jquery.cuishifeng.cn/
模块(Python) <--> 类库(其他语言中)
jQuery：集合DOM/BOM/JavaScript的类库
版本：
.x 1.12 推荐(可以兼容旧版本浏览器)
.x
.x
转换：
jQuery对象[] -> Dom对象
Dom对象 -> $(Dom对象) = jQuery对象
一、查找元素
a、DOM
10左右
b、jQuery：
选择器，直接找到某个或者某类标签（跟CSS类似）
. id
$('#id') //id为id的标签
. class
<div class='c1'></div>
$(".c1") //所有class为c1的标签
. 标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a') //所有的a标签
. 组合(一次查询多个，用逗号分隔)
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
$('.c2')
$('a,.c2,#i10')
. 层级(层层过滤)
$('#i10 a') 子子孙孙
$('#i10>a') 只找儿子
. 基本
:first
:last
:eq()
. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
--------------------
代码：
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
通过属性选择器查找：
$("input[type='text']")
通过表单选择器查找：
$(':text')
. 实例：
多选，反选，全选
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环,批量操作简单的这样做即可： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this代指DOM对象，$(this)代指jQuery对象，都是指当前循环的元素
})
- 三元运算：var v = 条件? 条件为真时值：条件为假时值
var v = $(this).prop('checked')?false:true;
. 筛选器
通过选择器定位到标签后，需要通过筛选器定位其关联标签 --------------
<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>
---------------
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq()
first()
last()
hasClass(class)
二、操作
a、文本操作：
$(..).text() # 不加内容获取文本
$(..).text(“<a></a>”) # 加内容设置文本
$(..).html() # 不加内容获取内容
$(..).html("<a>1</a>")
$(..).val() #获取值，相当于DOM的value
$(..).val(..)
b、样式操作：
addClass() #给对象增加类
removeClass() #给对象减少类
toggleClass() #开关,点击切换增加、减少类
c、属性操作：
# 专门用于做自定义属性
$(..).attr('n') #获取属性n的值
$(..).attr('n','v') #设置属性n的值
$(..).removeAttr('n') #移除属性n
//示例
<input type='checkbox' id='i1' />
# 专门用于chekbox,radio等选中操作(.attr在jQury的1.x和2.x中不好用)
$(..).prop('checked')
$(..).prop('checked', true)
PS:
$(..).index() 获取索引位置
d、文档处理：
append 向匹配元素内部追加内容在最后（孩子标签）
prepend 向匹配元素内部追加内容在最前（孩子标签）
after 向匹配元素后追加（兄弟标签）
before
remove 删除标签及内容
empty 仅清空标签内容
clone 克隆
e、css处理
$('t1').css('样式名称', '样式值') //更细的处理对象的样式
点赞：
- $('t1').append()
- $('t1').remove()
- 定时器setInterval
- 透明度 opacity ->
- 位置变化position
- 字体大小，位置
f、位置：
$(window).scrollTop() 获取windows窗口滚动了多少
$(window).scrollTop() 设置
scrollLeft([val])
$('i1').offset() 指定标签在html中的坐标
$('i1').offset().left 指定标签在html中左边的坐标
$('i1').offset().top 指定标签在html中顶部的坐标
position() 指定标签相对父标签(relative)标签的坐标
---------------
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
---------------
$('i1').height() # 获取标签的高度(纯高度)
$('i1').innerHeight() # 获取标签的高度(纯高度+内边距)
$('i1').outerHeight() # 获取标签的高度(纯高度+内边距+边框)
$('i1').outerHeight(true) # 获取标签的高度(纯高度+内边距+边框+外边距
# 纯高度，边框，外边距，内边距
三、事件
、绑定方式
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....
---------
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
//委托，只有事件发生时才绑定
//函数解释之后添加的标签，也可以被绑定
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
*******************
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
、阻止事件发生
return false
、函数外边加$(),当页面框架加载完毕后，函数自动执行（提前绑定事件时机）
$(function(){
$(...)
})
四、jQuery扩展：
、jquery扩展，两种方式调用方式不一样
- $.extend $.方法
- $.fn.extend $(..).方法
、引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
(function(){
var status = ;
// 封装变量
})(jQuery)
===》实例：
作业：
一：
$('i1').height() # 获取标签的高度(纯高度)
$('i1').innerHeight() # 获取标签的高度(纯高度+内边距)
$('i1').outerHeight() # 获取标签的高度(纯高度+内边距+边框)
$('i1').outerHeight(true) # 获取标签的高度(纯高度+内边距+边框+外边距
# 纯高度，边框，外边距，内边距
二、所有示例敲一遍
三、编辑框
jQuery笔记
1、引入jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="csswenjian" />
<style> </style> </head>
<body>
<input type="text" />
<input type="text" disabled />
<input type="text" /> <div id='i10' class='c1'>
<div>
<a>asd</a>
</div>
<a alex='123'>f2</a>
<a alex='456'>f2</a>
<a>f3</a>
<a>f4</a>
</div> <div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div> <!--引入jQuery，1.x版本兼容的旧版本浏览器更多-->
<script src="jquery-1.12.4.js"></script>
<script>
//调用jQuery(jQuery. 或 $.)
//找到标签 -> $("#i1")
$("#i1")
</script>
</body>
</html>
2、示例之多选、取消、反选
<!DOCTYPE html>
<html lang="en">
<!--示例多选、取消、反选 - 选择器、三元运算-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/> <table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb"> <tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table> <script src="jquery-1.12.4.js"></script>
<script>
//查到的结果->jQury会自动循环，DOM需要手动循环
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
//.each是jQuery中的循环
$(':checkbox').each(function(k){
// k是索引值，this代指当前循环的每一个元素(DOM对象)
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/ //*****************************************
// $(this)代指当前循环的每一个元素(jQuery对象)
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/ //*****************************************
// 三元运算：var v = 条件? 条件为真时值：条件为假时值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
选择器、三元运算
3、示例之左侧菜单
<!DOCTYPE html>
<html lang="en">
<!--左侧菜单示例 - 选项器、筛选器-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style=" height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div> <div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide') //通过层级选择器筛选过于麻烦
// $("label + input");
// var v = $("this + div"); 这样写this就无效了
// console.log(v); // 筛选器:结构-> 选择器.筛选方法()
/*
$(this).next() 当前对象下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
//
$('#i1').addClass('hide')
$('#i1').removeClass('hide')
*/ // 链式编程
// $(...).click(function(){
// this..
// }) //$(this).next().removeClass('hide');
//$(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') })
</script>
</body>
</html>
选择器、筛选器
4、示例之模态编程框
<!DOCTYPE html>
<html lang="en">
<!--示例：模态编程框 - 循环、属性操作-->
<!--添加、编辑、删除、取消、确定-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a> <table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td> </tr>
</table> <div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div> <div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="confirmModal();" />
</div>
</div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script>
<script>
//删除
$('.del').click(function () {
$(this).parent().parent().remove();
}); //确定
function confirmModal() {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001"; $(tr).append(td1);
$(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); //$('.modal input[type="text"]').each(function () {
// var temp = "<td>..."
//
//})
} //添加
function addElement() {
$(".modal,.shadow").removeClass('hide');
} //取消
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
} //编辑，弹出修改模态框
//类edit绑定鼠标点击事件(点击编辑弹出编辑框)
// 1.循环获取tds中内容
// 2.获取 <td>内容</td> 获取中间的内容
// 3.赋值给input标签中的value
$('.edit').click(function(){
//弹出模态框
$(".modal,.shadow").removeClass('hide');
// this,获取所有标签
var tds = $(this).parent().prevAll();
//循环标签.each，获取值赋给input
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容，拼接成选择器字符串，用来选择input框
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2; //选择器条件 --> .modal input[name="hostname"]
$(temp).val(text); //var port = $(tds[0]).text();
//var host = $(tds[1]).text();
//
//$('.modal input[name="hostname"]').val(host);
//$('.modal input[name="port"]').val(port);
});
});
</script>
</body>
</html>
循环、属性操作(添加、编辑、删除、取消、确定)
5、jQuery样式操作
<!DOCTYPE html>
<html lang="en">
<!--样式操作-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" />
<div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
//if($('.c1').hasClass('hide')){
// $('.c1').removeClass('hide');
//}else{
// $('.c1').addClass('hide');
// } //上下效果等同 $('.c1').toggleClass('hide');
})
</script>
</body>
</html>
6、示例之TAB切换菜单
<!DOCTYPE html>
<html lang="en">
<!--TAB切换菜单，自定义属性方式-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
/*点击时鼠标变成小手*/
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<!--自定义属性a,与b相对应-->
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div> </div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
//字符串拼接 "[b='" + target + "']"
$('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
TAB切换菜单，自定义属性方式
<!DOCTYPE html>
<html lang="en">
<!--TAB切换菜单，索引方式方式-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >内容一</div>
<div class="hide" >内容二</div>
<div class="hide">内容三</div> </div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
//$('.content').children().eq()，找到与菜单索引值相同的内容
//$(this).index()对象的索引值
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); });
</script>
</body>
</html>
TAB切换菜单，索引方式方式
7、jQuery文档处理
<!DOCTYPE html>
<html lang="en">
<!--文档处理-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<input id="a2" type="button" value="删除" />
<input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li>
<li>2</li> </ul>
<script src="jquery-1.12.4.js"></script>
<script>
//添加
$('#a1').click(function () {
var v = $('#t1').val(); var temp = "<li>" + v + "</li>";
//append向匹配元素内部追加内容在最后（孩子标签）
// $('#u1').append(temp);
//prepend向匹配元素内部追加内容在最前（孩子标签）
$('#u1').prepend(temp);
//after向匹配元素后追加（兄弟标签）
// $('#u1').after(temp)
// $('#u1').before(temp)
}); //删除
$('#a2').click(function () {
var index = $('#t1').val();
//删除标签及内容
//$('#u1 li').eq(index).remove();
//清除内容
//$('#u1 li').eq(index).empty();
}); //复制
$('#a3').click(function () {
var index = $('#t1').val();
var v = $('#u1 li').eq(index).clone();
$('#u1').append(v);
})
</script>
</body>
</html>
8、示例之点赞特效
<!DOCTYPE html>
<html lang="en">
<!--点赞以及jQuery的css操作-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
}); function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
//tag是DOM对象，转换成jQuery对象$(tag)
//创建标签
var tag = document.createElement('span');
//设置标签样式
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
//在.item的标签内添加标签对象tag
$(self).append(tag);
//定时改变标签样式和位置
var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
//标签看不到后删除定时器和标签
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40); }
</script> </body>
</html>
点赞以及jQuery的css操作
9、示例之可拖动标签
<!DOCTYPE html>
<html>
<!--可拖动标签，jQuery标签位置操作-->
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 300px;"></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
可拖动标签，jQuery标签位置操作
10、jQuery绑定的三种方式
<!DOCTYPE html>
<html lang="en">
<!--jQuery绑定的三种方式-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" /> <ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
//方式一，函数解释之后添加的标签不能绑定事件
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// }) // $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
//方式二，函数解释之后添加的标签不能绑定事件（可以构造出来）
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
//方式三，委托，事件发生时才绑定
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
}) </script>
</body>
</html>
11、阻止事件发生
<!DOCTYPE html>
<html lang="en">
<!--阻止、允许事件发生-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
//标签事件绑定的函数先执行，在函数中输入return false;标签后边的操作终止
//DOM中标签也要写onclick="return ClickOn()"
function ClickOn() {
alert(123);
return true;
}
//jQuery只在函数中输入return false;就可以了
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
DOM和jQuery写法上的不同
<!DOCTYPE html>
<html lang="en">
<!--表单验证，根据提交的内容阻止或允许事件发生-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body> <form id="f1" action="s5.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" />
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
// 函数外边加$(),当页面框架加载完毕后，函数自动执行
// 提前绑定事件时机
// $.Login('#f1'),jQuery已经写好的方法，同下面一大堆代码
$(function(){
$.Login('#f1')
}); $(function(){
// 当页面所有元素完全加载完毕后，执行
$(':submit').click(function () {
//执行表单验证之前，先清空所有的.error标签
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
//如果没有输入内容
if(v.length <= 0){
flag = false;
//创建提示标签
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
//终止循环，相当于break
// return false;
}
});
//结束整个函数
return flag;
});
}); //简单的验证有没有输入内容
// $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// }) </script>
</body>
</html>
表单提交验证示例
12、jQuery扩展
<!DOCTYPE html>
<html lang="en">
<!--jQuery扩展-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script src="jquery-1.12.4.js"></script>
<!--可以引入别人写好的jQuery代码，扩展名可能重复(无法解决)-->
<!--引入的代码全局变量问题(引入的代码中写一个自执行函数)-->
<script src="plugin1.js"></script>
<script>
var v = $.wangsen();
alert(v);
// $('#i1').css()
// $.ajax() // jquery扩展，两种方式的调用方式不一样
//方法一
// $.fn.extend({
// "hanyang": function () {
// return 'db';
// }
// });
// var v = $('#i1').hanyang();
// alert(v); //方法二
// $.extend({
// 'wangsen': function () {
// return 'sb';
// }
// });
// var v = $.wangsen();
// alert(v);
</script> </body>
</html>
jquery扩展的两种方式，其调用方式不一样
/**
* Created by alex on 2016/11/26.
*/ status = 1; $.extend({
'wangsen': function () {
return 'sb';
}
});
plugin1.js
/**
* Created by alex on 2016/11/26.
*/
//引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
(function (arg) { var status = 1; arg.extend({
'wangsen': function () {
return 'sb';
}
}); })(jQu$ery);
plugin2.js(使用自执行函数,对全局变量进行封装))
更多内容参考：http://www.cnblogs.com/wupeiqi/articles/5369773.html
Part15 – 前端之jQuery的更多相关文章
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 第四篇：web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端技术Jquery与Ajax使用总结
前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- 第五章、前端之JQuery
目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...
随机推荐
- easyui-从数据库读取创建无极菜单
easyui-tree基础必须知道这个如下: 树控件使用<ul>元素定义.标签能够定义分支和子节点.节点都定义在<ul>列表内的<li>元素中.以下显示的元素将被用 ...
- 创建一个子进程---vfork
子.父进程共享数据段与堆栈段 函数原型:pid_t vfork(void) 返回值:子进程中返回0,父进程中返回子进程ID,出错返回-1. 注意: vfork创建的进程是按先子进程后父进程的顺序执行的 ...
- myeclipse 中 svn 更新 提交 同步资源库 详细解释下他们的功能
原理是这样的 svn服务器一般放在公共的服务器上,大家连这个服务器,在MyEclipse上使用svn控件 可以下载svn上的项目至本地,所以很多公司将开发要用到的软件都放在svn上,有同事来只要连上s ...
- 2018.08.29 NOIP模拟 pmatrix（线性筛）
[问题描述] 根据哥德巴赫猜想(每个不小于 6 的偶数都可以表示为两个奇素数之和),定义 哥德巴赫矩阵 A 如下:对于正整数对(i,j),若 i+j 为偶数且 i,j 均为奇素数,则 Ai,j = 1 ...
- web前端技术合集
视频课程包含: 微服务精品课程包含:Ajax和Jquery基础入门视频.ajax教程.css视频教程.JQuery视频教程.MUI快速混合APP开发-视频.vuejs教程.极客学院HTML5全套教程. ...
- UVa 10269 Adventure of Super Mario (Floyd + DP + BFS)
题意:有A个村庄,B个城市,m条边,从起点到终点,找一条最短路径.但是,有一种工具可以使人不费力的移动L个长度,但始末点必须是城市或村庄.这种工具有k个,每个只能使用一次,并且在城市内部不可使用,但在 ...
- SPSS—非线性回归(模型表达式)案例解析
非线性回归过程是用来建立因变量与一组自变量之间的非线性关系,它不像线性模型那样有众多的假设条件,可以在自变量和因变量之间建立任何形式的模型 非线性,能够通过变量转换成为线性模型——称之为本质线性 ...
- python编码（七）
本文中,以'哈'来解释作示例解释所有的问题,“哈”的各种编码如下: 1. UNICODE (UTF8-16),C854:2． UTF-8,E59388:3． GBK,B9FE. 一.python中的s ...
- 二）spring 集成 ehcache jgroups 集群
依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-co ...
- Codeforces777E. Hanoi Factory 2017-05-04 18:10 42人阅读 评论(0) 收藏
E. Hanoi Factory time limit per test 1 second memory limit per test 256 megabytes input standard inp ...