二.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 ...
随机推荐
- C#中标准Dispose模式的实现(转载)
需要明确一下C#程序(或者说.NET)中的资源.简单的说来,C#中的每一个类型都代表一种资源,而资源又分为两类: 托管资源:由CLR管理分配和释放的资源,即由CLR里new出来的对象: 非托管资源:w ...
- 经典线程同步问题(生产者&消费者)--Java实现
生产者-消费者(producer-consumer)问题是一个著名的线程同步问题.它描述的是:有一群生产者线程在生产产品,并将这些产品提供给消费者线程去消费. 为使生产者与消费者之间能够并发执行,在两 ...
- Java网络编程学习A轮_03_抓包分析TCP四次挥手
参考资料: http://www.jellythink.com/archives/705 示例代码: https://github.com/gordonklg/study,socket module ...
- c# lambda表达式学习
1. 普通绑定: public void button1_Click(object sender, EventArgs e) { MessageBox.Show("ok"); } ...
- Idea2018激活
[help]-->[register]-->[license server]-->输入下方链接 http://xdouble.cn:8888/ 如果不行,请用下面的这个: http: ...
- 给 C# Expression Evaluator 增加中文变量名支持
由于一些特殊的原因,我的Expression里面需要支持中文变量名,但是C# Expression Evaluator会提示错误,在他的HelperMethods.IsAlpha()里面加上这么一段就 ...
- 识别TLS加密恶意流量
利用背景流量数据(contexual flow data)识别TLS加密恶意流量 识别出加密流量中潜藏的安全威胁具有很大挑战,现已存在一些检测方法利用数据流的元数据来进行检测,包括包长度和到达间隔时间 ...
- HDU 1029 基础dp
题目链接:Ignatius and the Princess IV 大意:就是在N个数里找出唯一一个至少出现过(N+1)/ 2 次的数. 1 <= N <= 999999. hash: / ...
- pycharm 教程(一)安装和首次使用
PyCharm 是我用过的Python编辑器中,比较顺手的一个.而且可以跨平台,在 mac 和 windows 下面都可以用,这点比较好. 首先预览一下 PyCharm 在实际应用中的界面:(更改了P ...
- pyqt5事件与鼠标事件
一,每个事件都被封装成相应的类: pyqt中,每个事件类型都被封装成相应的事件类,如鼠标事件为QMouseEvent,键盘事件为QKeyEvent等.而它们的基类是QEvent. 二,基类QEvent ...