jQuery选择器参考手册

选择器

在页面上获得各个节点对象而使用的条件就是选择器

1.基本选择器

$('#id 属性值')  --> document.getElementById(); id选择器

$('#tag 标签名称') --> document.getElementByTagName; 标签选择器

$('.class 属性值') class选择器

$('*') 寻找所有的  通配符选择器

$('s1,s2,s3') 联合选择器

2. 层次选择器

    2.1  $(s1 s2) [父子]

            派生选择器: 在s1内部获得全部的s2节点

    2.2 $(s1>s2) [父子]

            直接子元素选择器: 在s1内部获得s2的子元素节点

    2.3 $(s1+s2) [兄弟]

            直接兄弟选择器: 在s1后边获得第一个兄弟关系的s2节点

    2.4 $(s1~s2) [兄弟]

            后续全部兄弟关系节点选择器: 在s1后边获得全部兄弟关系的s2节点

3. 并且选择器

        用法: $("标签名:选择词");  例: $("tr:first");

        3.1 first

            单个元素组成的集合,匹配找到的第一个元素

        3.2 last

            匹配找到的最后一个元素

        3.3 not(selector)

            去除所有的给定选择器匹配的元素

        3.4 even

            匹配所有的索引值为偶数元素,从0开始计数

        3.5 odd

            匹配所以的索引值为奇数元素, 从0开始计数

        3.6 eq(index)

            匹配一个给定索引值的元素,从0开始计数

        3.7 gt(index)

            匹配一个大于给定索引值的元素,从0开始计数

        3.8    it(index)

            匹配所有小于给定索引值的元素,从0开始计数

        3.9  header

            匹配如h1,h2,h3之类的标题元素

4.内容过滤选择器

        4.1     :contanins(内容)

                包含内容选择器,获得节点内容必须听过标签包含指定的内容

                $("div:contains(beijing)")

        4.2     :empty

                获得空元素(内容没有任何元素/文本(空))节点对象

                $("div:empty")

        4.3     :has(选择器)

                内部包含指定元素选择器

                $("div:has(#apple)")

        4.4     :parent

                寻找的节点必须作为父元素节点存在

                $("div:parent")

    5. 表单域选中选择器

            复选框、单选按钮、下拉列表

            获取复选框选中情况

            $(:checked)  过滤出被选中的复选框,单选按钮

            $(input:lt(4):checked); //复选框   lt(4)=小于4

            $(input:gt(3):lt(7):checked); //单选按钮 gt(3)=大于3

            获取下拉列表的选中情况

            $("option:selected);

    6. 属性操作

        1.  获得属性信息

7.  快捷操作

1.   class属性值操作

            $().addClass(值); //给class属性追加信息值

            $().removeClass(值); //删除class属性中的某个信息

            $().toggleClass(值); //开关效果,有就删除,没有就添加

 2. 标签包含内容快捷操作

                $().html()  //获得标签包含的信息

                $().html(信息) //设置标签包含的内容

                $().text()  //获得标签包含的文本字符串信息

                $().text(信息) // 设置标签包含的内容(有html标签就把><符号变为符号实体)

                html()和text()方法区别

                    1. 获取内容

                        前者可以获取html标签和普通字符串内容

                        后者只获取普通字符串内容

                    2.  设置内容

                        前者可以设置html标签和普通字符串内容

                        后者只设置普通字符串内容,如果内容里边有tag标签内容,就把其中的"<"">"符号转变为符号实体<-----&lt;>------&gt;空格------&nbsp

                    以上两种操作(获取/设置)如果针对操作内容是纯字符串内容,则使用效果一般

3. css样式操作

                $().css(样式名称,值);    //设置

                $().css(样式名称);  //获取

                $().css(json对象);  //同事修改多个css样式

                不能直接获取"复合属性"样式,例如 border 1px solid black

                可以获得具体样式 可以改为  border-left(top/right/bottom)-style(width/color) 等

                css()样式操作特点

                    1.样式获取.  jquery可以获取行内,内部,外部的样式  dom方式只能获取行内样式

                    2.复合样式属性需要拆分为具体样式才可以操作

4. value属性快捷操作

    $().val(); //获取value属性值

    $().val(信息值);//设置value属性的值

    该val方法在复选框,单选按钮,下拉列表的使用有凸出表现

5. 快捷操作复选框

6. 下拉列表快捷操作

7.单选框快捷操作

8. 复选框的全选,全不选,反选操作