JQuery基础

选择器

• 按ID查找：var div = $('#abc');
• 按tag查找：var ps = $('p');
• 按class查找：var a = $('.red');

• 按属性查找：var email = $('[name=email]');

  • 按属性查找还可以使用前缀查找或者后缀查找：
  • var icons = $('[name^=icon]');找出所有name属性值以icon开头的DOM
  • var 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)'); // 选出序号为奇数的元素

层级选择器：

表单相关特殊选择器：

• :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正好相反，选择那些不能输入的。

表单对象属性选择器：

以及：

$('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节点去掉

过滤选择器：

属性选择器：

操作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()清空父节点

事件

加载方式

页面加载完成之后会一次执行所有绑定的加载事件。

AJAX

To be continued...

JQuery对象方法

each(function(index,element){})函数中的this绑定的是DOM元素，无法使用JQuery对象的方法，因此需要转化为JQuery对象：$(this)
（这里的index和element顺序和js中数组的each方法中是相反的。）
JQuery对象常用事件（事件.([data],fn)）：

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文件的方式提示。（在插件下方引入）

添加自定义验证

$.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;
});