二.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 ...
随机推荐
- data.table 中的动态作用域
data.table 中最常用的语法就是 data[i, j, by],其中 i.j 和 by 都是在动态作用域中被计算的.换句话说,我们不仅可以直接使用列,也可以提前定义诸如 .N ..I 和 .S ...
- Android安装包apk文件在某些版本操作系统上安装解析包出错问题的解决办法
当我们将Android升级功能的中的下载新版本apk文件存放在data/data/xxx.apk位置时,在有的些版本的手机中安装可能会出现安装包解析出错的问题,对于该问题的解决方案是提升该文件的权限. ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- Undertow,Tomcat和Jetty服务器配置详解与性能测试
undertow,jetty和tomcat可以说是javaweb项目当下最火的三款服务器,tomcat是apache下的一款重量级的服务器,不用多说历史悠久,经得起实践的考验.然而:当下微服务兴起,s ...
- 雷林鹏分享:Ruby File 类和方法
Ruby File 类和方法 File 表示一个连接到普通文件的 stdio 对象.open 为普通文件返回该类的一个实例. 类方法 序号方法 & 描述 1File::atime( path) ...
- 将 Spring boot 项目打成可执行Jar包,及相关注意事项(main-class、缺少 xsd、重复打包依赖)
最近在看 spring boot 的东西,觉得很方便,很好用.对于一个简单的REST服务,都不要自己部署Tomcat了,直接在 IDE 里 run 一个包含 main 函数的主类就可以了. 但是,转念 ...
- 初识webservice 服务
1.获取电话号码归属地查询 首先访问: http://www.webxml.com.cn/zh_cn/web_services.aspx ①新建一个MyEclipse项目(WebService) ht ...
- java并发编程:线程安全管理类--原子操作类--AtomicIntegerArray
1.类 AtomicIntegerArray
- Constructor vs Object
1. Constructor:是用于创建和初始化类中创建的一个对象的一种特殊方法. constructor([arguments]) { ... } 在一个类中只能有一个名为 “constructor ...
- 关于父类私有属性在子类构造函数中super调用的解释
package test; public class Car { private int carMoney; //汽车租金 private String carName; //汽车名字 private ...