3：基础过滤选择器

改变第一个 div 元素的背景色为 #0000FF”
$(“div:first”).css(“background”,”#0000FF”);
改变最后一个 div 元素的背景色为 #0000FF”
$(“div:last”).css(“background”,”#0000FF”);
改变class不为 one 的所有 div 元素的背景色为 #0000FF”
$(“div:not(.one)”).css(“background”,”#0000FF”);
改变索引值为偶数的 div 元素的背景色为 #0000FF”
$(“div:even”).css(“background”,”#0000FF”);
改变索引值为奇数的 div 元素的背景色为 #0000FF”
$(“div:odd”).css(“background”,”#0000FF”);
改变索引值为大于 3 的 div 元素的背景色为 #0000FF”
$(“div:gt(3)”).css(“background”,”#0000FF”);
改变索引值为等于 3 的 div 元素的背景色为 #0000FF”
$(“div:eq(3)”).css(“background”,”#0000FF”);
改变索引值为小于 3 的 div 元素的背景色为 #0000FF”
$(“div:lt(3)”).css(“background”,”#0000FF”);
改变所有的标题元素的背景色为 #0000FF”
$(“:header”).css(“background”,”#0000FF”);
改变当前正在执行动画的所有元素的背景色为 #0000FF”
function mover(){
$(“#mover”).slideToggle(“slow”,mover);
}
mover();

$(“#b10”).click(function(){
$(“:animated”).css(“background”,”#0000FF”);
};

4：内容选择器

改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF”
$(“div:contains(‘di’)”).css(“background”,”#0000FF”);
改变不包含子元素(或者文本元素) 的 div 空元素的背景色为”
$(“div:empty”).css(“background”,”#0000FF”);
改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF”
$(“div:has(.mini)”).css(“background”,”#0000FF”);
改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF”
$(“div:parent”).css(“background”,”#0000FF”);
改变不含有文本 di 的 div 元素的背景色”
$(“div:not(:contains(‘di’))”).css(“background”,”#0000FF”);

5：可见度过滤选择器

改变所有可见的div元素的背景色为 #0000FF”
$(“div:visible”).css(“background”,”#0000FF”);
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF”
$(“div:hidden”).show().css(“background”,”#0000FF”);
选取所有的文本隐藏域, 并打印它们的值”
/




/
var $inputs = $(“input:hidden”);
//javascript的变历方法
// for(var i=0;i<$inputs.length;i++){
// var input = $inputs[i];
//
// alert(input.value);
// }

/
each(function(index,domEle){})
jquery中的普通遍历方法，需要jquery对象来调用
回调函数：function(index,domEle){}
index：获取到的标签的索引值
domEle：dom对象
/
//js的变历方法示例
$inputs.each(function(index,domEle){
//alert(domEle.value);
//alert($(domEle).val());
//alert(this.value); //this代表的是domEle对象
alert($(this).val());
});

});

/
jquery.each(object,function(index,domEle){})
全局遍历函数，不需要jquery对象来调用
object：要遍历的数组或对象
回调函数：function(index,domEle){}
index：获取到的标签的索引值
domEle：dom对象
*/
$.each($inputs,function(index,domEle){
alert(domEle.value);
});

6：属性过滤器

含有属性title 的div元素”
$(“div[title]”).css(“background”,”#0000FF”);
属性title值等于test的div元素”
$(“div[title=test]”).css(“background”,”#0000FF”);
属性title值不等于test的div元素(没有属性title的也将被选中)”
$(“div[title!=test]”).css(“background”,”#0000FF”);
属性title值 以te开始 的div元素.”
$(“div[title^=te]”).css(“background”,”#0000FF”);
属性title值 以est结束 的div元素..”
$(“div[title$=est]”).css(“background”,”#0000FF”);
属性title值 含有es的div元素.”
$(“div[title=es]”).css(“background”,”#0000FF”);
选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素”
//多个属性过滤选择器并列使用，就这样并列放置就OK
$(“div[id][title=es]”).css(“background”,”#0000FF”);

7：子元素过滤选择器

每个class为one的div父元素下的第2个子元素”
:nth-child()子元素过滤选择器，使用时需在其前面增加空格
:nth-child()子元素过滤选择器，其索引值是从”1”开始
$(“div[class=one] :nth-child(2)”).css(“background”,”#0000FF”);
每个class为one的div父元素下的第一个子元素”
$(“div[class=one] :first-child”).css(“background”,”#0000FF”);
每个class为one的div父元素下的最后一个子元素”
$(“div[class=one] :last-child”).css(“background”,”#0000FF”);
如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素”
$(“div[class=one] :only-child”).css(“background”,”#0000FF”);

8：表单对象属性过滤器

利用 jQuery 对象的 val() 方法改变表单内可用 元素的值”





$(“input[type=text]:enabled”).val(“xxx”);
利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值”
$(“input[type=text]:disabled”).val(“xxx”);
利用 jQuery 对象的 length 属性获取多选框选中的个数”
美容
IT
金融
管理

alert($(“input[type=checkbox]:checked”).length);
利用 jQuery 对象的 text() 方法获取下拉框选中的内容”
程序员 中级程序员 高级程序员 系统分析师

本科 博士 硕士 大专

$(“select option:selected”).each(function(index,domEle){
alert($(domEle).text());
};

9：表单选择器

$(“:image”)匹配所有的图像域
$(“:reset”)匹配所有重置按钮
$(“:button”)匹配所有按钮
$(“:file”)匹配所有文件域
$(“input:hidden”)匹配所有不可见元素，或type为hidden的元素，这个选择器不限于表单标签，那些style为hidden的元素也会被匹配。
$(“input:enabled”)匹配所有可用的input元素，即不带属性disabled=”disabled”
$(“input:disabled”)和上面相反
$(“input:checked”)匹配所有选择的元素（包括，复选框，单选框，但不包括select的option）
$(“select option:selected”)匹配所有选择的option元素。
转自：https://www.cnblogs.com/hemingshui/p/3352662.html

内容选择器

empty
作用：找到既没有文本内容又没有子元素的指定元素
parent
作用:找到又文本内容或有子元素的指定元素
contains(“text”)
作用:找到指定文本内容的元素
has(‘span’)
作用:找到有指定子元素的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        div{
            width:50px;
            height: 100px;
            background:red;
            margin-top:5px;
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            // empty
            // 作用：找到既没有文本内容又没有子元素的指定元素
            var $div = $("div:empty");
            console.log($div);

            // parent
            // 作用:找到又文本内容或有子元素的指定元素
            var $div = $("div:parent");
            console.log($div);

            // contains("text")
            // 作用:找到指定文本内容的元素
            var $div = $("div:contains('我是div')");
            console.log($div);

            // has('span')
            // 作用:找到有指定子元素的指定元素
            var $div = $("div:has('span')");
            console.log($div);
        });
    </script>
</head>
<body>
    <div></div>
    <div>我是div</div>
    <div>gg我是div123</div>
    <div><span></span></div>
    <div><p></p></div>
</body>
</html>

属性和属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        jQuery(document).ready(function($) {
            /*
            1、什么是属性
            对象身上保存的变量就是属性

            2、如何操作属性节点
            对象.属性名称=值
            对象.属性名称
            对象["属性名称"]=值
            对象["属性名称"]

            3、什么是属性节点
            <sapn name="it666"></sapn>
            在编写HTML代码时，在HTMl标签中添加的属性就是属性节点
            在浏览器中找到span这个DOM元素之后，展开看到的就是属性
            在attributes属性中保持的所有内容都是属性节点

            4、如何操作属性节点
            DOM元素.setAttribute("属性名称","值")
            DOM元素.getAttribute("name")

            5、属性节点和属性有什么区别
            任何对象都有我们的属性，只有DOM对象才有属性节点
             */
            function Person(){

            }
            var p = new Person;
            p.name = "dd";
            p["name"];
            console.log(p.name);
            console.log(p["name"]);

            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name","inj");
            console.log(span.getAttribute("name"));
        });
    </script>
</head>
<body>
    <span name=age>aaaa</span>
</body>
</html>