1.基本选择器
- jQuery可以通过标签名，id，类名来获取jquery对象，也可以将原生dom对象转换成jquery对象。
<script>
$(function(){
//获取所有的元素
var $all = $("*")
// 获取所有的p标签
var $p = $("p")
// 获取class为redFont的元素
var $redFont = $(".redFont")
// 获取id为name的元素
var $name = $("#name")
//将dom对象转换成jquery对象
var box = document.querySelector('.box')
var $box = $(box)
})
</script
<script>
$(function(){
// 根据属性获取元素
var $a = $("[href]")
// 根据属性和属性值获取元素
var $button = $("[type=button]")
// 选中#box的子级p元素
var $p2 = $("#box>p")
// 选中#box的后代p元素
var $p3 = $("#box p")
// css伪类选择器(选中#box下的第一个元素且这个元素必须是p元素)
var $p4 = $("#box>p:first-child")
})
</script>
- size()：返回被 jQuery 选择器匹配的元素的数量（length属性也可以返回匹配的元素的数量）
<script>
$(function(){
var $p = $("p")
console.log($p.length) //3
console.log($p.size()) //3
})
</script>
var $li = $('li').eq(0);
2.子，兄弟，父选择器
- 子选择器 children() ：可传入参数对子元素做进一步筛选（可选）
$box.children("p")
//等价于
$('#box>p')
- 后代选择器 find(filter)：参数必选，根据参数筛选匹配的后代元素
$box.find("p")
//等价于
$('#box p')
- 父级选择器 parent()：选择直接父级元素
- 祖先选择器 parents(query)：选择祖先元素，传入参数可进行进一步筛选
- 最近的祖先选择器 closest(query)：选择目标祖先元素，参数必传
var $parent = $('#one').parent()
- 兄弟选择器 siblings() ：选择同级的兄弟元素，传入参数可进行进一步筛选
$('ul_li#test').siblings('li')
- 相邻选择器：next() prev() nextAll() prevAll()
<script>
$(function(){
//第3个li标签（一共5个）
var $li_3 = $('li').eq(2)
console.log($li_3.next()) //li4
console.log($li_3.prev()) //li2
console.log($li_3.nextAll()) //li4 li5
console.log($li_3.prevAll()) //li2 li1
})
</script>
3.限定查找范围
- 查找元素时，可传入第二个参数来限定元素的查找范围，这个参数可以是jq对象，也可以是类名，id等css选择器
<body>
<h3>我是外面的h3</h3>
<div class="box">
<h3>我是里面的h3</h3>
</div>
</body>
</html>
<script>
$(function(){
var $box = $('.box')
$('h3',$box).css({
color:"red" //文字设置成红色
})
//等价
$('h3','.box').css({
color:"red" //文字设置成红色
})
})
</script>
4.end()
- 作用：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
<body>
<div id="box">
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
</body>
<script>
$(function(){
//给p元素设置样式
$('#box').find('ul').find('li').find('p').css('color','red')
//给li元素设置样式
$('#box').find('ul').find('li').find('p').end().css('color','red')
})
</script>
