jQuery(一)、核心

时间:2021-09-03 16:40:08

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499

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

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对象。如:

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

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

// 为div1 添加class属性
var div1 = document.getElmentById("div1");
$(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元素。同时设置一系列属性、事件等。如:

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

3. jQuery(callback)

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

4. each(callback)

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

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

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

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对象。

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

$("div").data("blah");  // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); //
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("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不会与其他库的 $ 对象冲突。

jQuery(一)、核心的更多相关文章

  1. JQuery的核心的一些方法&lbrack;扒来的&rsqb;

    JQuery的核心的一些方法 each(callback) '就像循环 $("Element").length; ‘元素的个数,是个属性 $("Element" ...

  2. jQuery 常用核心方法

    jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...

  3. jQuery的核心思想

    jQuery?----www.jQuery.com jQuery的理念:write less, do more jQuery的成就:世界排名前100的公司,46%都在使用jQuery,远远超过其他库, ...

  4. jQuery的核心对象、原型对象、静态方法、动态方法

    什么叫jQuery的核心对象? $ $===jQuery 什么叫jQuery的原型对象? $.fn $.fn===$.prototype 什么叫静态方法? 在构造函树上定义的方法,静态方法通过构造函数 ...

  5. jQuery的核心功能选择器

    选择器是jquery的核心 jquery选择器返回的对象是jquery对象,不会返回undefined或者null,因此不必进行判断 基本选择器: ID选择器  $("#ID") ...

  6. 解密jQuery事件核心 - 委托设计(二)

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  7. 解密jQuery事件核心 - 自定义设计(三)

    接上文http://www.cnblogs.com/aaronjs/p/3447483.html 本文重点:自定义事件 “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率 ...

  8. 解密jQuery事件核心 - 模拟事件(四)

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  9. JQuery基础核心

    一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的. 而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执 ...

  10. jQuery mobile 核心功能

    原文地址:http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/about/features.html 基于 jQuery 核心,使用和jQue ...

随机推荐

  1. 基于DDD的&period;NET开发框架 - ABP的Entity设计思想

    返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...

  2. 我理解的 js 的观察者模式 Observable

    我第一次看 * 写的<设计模式>时一头雾水,现在也是,或许其是针对专业的程序员学习使用的. 通过对Ext / Backbone 源码的学习,可总结如下: 模式 - 就是对解决某一类特定 ...

  3. JS随鼠标坐标移动,显示浮动层内容

    在表单等项目中往往会遇到类似于“备注”.“说明”等100个字内的内容需要显示. 这些内容如果全部呈现开,会影响布局和美观,确又没有必要设计一个层或是一个页面. 那么,我们可以把这些内容放到浮动层中,鼠 ...

  4. 对应键盘的ASCII码(备忘)

    vbKeyLButton 1 鼠标左键 vbKeyRButton 2 鼠标右键 vbKeyCancel 3 CANCEL 键 vbKeyMButton 4 鼠标中键 vbKeyBack 8 Backs ...

  5. Nutch 2&period;2&plus;MySQL&plus;Solr4&period;2实现网站内容的抓取和索引

    原文地址: http://blog.sina.com.cn/s/blog_3c9872d00101p4f0.html Nutch 2.2.1发布快两月了,该版本与Nutch之前版本相比,有较大变化,特 ...

  6. Ajax-Demo

    index.jsp 1 <%@ page language="java" contentType="text/html; charset=UTF-8" p ...

  7. cxf客户端代码wsdlLocation设置相对路径

    利用工生成的cxf客户端代码,wsdlLocation都是绝对路径,为了便于项目更加灵活管理,我们可以将该路径设置为相对路径: 1.下面图片是我的项目路径图片及wsdl地址存放路径: 2.下面图片是我 ...

  8. 中文&sol;英文双语言版本TWRP for Nexus5 -hammerheadcaf

    编译及作者:laser杨万荣 编译时间: 2015-05-17 编译目的:用于刷cm-12.0 和cm-12.1 ROM 因为现在Nexus5 最新的 CM是 hammerheadcaf ,即和 ao ...

  9. 浏览器渲染原理笔记 --《How Browser Work》读后总结

    综述 之前使用ExtJS时遇到一个问题:为什么依次设置多个组件的可见性界面会卡顿?在了解HTML的dom操作相关内容的时候也好奇这个东西到底是怎么回事,然后尤其搞不懂CSS和Html分管样式和网页结构 ...

  10. &lbrack;转&rsqb;centos7 安装jdk11 并设置默认java版本

    https://www.server-world.info/en/note?os=CentOS_7&p=jdk11&f=2 OpenJDK 11 : Install 2018/10/1 ...