jQ选择器

层次选择器

<ul>
 <p>大家好</p> p是ul子级
<li>
 <p>li 你好1</p>  p是li子级
</li>
<li>
   <p>li 你好2</p>
</li>
<li>
  <p>li 你好3</p>
</li>
</ul>

//后代选择器
p是ul后代，所有含p都被选中
 $('ul p').css('background','red'); 
 
//子级选择器 
第一个p子级，被选中
$('ul > p').css('background','red')；
$('li > p').css('background','red');

//相邻选择器
用来选取紧邻目标元素的下一个元素
$('p+li').css('background','red');
 
//同辈选择器
用来选取目标元素之后的所有同辈元素
$('p ~ li').css('background','red');

jQuery 元素选择器 基本选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
1.$("p") 选取 <p> 元素。
2.$("p.intro") 选取所有含有class="intro"的 <p> 元素。
3.$("p#demo") 选取所有 id="demo" 的 <p> 元素。

4.$('.intro,.p1')//并集选择器,逗号隔开

5.$('p').css('background','red')//标签选择器，含有p标签都被选
css方法 第一个参数是属性 第二个参数是值 都是字符串类型 

jQuery 属性选择器

• jQuery 使用 XPath 表达式来选择带有给定属性的元素。
• XPath:XML文档中查找信息的语言,对元素和属性进行遍历

[]表示属性 选取属性是href的a标签
1.$('a[href]')选取所有带有href属性的元素。
2.$('a[class=a1]')根据属性的值来选取元素
3.$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
4.$('a[href^=www]')指定属性值以w开头的元素
5.$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
6.$('a[href*=baidu]')选取所有包含baidu指定值的元素属于全局选择器