<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
// jQuery的循环
// 1 , 隐式迭代
// 会自动给 伪数组中的所有标签对象,加载相同的内容 属性样式等设定 以及 事件的绑定
console.log( $('ul>li'))
// 设定的属性样式,会自动加载给所有的标签对象
$('ul>li').css({color:'red'});
// 给所有的标签的自动绑定相同的事件
$('ul>li').click(()=>{
console.log(123);
})
// 2 , each循环
// 隐式迭代,获取属性,只能获取第一个标签的属性和属性值
// 不会逐一获取所有标签对象的属性和属性值
// 需要使用循环语法
// 第二个参数,存储的标签对象,是 js 对象形式,需要 $() 转化为 jQuery 语法形式
// $().each( (索引,标签对象)=>{} )
<div class="box">
<ul>
<li name="ulli" class="active">1</li>
<li name="ulli">2</li>
<li name="ulli">3</li>
</ul>
<ol>
<li name="olli" class="active">内容1</li>
<li name="olli">内容2</li>
<li name="olli">内容3</li>
</ol>
</div>
<script src="./jquery.min.js"></script>
<script>
// 思路:
// 点击 ul>li 清除 ul>li 和 ol>li 的css样式
// 给 点击的 ul>li 添加样式
// 找到索引相同的 ol>li 添加样式
// jQuery思路:
// 点标签,给当前标签添加样式,给兄弟标签去除样式
// 找到父级ul,找到ul下的ol,找到ol中的li,清除所有li样式,找到索引相同的li,添加样式
// 匿名的事件处理函数,this指向的是 触发事件的标签对象
// 是 js 标签对象 需要 $(this) 转化为 jQuery标签对象
$('ul>li').click(function(){
// $(this).addClass('active') // 给点击的ul>li添加样式
// .siblings() // 找到所有的兄弟标签
// .removeClass('active') // 给兄弟标签删除样式
// .parent() // 当期是ul>li,找父级,是ul
// .next() // ul的下一个兄弟是ol
// .find('li') // 在ol中找到所有的li
// .removeClass('active') // 给所有ol>li清除样式
// .eq($(this).index()) // 找到与this索引相同的ol>li
// .addClass('active') // 添加样式
$(this).addClass('active').siblings().removeClass('active').parent().next().find('li').removeClass('active').eq( $(this).index() ).addClass('active');
})