jQuery选择器(全面)

JS提供操作DOM元素的方法只有两种

// 通过id属性获取指定元素
document.getElementById();  

// 通过标签名获取指定元素
document.getElementsByTagName();

---

jQuery选择器
ID选择器

$("#id")

类选择器

$(".className")

标签选择器

$('p')

后代选择器

$("li .link")

父子选择器

$("ul > li")

伪类选择器

$("ul li:eq(3)")
$("li:even")
$("li:odd")

表单选择器

$(":checkbox")
$(":checked")
$(":text")

属性选择器

$("li[id]")
$("li[id='link']")

除了上边的，还有一些常用的

:input      $(":input")         所有 <input> 元素
:text       $(":text")          所有 type="text" 的 <input> 元素
:password   $(":password")      所有 type="password" 的 <input> 元素
:radio      $(":radio")         所有 type="radio" 的 <input> 元素
:checkbox   $(":checkbox")      所有 type="checkbox" 的 <input> 元素
:submit     $(":submit")        所有 type="submit" 的 <input> 元素
:reset      $(":reset")         所有 type="reset" 的 <input> 元素
:button     $(":button")        所有 按钮元素（<button></button> 或者 input="button"）
:image      $(":image")         所有 type="image" 的 <input> 元素
:file       $(":file")          所有 type="file" 的 <input> 元素
:enabled    $(":enabled")   所有激活的 input 元素
:disabled   $(":disabled")  所有禁用的 input 元素
:selected   $(":selected")  所有被选取的 input 元素
:checked    $(":checked")   所有被选中的 input 元素

---

jQuery选择方法
获取父级元素

$(selector).parent();     //获取直接父级
$(selector).parents('p'); //获取所有父级元素直到html   

获取子代和后代的元素

$(selector).children();   //获取直接子元素
$(selector).find("span"); //获取所有的后代元素  find方法 可能用的多。

获取同级的元素

$(selector).siblings()    //所有的兄弟节点
$(selector).next()        //下一个兄弟节点
$(selector).nextAll()     //后面的所有节点
$(selector).prev()        //前面一个的兄弟节点
$(selector).prevAll()     //前面的所有的兄弟节点

过滤方法

$("p").eq(1);           //取第n个元素
$("div p").last();        //取最后一个元素
$("div p").first();       //取第一个元素
$("p").filter(".intro");  //过滤，选择所有p标签带有 .intro类
$("p").not(".intro");     //去除，跟上面的filetr正好相反

---

jquery操作css

 $(function () {
            // 业务代码
            $('#btn').click(function () {
                // 需求：点击按钮，盒子变大，变色
                // $('div').css('width','300px');
                // $('div').css('height',300);
                // $('div').css('backgroundColor','red');
                $('div').css({
                    width : 200,
                    height : 200,
                    backgroundColor : 'gold'
                });
            //    .css()  css函数能直接修改元素的样式
            //    传入两个参数，它可以修改单个样式
            //    传入一个对象，它可以修改多个样式（推荐使用）
            //    传入一个样式属性，可以返回该样式属性的值

                // alert( $('div').css('width') )
            })
        })

注意点：宽高不写PX单位和后面跟着的是逗号不是分号