jQuery 选择器笔记
jquery基础选择器
$('选择器') 基本上与css选择器相同
demo
$('ul li')
$('.nav')
$('#box')
隐试迭代
遍历内部DOM元素的过程就叫做隐试迭代
<div>第一个</div>
<div>第一个</div>
<div>第一个</div>
<div>第一个</div>
<script>
$(function () {
// 就是把匹配的元素内部循环,给每一个元素添加css样式
$('div').css('background', 'pink')
})
</script>
<ul>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
</ul>
<script>
$(function () {
$('ul li:first').css('color', 'red') //筛选出第一个
$('ul li:eq(2)').css('color', 'blue') //筛选出索引号为2的
$('ul li:odd').css('color', 'green') //筛选出所有索引号是奇数的
$('ul li:even').css('color', 'black') //筛选出所有索引号是偶数的
})
</script>
<!-- jquery筛选方法 -->
<!-- 父级孩子 -->
parent()返回的是最近一级的父级元素
children()返回的是最近的子代元素
find()返回父级下面所有的子元素
<div class="grandfa"> 爷爷 <div class="father"> 父亲 <div class="son"> 儿子 </div> </div> </div>
$(function () { console.log($('.son').parent()); console.log($('.grandfa').children()); console.log($('.grandfa').find('.father').css('color', 'red')); })
<!-- 下拉菜单 -->
<ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">评论</a> </li> </ul> </li> </ul>
$(function () { // 鼠标经过 $('.nav>li').mouseover(function () { $(this).children('ul').show() }) // 鼠标离开 $('.nav>li').mouseout(function () { $(this).children('ul').hide() }) })
<!-- 兄弟元素 -->
siblings()查找兄弟节点 不包括自己本身
eq(index) 通过索引号查找 推荐使用这种方法
hasclass(class) 判断是否有某个类名
<ol> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <list class="item">第一个</list> </ol>
$(function () { $('ol .item').siblings('li').css('color', 'red') $('ol li:eq(2)').css('color', 'blue') $('ol li').eq(3).css('color', 'pink') //推荐使用 console.log($('ol:last').hasClass('item')); })
jQuery排他思想
<button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button>
$(function () { // 给所有按钮绑定点击事件 $('button').click(function () { // 当前的元素添加背景颜色 $(this).css('background', 'pink') // 其他的兄弟清除背景颜色 $(this).siblings('button').css('background', '') }) })
<!-- tab切换 -->
<div class="box"> <div class="btn"> <ul id="left"> <li><button>发卡</button></li> <li><button>手表</button></li> <li><button>鼠标</button></li> <li><button>体重秤</button></li> <li><button>鞋子</button></li> </ul> </div> <div class="pic"> <div> <a href="#"><img src="../imges/fq.jpg" alt=""></a> </div> <div> <a href="#"><img src="../imges/sb.jpg" alt=""></a> </div> <div> <a href="#"><img src="../imges/sb2.jpg" alt=""></a> </div> <div> <a href="#"><img src="../imges/tzc.jpg" alt=""></a> </div> <div> <a href="#"><img src="../imges/xz.jpg" alt=""></a> </div> </div> </div>
$(function () { $('#left li').click(function () { // 获取按钮的索引号 var index = $(this).index(); // 让右侧的盒子得到相应的索引号 $('.pic div').eq(index).show(); // 让其他的兄弟隐藏起来 $('.pic div').eq(index).siblings().hide() }) })
