二.jQuery源码解析之构建jQuery之构建函数jQuery的7种用法
一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象;
二:$(htmlStr[,文档对象]),$(html[,json对象])传入html字符串,创建一个新的dom元素
三:$(dom元素),$(dom元素集合)将dom元素转换成jQuery对象.
四:$(自定义对象)封装普通对象为jQuery对象.
五:$(回调函数)绑定ready事件监听函数,当Dom加载完成时执行.
六:$(jQuery对象)接受一个jQuery对象,返回一个jQuery对象的拷贝副本
七:$()创建一个空jQuery对象.
//$(selector[,限制范围])
$(".guo").click(function () {//这里没有context参数
$("a.aguo", this).css({"color":"red"});//this就是context参数,用于限定范围
});
当传入的是字符串的时候,构造函数会判断是选择器字符串还是html字符串.,
如果是选择器字符串:则遍历dom,查找与之匹配的元素,如果没有匹配元素,
会返回一个空的jQuery对象;否则会将这些匹配到的元素创建一个对一个jQuery对象.
//$(htmlStr[,文档对象])
$("<div>大家好</div>").append("body"); //简单标签:不带子节点
jQuery构造函数会使用js的原生态方法document.createElement()创建一个dom节点
$("<div><a>大家好</a></div>").append("body"); //复杂标签:含有子节点.
jQuery会使用文档碎片buildFragment()的方法将所有子节点一次性的全部插入到[,文档对象]中,
如果这里不指定的话,就是document;
$(html[,json对象])
当html是简单标签时,那么她的第二个参数可以是一个json对象,包含了这个dom元素的属性或事件.
//$(html[,json对象])
$("<div></div>", {
"class": "gys", //因为class是js的关键字,所以要加引号
text: "大家好",
click: function () { alert("点我干嘛"); }
}).append("body");
$(element)或者$(elements)
传入一个dom对象或者一组dom对象集合
("div.guo").click(function () {
$(this).slideUp();
});
$(object);
传入一个普通的对象
var obj = { name: "guo", age: 24 };
var $obj = $(obj);
$obj.on("guo", function () {
alert("出发了一个自定义的事件");
});
$obj.trigger("guo");
$(callback)传入一个函数
$(function () { })
这个表示在Dom加载完毕后执行函数中的.
$(jQuery Object);
传入一个jQuery对象,则创建该jQuery对象的一个副本并返回,副本与传入的jQuery对象引用完全相同的Dom对象.
二.jQuery源码解析之构建jQuery之构建函数jQuery的7种用法的更多相关文章
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jquery源码解析:jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
- jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- 一.jQuery源码解析之总体架构
(function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navi ...
- jquery源码解析:addClass,toggleClass,hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
随机推荐
- install ros-indigo-tf2
sudo apt-get install ros-indigo-tf2
- Java Spring-AOP的概述
2017-11-08 19:31:23 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP ...
- oracle会自动收集统计信息-记住哦
oracle自动收集统计信息,周一至周五 时间:22:00:00 oracle自动收集统计信息,周六.周日 时间:06:00:00
- 无法安装64位版本的office因为在您的pc
无法安装64位版本的office因为在您的pcWindows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Installer\Products\00 ...
- iOS多线程GCD详解
在这之前,一直有个疑问就是:gcd的系统管理多线程的概念,如果你看到gcd管理多线程你肯定也有这样的疑问,就是:并发队列怎么回事,即是队列(先进先出)怎么会并发,本人郁闷了好久,才发现其实cgd管理多 ...
- js enter键激发事件
document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode | ...
- nmcli命令使用
nmcli命令 地址配置工具:nmcli nmcli device 查看所有网卡的信息 nmcli device status 和numcli device 相同 nmcli device ...
- LambdaMART简介——基于Ranklib源码(二 Regression Tree训练)
上一节中介绍了 $ \lambda $ 的计算,lambdaMART就以计算的每个doc的 $\lambda$ 值作为label,训练Regression Tree,并在最后对叶子节点上的样本 $la ...
- It is the courage
It is the reality that a society which becomes lower and becomes weak.Believe it or not,I think it i ...
- 树的直径证明+HDU2196
首先把无向图变成一棵树,直径肯定由叶子组成. 有以下两种情况: 第一种:经过根节点,则找两个最远的叶子肯定是直径,也就是B+D. 第二种:不经过根节点,则目标的两个叶子肯定有一个不为根的公共祖先,如红 ...