菜单

澳门皇家赌场前者基础-jQuery的最常用的的方法each、data、

2019年5月13日 - 皇家前端

阅读目录

  1. each
  2. inArray
  3. get
  4. index
  5. data

3、jQuery中DOM成分的得到get方法

jQuery是叁个合集对象,要是要求独自操作合聚焦的的某二个要素,能够通过.get()主意取获得

以下有一个a成分结构:

<a>1</a>
<a>2</a>
<a>3</a>

经过jQuery获取具备的a成分合集$(“a”),倘诺想进一步在合聚焦找到第一3个dom成分单独管理,能够因而get方法

语法:

.get( [index ] )

注意2点

  1. get方法是获取的dom对象,也正是经过document.getElementById获取的对象
  2. get方法是从0开始索引

由此第四个a成分的找寻: $(a).get(1)

负索引值参数

澳门皇家赌场,get方法还足以从后往前索引,传递叁个负索引值,在意的负值的索引开头值是-1

如出一辙是找到第3成分,能够传递 $(a).get(-2) 

一、jQuery中each方法的运用

jQuery中有个很主要的中坚方法each,大多数jQuery方法在里面都会调用each,其根本的缘故的正是jQuery的实例是二个要素合集

一般来讲:找到全体的div,并且都设置样式,css只是四个方法,所以里面会调用each管理那些div的合集,给各种div都设置style属性

$('div').css(...)

jQuery的半数以上措施都是本着成分合集的操作,所以jQuery会提供$(selector).each()来遍历jQuery对象

.each只是处理jQuery对象的秘技,jQuery还提供了一个通用的jQuery.each方法,用来管理对象和数组的遍历

语法

jQuery.each(array, callback )
jQuery.each( object, callback )

第二个参数字传送递的正是一个目标大概数组,第3个是回调函数

$.each(["Aaron", "多多"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});

each就是for循环方法的三个卷入,内部正是经过for遍历数组与对象,通过回调函数再次来到内部迭代的局地参数,第一个参数是时下迭代成员在目的或数组中的索引值(从0初步计数),第3个参数是眼下迭代成员(与this的引用同样

jQuery.each()函数还会依据每一趟调用函数callback的再次来到值来决定继续动作。如果重返值为false,则甘休循环(约等于平常循环中的break);假如回到其余任何值,均表示继续实行下2个循环往复。

jQuery方法可以很有益的遍历贰个数码,无需思虑那几个数目是目的依旧数组

$.each(["Aaron", "多多"], function(index, value) {
    return false; //停止迭代
});

五、.data方法

在特出的因素集结中的全部因素上囤积大4相关数据或回到相称的因素集结中的第贰个要素的加以名称的多寡存款和储蓄的值。

.data(key, value):

叙述:在合作的因素上囤积大4相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k,值为100

.data(key):

叙述:
再次回到相配的因素会集中的第二个要素的加以名称的数据存款和储蓄的值—通过 .data(name,value)或 HTML5 data-*性子设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

讲述:移除存放在要素上的数目,不加key参数表示移除全部保留的数额。

$("div").removeData("k");  //移除元素上存放k对应的数据

 

肆、jQuery中DOM元素的获得index方法

get方法是通过已知的目录在合集中找到相应的要素。如若反过来,已知成分怎样在合聚焦找到相应的目录呢?

.index()方法,从匹配的因素中搜索给定成分的索引值,从0伊始计数。

语法:参数接受三个jQuery也许dom对象作为查找的口径

.index()
.index( selector )
.index( element )

大致来讲:

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$(“li”).index()
未有传递参数,反正的结果是壹,它的意味是回去同辈的排列循序,第一个li此前有a成分,同辈成分是a开头为0,所以li的启幕索引是一

比如要快快找到第二个li在列表中的索引,能够经过如下二种艺术管理

$("li").index(document.getElementById("test2")) //结果:1
$("li").index($("#test2"))  //结果:1

澳门皇家赌场 1澳门皇家赌场 2

 <style>
    a {
        font-size: 30px;
        font-weight: 900;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>index方法</h2>
    <ul>
        <a></a>
        <a></a>
        <li id="test1">1</li>
        <li id="test2">2</li>
        <li id="test3">3</li>
    </ul>
    <ul>
        <li id="test4">4</li>
        <li id="test5">5</li>
        <li id="test6">6</li>
    </ul>
    <select id="animation">
        <option value="1">index无参数</option>
        <option value="2">index传递dom</option>
        <option value="3">index传递jQuery对象</option>
    </select>
    <input id="exec" type="button" value="点击执行">
    <br />
    <br /> 索引结果:

    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();

        var $span = $("span");
        $span.empty();

        if (v == "1") {
            //找到第一个li的同辈节点中的索引位置
            $span.text($("li").index())
        } else if (v == "2") {

            //通过传递dom查找
            $span.text($("li").index(document.getElementById("test5")))

        } else if (v == "3") {
            //通过传递jQuery对象查找
            $span.text($("li").index($("#test6")))

        }
    });
    </script>

实例

2、jQuery中寻觅数组中的索引inArray

在PHP有in_array()剖断有些成分是还是不是留存数组中,JavaScript却从没,不过jQuery封装了inArray()函数推断成分是或不是留存数组中。

留意了:在ECMAScript5已经有数量的indexOf方法协助了,不过jQuery保持了版本向下包容,所以封装了三个inArray方法

jQuery.inArray()函数用于在数组中查找钦定的值,并再次回到其索引值。要是数组中不存在该值,则赶回
-一。

语法:

jQuery.inArray( value, array ,[ fromIndex ] )

用法特别轻松,传递三个检查测试的指标值,然后传递原始的数组,能够透过fromIndex规定查找的起头值,暗许数组是0起先

例如说:在数组中查找值是5的目录

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4

注意:

如果要判断数组中是否存在指定值,你需要通过该函数的返回值不等于(或大于)-1来进行判断

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图