jQuery里面的获取元素

最新推荐文章于 2023-11-08 08:20:01 发布

少加冰～

最新推荐文章于 2023-11-08 08:20:01 发布

阅读量411

点赞数 1

分类专栏：前端文章标签： jQuery

本文链接：https://blog.csdn.net/GengFuGuo/article/details/109378224

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原生 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()