9.4.4 jquery选择器用法
jquery的基础选择器
选择器的用法其实跟咱们当时讲css的选择器用法类似，只是代码书写的不同
<ul>
<li id="brother" class="item">路飞学诚1</li>
<li >路飞学诚2</li>
<li class="item">路飞学诚3</li>
<li>路飞学诚4</li>
<li class="item">路飞学诚5</li>
<li>路飞学诚6</li>
<li class="item">路飞学诚7</li>
<a href="#">百度一下</a>
</ul>
<div id="duanzi">
<p>天王盖地虎</p>
<p><h1>小鸡炖蘑菇</h1></p>
<p>宝塔镇河妖</p>
<p>蘑菇放辣椒</p>
</div> // 基本选择器
// 1.id选择器
$('#brother').css('color','black');
// 2.标签选择器
$('a').css('color','yellow')
// 3.类选择器
$('.item').css('background','#FC4708')
// 4.通配符选择器
// console.log($('*').html())
console.log($('a').val())层级选择器
// 后代选择器
console.log($('div p'))
$('div p').css('color','red')
// 子代选择器
$('div >p').css('background','green')
// 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素
$('#brother+ li').css('color','yellow')
// 兄弟选择器
// 匹配所有#brother之后的所有兄弟姐妹元素
$('#brother~li').css('background','#996633')
// :first 获取第一个元素
$('li:first').text('真的吗？')
// :last 获取最后一个元素
$('li:last').html('真的吗？')
//一个给定索引值的元素
console.log($('p:eq(3)').text())基本过滤选择器
<ul>
<li>哈哈哈</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul> //:first 获取第一个元素
$('li:first').text('真的吗？')
//:last 获取最后一个元素
$('li:last').html('我是最后一个元素？')
//:odd 匹配所有索引值为奇数的元素，从0开始计数
$('li:odd').css('color','green');
//:even 匹配所有索引值为偶数的元素，从0开始计数
$('li:even').css('color','red')
//:eq(index) 获取给定索引值的元素 从0开始计数
$('li:eq(1)').css('font-size','30px')
//:gt(index)匹配所有大于给定索引值的元素
$('li:gt(1)').css('font-size','40px')
//:lt(index) 匹配所有小于给定索引值的元素
$('li:lt(1)').css('font-size','40px')
//一个给定索引值的元素
console.log($('p:eq(3)').text())属性选择器
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div> //属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red')
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px')
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen')
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red')
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow')
//匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')筛选选择器
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> //获取第n个元素 数值从0开始
$('span').eq(0).css('font-size','30px')
//first()获取第一个元素
$('span').first().css('background','red')
//last()获取最后一个元素
//.parent() 选择父亲元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red')
//.find()
//查找所有的后代元素
$('div').find('button').css('background','#313131')silbings
Last updated