前端基础-jQuery的最常用的的方法each、data、

阅读目录

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

一、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 )

第一个参数传递的就是一个对象或者数组,第二个是回调函数

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

each就是for循环方法的一个包装,内部就是通过for遍历数组与对象,通过回调函数返回内部迭代的一些参数,第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数),第二个参数是当前迭代成员(与this的引用相同

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false,则停止循环(相当于普通循环中的break);如果返回其他任何值,均表示继续执行下一个循环。

jQuery方法可以很方便的遍历一个数据,不需要考虑这个数据是对象还是数组

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

二、jQuery中查找数组中的索引inArray

在PHP有in_array()判断某个元素是否存在数组中,JavaScript却没有,但是jQuery封装了inArray()函数判断元素是否存在数组中。

注意了:在ECMAScript5已经有数据的indexOf方法支持了,但是jQuery保持了版本向下兼容,所以封装了一个inArray方法

jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。

语法:

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

用法非常简单,传递一个检测的目标值,然后传递原始的数组,可以通过fromIndex规定查找的起始值,默认数组是0开始

例如:在数组中查找值是5的索引

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

注意:

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

三、jQuery中DOM元素的获取get方法

jQuery是一个合集对象,如果需要单独操作合集中的的某一个元素,可以通过.get()方法获取到

以下有3个a元素结构:

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

通过jQuery获取所有的a元素合集$("a"),如果想进一步在合集中找到第二2个dom元素单独处理,可以通过get方法

语法:

.get( [index ] )

注意2点

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

所以第二个a元素的查找: $(a).get(1)

负索引值参数

get方法还可以从后往前索引,传递一个负索引值,注意的负值的索引起始值是-1

同样是找到第二元素,可以传递 $(a).get(-2) 

四、jQuery中DOM元素的获取index方法

get方法是通过已知的索引在合集中找到对应的元素。如果反过来,已知元素如何在合集中找到对应的索引呢?

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

语法:参数接受一个jQuery或者dom对象作为查找的条件

.index()
.index( selector )
.index( element )
  • 如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
  • 如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置
  • 如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1

简单来说:

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

$("li").index() 没有传递参数,反正的结果是1,它的意思是返回同辈的排列循序,第一个li之前有a元素,同辈元素是a开始为0,所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

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

 <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 /> 索引结果:
    <span></span>
    <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>

实例

五、.data方法

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述:在匹配的元素上存储任意相关数据。

$("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对应的数据

原文地址:https://www.cnblogs.com/ManyQian/p/9164221.html

时间: 2024-10-13 20:00:42

前端基础-jQuery的最常用的的方法each、data、的相关文章

Web前端基础——jQuery(二)

一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中 var arr=[1,3,5,7,9]; arr=$.map(arr,function(item){ return item*10; }); alert(arr); [10,30,50,70,90]; //上例是将数组中的每个元素乘10,然后返

前端基础 jQuery

一 jQuery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是——WRITE LESS,DO MORE! 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments.events.实现动画

前端基础JQuery

JQuery对象是通过JQquery包装DOM对象后产生的对象.JQuery对象是JQuery独有的.如果一个对象是JQuery对象,那么它就可以使用JQuery中的方法. $("#test").html(); 获取ID为test的元素内的html代码 DOM实现代码:document.getElementById("test").innerHTML; 虽然JQuery对象是DOM对象包装后产生的,但是JQuery无法使用DOM对象的任何方法,同理DOM对象也不能使

前端基础-jQuery中的如何操作标签

阅读目录 样式操作 文本操作 属性操作 文档操作 一.样式操作 1.样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加. ①.addClass( className )方法: 通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一

Web前端基础——jQuery(一)

前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书.现在是一边搜视频,一边看这本书. 认识jQuery,我将从以下几方面进行讲解. 一.JavaScript和JavaScript库 随着Web 2.0的兴起,JavaScript受重视的程度提高,带动JavaScript程序库也蓬勃发展起来. 过程:Prototype->Dojo->jQuery-

Web前端基础——jQuery(三)

本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQuery 中的事件7 jQuery 中的动态效果 一. jQuery 节点遍历 == next()   //用于获取节点之后的第一个同辈元素 注意,next() 中可以加过滤器 例如 next("div") == nextAll()  //获取节点之后的所有同辈元素(注意: 是节点之后,这一点

前端基础---jquery练习

左侧菜单 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>left_menu</title>     <style>           .menu{               height: 500px;               width: 20%;         

前端基础-HTML常用标签介绍

前端基础-HTML常用标签介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则: 2>.浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性): 3>.静态网页文件扩展名:".html "或 &qu

前端基础之jquery

初识jquery jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是——WRITE LESS,DO MORE! 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器. jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments.events.实现动画效果