//查找所有div中，属性name=p1的div元素

         $('div[name=p1]').css("border", "3px groove red"); 

//查找所有div中，有属性p2的div元素

        $('div[p2]').css("border", "3px groove blue");

//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

        $('div[name="-"]').css("border", "3px groove #00FF00");

//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

        $('div[name~="a"]').css("border", "3px groove #668B8B"); 

隐藏一个元素的方法

1. Css display的值为none

2. type="hidden" 的表单元素

3. 宽度和高度都显示设置为0

4. 祖先元素是隐藏的，该元素不会显示

5. CSS visibility的值是hidden

6. CSS opacity的值是0
   

基本筛选选择器针对的都是元素的DOM节点，如果我们要通过内容来过滤，要使用内容选择器来处理。

内容选择器::contains()和:has()都有查找的意思，但是contains是查找指定文本的元素，has查找包含指定元素的元素；如果contains包含的文本在元素的子元素中，同样也是符合的；：parent和:empty用法相反，一个是有子元素或者文本节点，一个是没有。

层级选择器:

层级选择器有一个参考节点

后代选择器中包含子元素选择器的内容

一般兄弟选择器包含相邻兄弟选择器的内容

一般兄弟选择器和相邻兄弟选择器选择的元素都在一个父元素下

如果页面中有多个元素id一样，那么通过id来选择元素只能选择前面的那个元素

jquery对象可以通过数组下标[0]或者.get(0)方式来转化为DOM对象，就可以使用DOM对象中的属性和方法了

var div = $('div').get(0)/[0];

div.style.color = 'red';

DOM对象转化为jQuery，只需要用$()包装DOM对象，因为JQuery其实是DOM对象的包装对象。

$(div).first().css('color','rd');

这样就可以使用jQuery中的属性和方法了

nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

我们有几种方式可以隐藏一个元素：

1. CSS display的值是none。

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

1、多条件选择器

用途：使用多个条件同时选择多个标签

用法：$(“条件1，条件2，条件3，……，条件n “);

特征：多个条件在“”内用逗号隔开；

用例：$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签；

2、相对选择器

用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素

用法：$(“条件1”,条件2)；

特征：两个参数

用例：

$("td",(this)).css(“background”,”red”);

//当前tr的td元素背景变红，其他tr中的td不变；

3、层次选择器

用途：选择后代节点

用法：$(“条件1 条件2 条件3”);

特征：双引号之内，条件之间用空格隔开；

用例：$(“#com ul li”);

//选择Id为com的元素中的UL里面的所有li节点；

Jquery选择器之间用逗号（,）隔开，注意引号，有两种情况：

1. 群组选择器：如：$("selector1,selector2"),表示选择这两个选择器匹配到的元素，然后求合集。

2. 相对选择器：如：$("selector1"，"selector2")，表示前一个选择器是在后一个选择器范围内去再次筛选，

//选择所有包含子元素或者文本的a元素

       //增加一个蓝色的边框

       $("a:parent").css("border", "3px groove blue");

//找到a元素下面的所有空节点(没有子元素)

       //增加一段文本与边框

       $("a:empty").text(":empty").css("border", "3px groove red"); 

//查找所有class='div'中DOM元素中包含"contains"的元素节点

        //并且设置颜色

        $(".div:contains(':contains')").css("color", "#CD00CD");

//查找所有class='div'中DOM元素中包含"span"的元素节点

        //并且设置颜色

        $(".div:has(span)").css("color", "blue");

注意事项：

1. :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

//:eq

    //选择单个

    $(".aaron:eq(2)").css("border", "3px groove blue");

//:gt 选择匹配集合中所有索引值大于给定index参数的元素

    $(".aaron:gt(3)").css("border", "3px groove blue");

//:lt 选择匹配集合中所有索引值小于给定index参数的元素

    //与:gt相反

    $(".aaron:lt(2)").css("color", "#CD00CD");

 //:not 选择所有元素去除不匹配给定的选择器的元素

        //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

        $("input:not(:checked) + p").css("background-color", "#CD00CD");

//找到第一个div

    $(".div:first").css("color", "#CD00CD");

//找到最后一个div

    $(".div:last").css("color", "#CD00CD");

 //:even 选择所引值为偶数的元素，从 0 开始计数

    $(".div:even").css("border", "3px groove red");

//:odd 选择所引值为奇数的元素，从 0 开始计数

    $(".div:odd").css("border", "3px groove blue");