经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery(一)、核心
来源:cnblogs  作者:(普通人)  时间:2019/4/10 8:52:54  对本文有异议

我认为,学习一门语言,主要是掌握它的思想与用途,就好比谈恋爱一样,你只要猜测到了对方的想法,就能够知情达意。废话不多说,我们开始今天学习的进度,加油ヾ(?°∇°?)??

 

1. jQuery([selector[, context]])

  该函数还可以表示为 $([selector[, context]])。这个函数接收一个包含css选择器的字符串,然后用这个字符串去匹配一组元素。比如,常用的 id 选择器(后面会对各种选择器进行详细说明),$("#div1")。

  jQuery的核心功能都是通过这个函数实现的。就好比一座大楼的地基,jQuery中的一切都是基于这个函数,或者说都是以某种方式使用这个函数。

  默认情况下,如果没有指定context参数, $() 将在当前页面上下文查找DOM元素;如果指定了context参数,就会在这个context中进行查找。在jQuery1.3.2 以后,其返回的元素顺序等同于 context中出现的先后顺序。

  参数:

  (1) selector[, context]:selector 表示用来查找的字符串,通常由css选择器组成;context 作为待查找的DOM元素集、文档或jQuery对象。如:

  1. // 查找div1中的所有checkbox
  2. $("#div1 input:checkbox");
  3. // 查找文档第一个表单中所有单选按钮
  4. $("input:radio", document.forms[0]);

  (2) element:一个用于封装成 jQuery对象的DOM元素,也就是将DOM对象转换为jQuery对象。如:

  1. // 为div1 添加class属性
  2. var div1 = document.getElmentById("div1");
  3. $(div1).attr('class', 'class1 class2 class3');

  (3) object:一个用于封装成 jQuery的对象,和上面的element差不多。

  (4) elementArray:一个用于封装成 jQuery对象的DOM元素数组。

  (5) jQuery():返回一个空的jQuery对象。

2. jQuery(html[, ownerDocument])

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

  1. // 添加div到body中
    $("<div><p>Hello</p></div>").appendTo("body");
  2. $("<div>", {
  3. "class": "test",
  4. text: "Click me!",
  5. click: function(){
  6. $(this).toggleClass("test");
  7. }
  8. }).appendTo("body");

3. jQuery(callback)

  该函数可以表示为 $(callback)。是$(document).ready() 的简写。允许你绑定一个在 DOM元素加载完成后执行的函数。

4. each(callback)

  对每一个所匹配的元素来执行一个函数。

  意味着,每次执行传递进来的函数时。this关键字都指向不同的DOM元素。并且,每次执行函数时,都会给函数传递一个表示该元素在匹配集合中索引位置的值(从 0 开始)。函数方法 false 将终止each。返回 true 将执行下一个元素。

  1. // 对前3个img进行src设置
  2. $("img").each(function(i){
  3. if( i == 3){
  4. // 跳出循环
  5. return false;
  6. }
  7. this.src = "test" + i + ".jpg";
  8. });

5. size()

  返回 jQuery对象中元素的个数

6. length

  返回 jQuery对象中元素的个数。

7. selector

  返回传递给 jQuery() 的原始选择器。这些方法都可以使用console.log(jQuery对象)输出来查看jQuery对象有哪些属性值。

8. context

  返回传递给 jQuery() 原始的DOM节点上下文,即$([selector[, context]])中的第二个参数。如果在获取jQuery对象时没有指定context,则表示当前页面上下文。

9. get([index])

  取得其中一个匹配的元素。inde表示取得的第几个匹配元素(从 0 开始)。

  参数:

  (1) index:取得在索引为 index 的元素。

  (2) get():取得所有匹配的DOM元素集合。

10. index([selector | element])

  搜索匹配的元素,并返回相应元素的索引值,从 0 开始。

  如果不给 .index() 方法传递参数,返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

  如果参数是一个选择器selector,返回值就是原先集合中的元素相对于选择器匹配中的位置。如果找不到,返回 -1。

  如果参数是一组DOM 元素或者 jQuery对象,返回值就是传递的元素相对于集合的位置。

11. data([key], [value])

  在一个元素上存取数据,返回 jQuery对象。

  作用域:当前函数上下文。

  1. $("div").data("blah"); // undefined
  2. $("div").data("blah", "hello"); // blah设置为hello
  3. $("div").data("blah"); // hello
  4. $("div").data("blah", 86); // 设置为86
  5. $("div").data("blah"); // 86
  6. $("div").removeData("blah"); //移除blah
  7. $("div").data("blah"); // undefined
  8. $("div").data("test", { first: 16, last: "pizza!" });
  9. $("div").data("test").first //16;
  10. $("div").data("test").last //pizza!;

12. remove([name | list])

  在元素上移除存放的数据。

  参数:

  (1) name:存储的数据名

  (2) list:移除数组,或以空额分开的字符串

13. jQuery.data(element, [key], [value])

  在元素上存放数据,返回 jQuery对象。

  注意:这是一个底层方法。你应当使用 .data() 来代替。

14. jQuery.noConfict([extreme])

  运行这个函数将变量 $ 的控制权让给第一个实现它的库。这有助于确保 jQuery不会与其他库的 $ 对象冲突。

原文链接:http://www.cnblogs.com/www-123456/p/10679372.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号