JQuery基础
JQuery基础
选择器
-
按ID查找：
var div = $('#abc'); -
按tag查找：
var ps = $('p'); -
按class查找：
var a = $('.red'); -
按属性查找：
var email = $('[name=email]');- 按属性查找还可以使用前缀查找或者后缀查找：
var icons = $('[name^=icon]');找出所有name属性值以icon开头的DOMvar names = $('[name$=with]');找出所有name属性值以with结尾的DOM
-
组合查找：就是把上述简单选择器组合起来使用。
-
多项选择器：就是把多个选择器用
,组合起来一块选。 -
层级选择器：如果两个DOM元素具有层级关系，就可以用
$('father sonAndGrandson')来选择，层级之间用空格隔开 -
子选择器：子选择器
$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是<child>节点必须是<parent>节点的直属子节点。 -
过滤器：过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素:
$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
层级选择器：
| 层级选择器 | 例子 | 说明 |
|---|---|---|
| ancestor descendant | A B | 获得A元素内部的所有的B元素（子孙）-- 后代 |
| parent > child | A > B | 获得A元素下面的所有B子元素（父子） children |
| prev + next | A + B | 获得A元素同级下一个B元素（兄弟） |
| prev ~ siblings | A ~ B | 获得A元素之后的所有B元素（兄弟） |
表单相关特殊选择器：
:input：可以选择<input>，<textarea>，<select>和<button>；:file：可以选择<input type="file">，和input[type=file]一样；:checkbox：可以选择复选框，和input[type=checkbox]一样；:radio：可以选择单选框，和input[type=radio]一样；:focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；:checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；:enabled：可以选择可以正常输入的<input>、<select>等，也就是没有灰掉的输入；:disabled：和:enabled正好相反，选择那些不能输入的。
表单对象属性选择器：
| 表单属性选择器的名称 | 描述 |
|---|---|
:enabled |
匹配所有可用元素 |
:disabled |
匹配所有不可用元素 |
:checked |
选取匹配所有被选中的元素 （单选框、复选框） |
:selected |
选取匹配所有被选中项元素 （下拉列表框） |
以及：
$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div
查找和过滤
当我们拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤。最常见的查找是在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。
find()：在该节点的子节点继续筛选parent()：向上查找next()和prev()：查找同级节点
过滤
和函数式编程的map、filter类似，jQuery对象也有类似的方法。（注意函数里的this绑定为DOM对象，而非JQuery对象）
filter()方法可以过滤掉不符合选择器条件的节点map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象first()、last()和slice()：如果一个jQuery对象如果包含了不止一个DOM节点，此方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉
过滤选择器：
| 过滤选择器名称 | 说明 |
|---|---|
| :first | 选择匹配到的元素中的第一个元素 |
| :last | 选择匹配到的元素中的最后一个元素 |
| :even | 选择匹配到的元素中索引号为偶数的所有元素，index从0开始 |
| :odd | 选择匹配到的元素中索引号为奇数的所有元素，index从0开始 |
| :eq(index) | 选择匹配到的元素中索引号为index的一个元素，index从0开始 |
| :gt(index) greater than | 选择匹配到的元素中索引号大于index的所有元素，index从0开始 |
| :lt(index) less than | 选择匹配到的元素中索引号小于index的所有元素，index从0开始 |
| :not(..) | 选择匹配不包括指定内容的元素 |
属性选择器：
| 选择器 | 说明 |
|---|---|
标签名[属性名] |
具有该属性的标签 |
标签名[属性名='值'] |
属性为该值的标签 |
标签名[属性名!='值'] |
属性不为该值的标签 |
标签名[属性名^='值'] |
属性以该值开始的标签 |
标签名[属性名$='值'] |
属性以该值结束的标签 |
操作DOM
DOM和JQuery对象互相转化：
//DOM转JQuery对象
$(JS对象);
//JQuery转DOM对象
JQ对象[0];//推荐
JQ对象.get(0);
修改文本
text()和html()
传参即为设置，不传参即为获取，两者区别在于html()可以内嵌Html语句，而text()会自动转化为转义文本。
设置属性
设置CSS
css('name', 'value')或者css({'name':'value', 'name2':'value2'})
设置value属性：val()
设置class：
var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class
div.toggleClass('highlight')//切换class属性样式。即没有时添加，有的时候删除。
显示和隐藏DOM
a.hide(); // 隐藏
a.show(); // 显示
获取DOM信息
width()宽
height()高
attr()和prop()
attr()和removeAttr()，prop()和removeProp()
系统属性优先使用prop()，自定义属性使用attr()
attr()和prop()对于属性checked处理有所不同：
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
//prop()返回值更合理一些。不过，用is()方法判断更好：
radio.is(':checked'); // true
操作表单
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性。
修改DOM结构
append()追加一个DOM（如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。）
prepend()在最前添加节点
同级节点可以用after()或者before()方法
remove()删除该节点
父元素.empty()清空父节点
| 方法 | 描述 |
|---|---|
$('<div>Something</div>') |
整个标签写出来就可以了创建该元素 |
父元素.append(子元素) |
追加为父元素的最后一个子元素（主操作方是父元素） |
父元素.prepend(子元素) |
追加为父元素的第一个子元素（主操作方是父元素） |
元素.before(元素) |
当前元素前添加一个元素，两者是兄弟关系 |
元素.after(元素) |
当前元素后添加一个元素，两者是兄弟关系 |
事件
加载方式
| JavaScript页面加载完成 | window.onload = function() { … }; |
|---|---|
| jQuery页面加载完成方式1 | $(document).ready( function() { … } ); |
| jQuery页面加载完成方式2 | $( function() { … } ); √ |
页面加载完成之后会一次执行所有绑定的加载事件。
AJAX
To be continued...
JQuery对象方法
each(function(index,element){})函数中的this绑定的是DOM元素，无法使用JQuery对象的方法，因此需要转化为JQuery对象：$(this)
（这里的index和element顺序和js中数组的each方法中是相反的。）
JQuery对象常用事件（事件.([data],fn)）：
| 事件方法 | 功能 |
|---|---|
blur() |
失去焦点 |
change() |
改变事件 |
click() |
单击事件 |
dblclick() |
双击事件 |
focus() |
得到焦点 |
keydown() |
按下键 |
keypress() |
按下键(会产生字符的键) |
keyup() |
松开键 |
mousedown() |
鼠标按下 |
mouseleave() |
鼠标移开（只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件） |
mousemove() |
鼠标移动 |
mouseover() |
鼠标移上 |
mouseout() |
鼠标移出 |
submit() |
表单提交 |
hover() |
jq创建的事件，鼠标悬浮，相当于mouseover和mouseout |
hover( over , out )简化方法
A.hover( fn1 , fn2)等效与A.mouseover( fn1 ),A.mouseout( fn2 )
事件绑定
绑定
//绑定一个事件：
$("btn").bind("click", function(){ … });
//绑定多个事件：
$("btn").bind({
click:function(){ … },
mouseover:function(){ … },
mouseout:function(){ … }
});
解绑
//解绑所有事件：
$("btn").unbind();
//解绑指定事件：
$("btn").unbind(“click”);或者 $("btn").unbind(“click mouseout”);
jQuery Validate
Validate表单验证插件
使用方法：
$("form表单的选择器").validate({
// 要验证的表单项
rules : {
表单项name值：{
//校验规则
校验方式：校验规则
},
... ...
}
例如：
rules : {
"username":{
required:true,
rangelength: [4,6] // 4-6位
}
},
... ...
},
//错误提示信息
messages : {
//提示项
表单项name值：{
规则:信息,
... ...
},
... ...
}
例如：
messages : {
"username":{
required:"用户名不能是空",
rangelength: '长度必须是4-6位'
}
}
});
messages可以不填，使用引入插件本地化js文件的方式提示。（在插件下方引入）
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7 | number:true | 必须输入合法的数字（负数，小数）。 |
| 8 | digits:true | 必须输入整数。 |
| 9 | creditcard: | 必须输入合法的信用卡号。 |
| 10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
| 11 | accept: | 输入拥有合法后缀名的字符串（上传文件的后缀）。 |
| 12 | maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| 13 | minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| 15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| 16 | max:5 | 输入值不能大于 5。 |
| 17 | min:10 | 输入值不能小于 10。 |
添加自定义验证
$.validator.addMethod(“name” , method , message);
参数1：name， 校验规则的名称。例如：required，pwdFormat等
参数2：method，执行校验时使用的处理函数。该函数返回true表示校验通过，返回false表示校验未通过。
function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。
参数value： 表单项的value值。例如：<input value="aaa">
参数element：被校验的表单项对象。
参数params： 使用当前校验规则传递的值。例如：rules : { username : {required : true} },这里params接收的就是true这个值。
参数3：message，校验未通过时的提示的信息。注意：参数可以不用写，不写可以在messages里面配置
例子：
$.validator.addMethod('cardFormat', function(value, element, params) {
if (params) { // params:true 表示要验证
if (value.length == 15) {
// 15位： 都是数字
var reg = /^\d{15}$/;
return reg.test(value);
} else if (value.length == 18) {
// 18 位： 都是数字或者末尾是X,x
var reg = /^\d{18}|\d{17}[Xx]$/;
return reg.test(value);
}
// 格式不符合
return false;
}
// 执行到这里说明params是false 表示不验证 直接通过，所以该函数返回true
return true;
});
