使用jQuery获取元素

2018-04-12 本文已影响6人好奇男孩

jQuery选择器

jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。

1.png

2.png

3.png

4.png

5.png

jQuery还提供了一些方法帮助我们查找当前元素相关元素

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="header">
 <div class="nav">
    <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
   <p class="ok">ok</p>
 </div>
</div>
  <div class="main">
     <div class="content">
    <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
   <p class="ok">ok</p>
  </div>
</body>
</html>

1..eq(index)
对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法

$(".child").eq(2)
init [div.child, prevObject: init(8), context: document]

2..next / .prev
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素

$(".child").eq(0).next()
init [div.child, prevObject: init(1), context: document]0: div.childcontext: documentlength: 1prevObject: init [div.child, prevObject: init(8), context: document]__proto__: Object(0)
$(".child").eq(1).prev()
init [div.child, prevObject: init(1), context: document]0: div.childcontext: documentlength: 1prevObject: init [div.child, prevObject: init(8), context: document]__proto__: Object(0)
$(".child").eq(1).prev('ok')
init [prevObject: init(1), context: document]

3..nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素

$(".child").eq(1).prevAll('')
init [div.child, prevObject: init(1), context: document]0: div.childcontext: documentlength: 1prevObject: init [div.child, prevObject: init(8), context: document]__proto__: Object(0)
$(".child").eq(1).nextAll('')
init(3) [div.child, div.child, p.ok, prevObject: init(1), context: document]

4..siblings
.siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$(".child").eq(1).siblings('')
init(4) [div.child, div.child, div.child, p.ok, prevObject: init(1), context: document]

5..parent([selector])
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器

$(".child").eq(1).parent('.nav')
init [div.nav, prevObject: init(1), context: document]

.parents([selector])
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数\

$(".child").eq(1).parents('#header')
init [div#header, prevObject: init(1), context: document]

6..children / .find
.children([selector])
获得匹配元素集合中每个元素的子元素，选择器选择性筛选

$('.nav').children('.child')
init(4) [div.child, div.child, div.child, div.child, prevObject: init(1), context: document]

.find([selector])
查找符合选择器的后代元素

$('#header').find('.child')
init(4) [div.child, div.child, div.child, div.child, prevObject: init(1), context: document, selector: "#header .child"]

7.filter
.filter(selector), .filter(function(index))
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('.child').filter(":even")
init(4) [div.child, div.child, div.child, div.child, prevObject: init(8), context: document]
$('.child').filter(function(index) {
  return index % 3 === 0;
})
init(3) [div.child, div.child, div.child, prevObject: init(8), context: document]

8..has
.has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('.nav').has("div")
init [div.nav, prevObject: init(1), context: document]

9..is
.is(selector), is(function(index)), is(dom/jqObj)
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

$('.nav').is(".nav")
true

范例：

使用 jQuery 实现 Tab 切换效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        .main{
            margin-top: 50px;
        }
        .main .header:after{
            content: '';
            display: block;
            clear: both;
        }
        .main .header .tab{
            float: left;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding: 10px 20px;
            background-color: #dddddd;
            cursor: pointer;
        }
        .main .header .tab:last-child{
            border-right: 1px solid #ccc;
        }
        .main .header .tab.active{
            background-color: #fff;
        }
        .main .content{
            border: 1px solid #ccc;
            background-color: #fff;
            height: 200px;
            width: 400px;
        }
        .main .theme{
            display: none;
            background-color: #fff;
            padding: 100px;
        }
        .main .theme.active{
            display: block;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="tab active">1</div>
        <div class="tab ">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
    </div>
    <div class="content">
        <div class="theme active">one</div>
        <div class="theme ">two</div>
        <div class="theme">three</div>
        <div class="theme">four</div>
    </div>
</div>
<script>
    $(".main  .tab").on('click',function(){
        console.log(this);
        $(this).addClass('active')
                .siblings()
                .removeClass('active')

        $(this).parents('.main')
                .find('.theme')
                .eq($(this).index())
                .addClass('active')
                .siblings()
                .removeClass('active')
    })

</script>
</body>
</html>

使用原生 js 实现 Tab 切换效果

      function $$(select){
          return document.querySelectorAll(select)
      }
      $$(".main .tab").forEach(function(node){
          node.addEventListener('click',function(){
              var index;
              this.parentElement.querySelectorAll(".tab").forEach(function(e,x){
                  e.classList.remove('active');
                  if(node===e){
                     index=x;
                  }
              });
              this.classList.add('active');
              this.parentElement.nextElementSibling.querySelectorAll(".theme").forEach(function(e){
                  e.classList.remove("active")
              });
              this.parentElement.nextElementSibling.querySelectorAll('.theme')[index].classList.add('active')
          })
})

使用使用 jquery能更方便，且简化我们的代码

注意：jQuery 1.x 版本和 2.x 版本有什么区别？

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日);(推荐使用)；
2.x：不兼容ie678，较少人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
不考虑兼容性的情况下尽量用最新的版本
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

使用jQuery获取元素

jQuery选择器

jQuery还提供了一些方法帮助我们查找当前元素相关元素

范例：

注意：jQuery 1.x 版本和 2.x 版本有什么区别？

猜你喜欢

热点阅读