jQuery核心

Posted 2021-04-08 在路上别等待

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( [" a " , " b "] , function( index , value ){

         //index是索引，也就是数组的索引

         //value 就是数组中的值了

        })

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

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

$. each( ["Aarron","mkw"],function( index, value){

    return    false;    //停止迭代

})

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

jQuery 中查找数组中的索引 inArray

在 php 中有 in_array() 判断某个元素是否存在数组中，javascript中并没有，但在 jQuery 封装了 inArray() 函数判断元素是否存在数组中。注：在 ECMAScript5 已经有数据的 indexOf() 方法支持了，但jQuery保持了版本向下兼容，所以封装了一个 inArray() 方法。

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

    语法：

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

    用法：

传递一个检测的目标值，然后传递原始的数组，可以通过 fromIndex 规定查找的起始值，默认数组是 0 开始

    例如：

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

    注：

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

jQuery 中去空格神器 trim 方法

页面中，通过 input 可以获取用户的输入值，例如常见的登录信息的提交处理。用户的输入不一定是标准的，输入一段密码：'  123456',注意，密码的前后台会留空，这可能是无心行为，但密码确实没错，针对这样的行为，开发者应该要判断输入值的前后是否哟空白符的，换行符，制表符这样明显的无意义输入值。

jQuery. trim() 函数用于去除字符串两端的空白字符

需注意：

• 移除字符串开始和结尾处的所有转行符，空格(包括连续的空格)和制表符(tab)

• 如果这些空白字符在字符串中间时，它们将被保留，不会被移除

jQuery 中 DOM 元素的获取 get 方法

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

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

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

    语法：

        .get( [index] )

    注：

1. get 方法时获取的 dom 对象，也就是通过 document. getElementById 获取对象

2. get 方法时从 0 开始 索引

    负索引值参数

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

jQuery 中 DOM 元素的获取 index 方法

get() 方法是通过已知的索引在合集中找到对应的元素。而

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

    语法：

.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 在列表中的索引，可以通过一些方式处理

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

$("li"). index($("#test2"))    //结果：1