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