jQuery 基础之核心

最新推荐文章于 2024-09-03 01:23:13 发布

小美吖吖

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量135

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/KLmxwx569/article/details/106617303

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

.data()

向被选元素附加数据，或者从被选元素获取数据。

<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
<script>
$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});
</script>

.queue()

显示被选元素上要执行的函数队列；队列是一个或多个等待运行的函数；queue() 方法通常与 dequeue() ，clearQueue() 方法一起使用。
值得注意的是，当使用.queue()添加一个函数的时候，我们应该保证在函数最后调用了 jQuery.dequeue()，这样就能让队列中的其它函数按顺序执行。

  Click here...
  <div></div>
<script>
$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
</script> //此方法的作用就是将原本先执行的css相关的样式处理添加到动画处理的队列当中去，然后再函数中添加.dequeue()，以保证后续队列继续执行；
//也可以使用clearQueue() 清除掉所有的队列函数，作用就是清除动画

.each()

遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each( function(index, Element) )（index为当前元素索引值，Element为当前元素）
你可以使用 ‘return’ 来提前结束 each() 循环。

<style>
  div { width:40px; height:40px; margin:5px; float:left;
        border:2px blue solid; text-align:center; }
  span { color:red; }
</style>
  <button>Change colors</button>
  <span></span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
  <div></div>
  <div></div>
<script>
    $( "button" ).click(function () {
      $( "div" ).each(function ( index, domEle) {
        // domEle == this
        $( domEle ).css( "backgroundColor", "yellow" );
        if ( $(this).is( "#stop" ) ) {//is判断当前this的指向是否是id为stop的元素
          $( "span" ).text( "Stopped at div index #" + index );//设置span的text
          return false;  //结束each循环
        }
      });
    });
</script>

get()

通过jQuery对象获取一个对应的DOM元素。 (原生)
许我们直接访问jQuery对象中相关的DOM节点。如果index的值超出范围 - 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回undefined。
如果不带参数， .get() 会返回所有的元素

<style>
    span { color:red; }
</style>
<body>
  Reversed - <span></span>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
<script>
  function disp(divs) {
    var a = [];
    for ( var i = 0; i < divs.length; i++) {
      a.push( divs[i].innerHTML ); //原生方式
    }
    $( "span" ).text( a.join(" ") );
  }//函数的作用是把div组成的数组，获取到对应的innerHTML，然后再把数组转换为字符串输出。
  disp( $( "div" ).get().reverse() );  //先用.get方法获取所有的div元素，然后使用reverse(),将获取的结果倒序；
  //再把结果作为参数传递给disp函数
</script> 
</body>

index()

不传递任何参数，返回相对于它同辈元素的位置；
参数是一个DOM元素或jQuery对象，返回值就是传入的元素相对于原先集合的位置；
参数是一个选择器，返回值就是原先元素相对于选择器匹配元素的位置；
简单点说，就是参数可以为空，可以是DOM元素或者jQuery对象、选择器；返回值就是选中元素在原队列当中的索引值