jquery选择器

1、选择器：
css叫做添加样式，但是jQuery叫做添加行为

1）$("div")        获取所有的div标签的DOM元素
2）$("#id")        获取一个id的DOM元素
3）$(".class")        获取class名DOM元素

js和jquery之间的相互转化

原生转jQuery:
var obo = document.getElementById("id");
$(obo)

// jq默认执行，提供的是选择器的功能
// console.log($("#box1"))

var box1 = $("#box1")
//box1.style.background = "green"
//box1.css("background","green")

// jq转原生
//$("#box1")[0].style.background = "green"
// $("#box1").get(0).style.background = "green"

2、进阶选择器

1）群组选择器：$('div,span,p')

2）通配符选择器：$('*')
通配符选择器：选择所有；对性能有极大的浪费所以不能在全局范围内使用，最好打方法就是在局部环境下使用

3、高级选择器

1）后代选择器：$('ul li a')    获取追溯到的所有元素
2）子选择器：$('div>p')    只获取子元素节点
3）next选择器：$('div+p')    只获取某节点后一个同级DOM元素
3）nextAll选择器：$('div~p')    获取某节点后一个同级DOM元素

jQuery为后代选择器提供了一个方法find( )这个方法里面有一个参数，就是想要找到的后代（可以是标签，类名，ID）

$('div p').css('color','red') ==$('div').find('p').css('color','red')
$('div>p').css('color','red') == $('div').children('p').css('color','red')

jQuery提供了next()，nextAll选择器，

$(‘div+p’).css(‘color’,‘red’) == $(‘div’).next(‘p’).css(‘color’,‘red’)
$(‘div~p’).css(‘color’,‘red’) == $(‘div’).nextAll(‘p’).css(‘color’,‘red’)

4、属性选择器

1）$('input[name]')    获取具有这个属性的DOM元素
2）$('input[name=xxx]')    获取具有属性且属性值为xxx的DOM元素
3）$('input[value][name=xxx]')    获取有value属性且name为xxx的DOM值

5、过滤选择器

```javascript
1--伪类选择器
1）$('li:first')    选择第一个元素  
2）$('li:last')    选择最后一个元素
3）$('li:not(.red)')    选择class不是red的元素
4）$('li:even')    选择偶数的所有元素
5）$('li:odd')    选择所有的奇数元素
6）$('li:eq(1)')    选择对应下表的元素

2--内容过滤器
1）$('li:contains(123456)')    选择有123456文本的元素
2）$('li:empty')    选取li中不包含子元素或空文本的元素
3）$('ul:has(.red)')    选择子元素含类red的ul

jquery为了优化选择器性能，提供了一个方法

// $(".msg h2").css("background","red")
// $(".msg").find("h2").css("background","red")

// $(".msg>h2").css("background","red")
// $(".msg").children("h2").css("background","red")

// $(".msg+span").css("background","red")
// $(".msg").next("span").css("background","red")
    
// $(".msg~span").css("background","red")
// $(".msg").nextAll("span").css("background","red")

// $(".list li:first").css("background","red")
// $(".list li").first().css("background","red")
    
// $(".list li:last").css("background","red")
// $(".list li").last().css("background","red")
    
// $(".list li:not(.red)").css("background","red")
// $(".list li").not(".red").css("background","red")
    
// $(".list li:eq(3)").css("background","red")
// $(".list li").eq(3).css("background","red")

// $(".list:has(.red)").css("background","red")
// $(".list").has(".red").css("background","red")

// $(".msg").prev(".cont").css("background","red")
// $(".msg").prevAll(".cont").css("background","red")

// $('.tag').parent().css("border","solid 1px black")
// $('.tag').parents().css("border","solid 1px black")

6、可选性选择器

1）$('li:hidden')    选取所有不可见元素
2）$('li:visible')    选取所有可见元素
注： 是否可见的判定因素为display：block & display :none

7、其他方法

jQuery在选择器和过滤器的基础上提高了一些常用的方法，方便我们开发时灵活使用
1）is()方法   $('li').is('.red');   传递选择器、DOM、jQuery对象     返回:true || false
2）hasClass()    $('li').hasClass('red')    就是('.'+class)    返回：true || false
.end()    终止当前选择器的遍历。回到上个选择条件