jQuery选择器基础

• 首先引入下载好的jQuery

<link rel="stylesheet" href="node_modules/jquery/dist/jquery.min.js">

• 连缀 

$(".div1").children("div").css("background","red");

连缀就是如果方法前是一个jQuery对象，就对着对象起作用，如果前面不是jQuery对象，那就往前找，直到找到一个jQuery对象为止

• 选择器

• 标签选择器

 $("div");//标签选择器  选中所有div 

打印得到的是一个类数组，就是jQuery对象，不能使用数组的方法，也不能使用dom的属性和方法

$("div").eq(0);//获取jQuery中的某一个jQuery对象
$("div")[0];//获取的是一个dom对象

上面第二条就是jQuery方法获取一个dom元素

下面是获取dom标签后如何转化为jQuery对象

var div=document.getElementsByTagName("div");
$(div);

ps：jQuery和dom所有的属性和方法不能互相使用，要想使用必须要先进行转换

• Id选择器

$("#div0");

• Class名选择器

 $(".div0");

• 群组选择器

 $("div,span");

• 后代选择器

$("div span");//所有的div下的span
$("div.div1");//所有classname叫div的div

• 通配选择器

$("div>.div1");//div下的Class名叫div0的选择器

• 相邻兄弟选择器

$(".div1+div");//Class名叫div1的相邻的div
$(".div1+*");//Class名叫div1的相邻的所有元素

• 多个兄弟选择器

$(".div1~*");//Class名叫div1的统计的的所有元素

• 查找后代选择器的方法，这样效率更快

$(".div1").find("div");//等同于  $(".div1 div);
$("div").find(".div1");//等同于  $("div .div1);

• 查找子代选择器的方法，效率也更快

     $(".div1").children("div");//等同于  $(".div1>div);
     $("div").children(".div1");//等同于  $("div>.div1);

• 查找相邻兄弟选择器的方法，效率更快

$('#box').next('p');//等同于$("#box+p);
$('#box').next();//等同于$("#box+*);

• 查找所有兄弟选择器的方法

$('#box').nextAll('p');//等同于$("#box~p);
$('#box').nextAll();//等同于$("#box~*);

---

 以上是与原先的HTML中相差不多的，下面是jQuery增加的

• 同级向上找

$('#box').prev('p').css('color','red'); //同级上一个元素 
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素

• 从一个元素找到另一个元素

nextUntil()和 prevUnitl()方法
选定同级的下面或上面的所有节点，选定非指定的所有 元素，一旦遇到指定的元素就停止选定。 
$('#box').prevUntil('p').css('color','red'); //同级上非指定元素选定，遇到则停止 
$('#box').nextUntil('p').css('color','red'); //同级下非指定元素选定，遇到则停止

• 上下相邻的所有元素 进行选定

('#box').siblings('p').css('color','red'); //同级上下所有元素选定 
//等价于下面： 
$('#box').prevAll('p').css('color','red');
$('#box').nextAll('p').css('color','red');

• 属性选择器

使用$()函数时，如果是获取标签，必须使用""引起来 ，如果是DOM或者变量都不需要使用""

$("[title]");//获取属性是title属性的标签

$("a[title]");//标签选择器和属性选择器组合，选择所有a标签中含有title这个属性的a标签

$("[title='img']"));//判断 title标签属性值是img的，这里的等号是一个，表示相等

$("[class^=div]"));//class的值是以div起头的，也可以写成$("[class^='div']")这样

$("[class$='0']"//class的值是以0结尾的元素

$("[class|=lis]")//这个是选择class名是以lis开头的并且后面紧跟着-的元素

$("[class~=bn]")//选择class名里含有bn的，也就是说这个类名可能前后有空格，并不止bn这一个class名

$("[title!=img]")//选择title属性不是img的，也包括没有title属性的

$("[title][class][class!=lis]")//多项属性选择器，既有title属性又有class，class名还是lis的元素