WEB基础之： jQuery 核心

最新推荐文章于 2024-09-01 12:48:53 发布

f_carey

最新推荐文章于 2024-09-01 12:48:53 发布

阅读量180

点赞数

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

本文链接：https://blog.csdn.net/f_carey/article/details/114380826

版权

WEB 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

jQuery 核心

所有案例示例

<body>
    <ul>
        <li id="i1">l1</li>
        <li id="i2">l2</li>
        <li id="i3">l3</li>
    </ul>
    <script src="jquery-3.5.1.js"></script>
</body>

1. jQuery 核心函数

jQuery([selector,[context]]): 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
- ```
// 找到所有 ul 元素，并且这些元素都必须是 body 元素的子元素。
$("body > ul");
```

jQuery(callback): $(document).ready()的简写。允许你绑定一个在DOM文档载入完成后执行的函数。

$(function(){
  // 当DOM加载完成后，执行的函数。
});

jQuery(function($) {
  // 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
});

jQuery(html,[ownerDocument]): 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

创建元素的过程中，这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。

// 动态创建一个 div 元素，并将它追加到 body 元素中。
$("<div><p>Hello</p></div>").appendTo("body");

// 创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

2. jQuery 对象访问

each(callback)：以每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。
- ```
// 列表循环1，结果只包含列表内容
for (let i=0; i<$('li').length;i++) {
  console.log($('li').eq(i).text());
}；
// 列表循环2，结果包含列表内容与列表其他对象。
for (let i in $('li')) {
  console.log($('li').eq(i).text());
}；

// 列表循环3，结果只包含列表内容
$('li').each(function (k, v) {
  console.log(k,v.innerText;
});
```
- 函数返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
  - ```
  // 终止each循环
  $('li').each(function (k, v) {
      if (k===1) {
      return false;
    }
    console.log(k,v.innerText);
  });
```
length: jQuery 对象中元素的个数。
- ```
$("ul").length;
```
get: 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index)不过eq(index)返回的是jQuery对象。
- ```
$('li').get(0).innerText;	// "l1"
```

index([selector|element]): 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果参数为空，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

$('li').index(document.getElementById('i3')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#i2')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#i2').index('li'); //1，传递一个选择器，返回#i2在所有li中的索引位置
$('#i2').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

3. 数据缓存

data([key],[value]): 在元素上存放或读取数据,返回jQuery对象。
- 当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值。
- 当参数为两个时，为像该jQuery对象对应的DOM中存储key-value键值对的数据。
- 如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。
- ```
$('ul').data('k',100);	// 写入数据
$('ul').data('k');		// 读取数据，100;如果没有返回undefined。
```
removeData([name|list]): 在元素上移除存放的数据。
- ```
$('ul').removeData('k');
```

4. 插件

jQuery.extend([deep], target, object1, [objectN]): 为jQuery增加新方法。如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
- ```
<script>
    jQuery.extend({
    min: function (a,b) { return a < b ? a : b;},
    max: function (a,b) { return a>b ? a : b;}
})
</script>
jQuery.min(1,2)  // 1
jQuery.min(3,2)  // 2
```

jQuery.fn.extend(object): 给任意的jQuery标签对象添加一个方法（通常用来制作插件）。

// 制作快速检查是否选中插件
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

// $("input[type=checkbox]").check();
// $("input[type=radio]").uncheck();

jQuery 杂项

1. 数组和对象操作

jQuery.each(object, *[callback]*): 回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
- ```
let a1 = ['l11', 'l22', 'l33'];
$.each(a1, function(k,v) {
  console.log(k,v);
});
```