用户登录
用户注册

分享至

jQuery 基础之层级选择器

  • 作者: 晓李姬
  • 来源: 51数据库
  • 2021-09-21
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。

选择器

  • 基础选择器
$("选择器")  // 里面选择器直接写 CSS 选择器即可,但是要加引号
![基础选择器](images/基础选择器.png)
  • 层级选择器
层级选择器最常用的两个分别为:后代选择器和子代选择器。
![层级选择器](images/层级选择器.png

基础选择器和层级选择器案例代码

<body>
  <div>我是div</div>
  <div class="nav">我是nav div</div>
  <p>我是p</p>
  <ul>
    <li>我是第一个li标签</li>
    <li>我是第二个li标签</li>    
    <li>我是三个li标签</li>
  </ul>
  <script>
    $(function() {
      console.log($(".nav"));
      console.log($("ul li"));
   })
  </script>
</body>
  • 筛选选择器
筛选选择器,顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
语法用法
:first$(‘li:first’)
:last$(‘li:last’)
:eq(index)$(“li:ea(2)”)
:odd$(“li:odd”)
:even$(“li:even”)

案例:

<body>
  <ul>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>

  </ul>
  <ol>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>

  </ol>
  <script>
    $(function() {
      $("ul li:first").css("color", "red");
      $("ul li:eq(2)").css("color", "blue");
      $("ol li:odd").css("color", "skyblue");
      $("ol li:even").css("color", "pink");
   })
  </script>
</body>

知识铺垫

  • jQuery 设置样式
$('div').css('属性', '值')  
  • jQuery 里面的排他思想
// 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
// 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便
我们调用。
$('div').hide();  // 页面中所有的div全部隐藏,不用循环操作
  • 链式编程
// 链式编程是为了节省代码量,看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
  • 案例实操 -淘宝服饰精品案例
思路分析: 1.核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。 2.
需要得到当前小li 的索引号,就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.
中间对应的图片,可以通过 eq(index) 方法去选择 5.显示元素 show() 隐藏元素 hide()
软件
前端设计
程序设计
Java相关