二.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 ...
随机推荐
- 测试工程师 技能要求:java编程,数据库,linux操作系统,自动化测试开发,性能测试,安全测试
1.具有开发和测试经验,能负责带领大型项目测试 2.掌握或熟悉java编程,熟悉mysql,oracle等db,memcache,nosql等,有互联网行业从业经验 3.可撰写自动化测试工具以及搭建自 ...
- python 获取列表的键值对
nums = [, , , , ] for num_index, num_val in enumerate(nums): print(num_index, num_val)
- 《F4+2 团队项目需求分析改进》
a.分析<动态的太阳系模型项目需求规格说明书>初稿的不足. 任务概述描述的有些不具体,功能的规定不详细,在此次作业进行了修改. b.参考<构建之法>8.5节功能的定位和优先级, ...
- gif&png&jpg&webp
几种图片格式的区别和联系 1.http://www.tuicool.com/articles/AbUvI3A
- python学习笔记(自定义库文件路径)
博主最近在弄接口自动化.主要是基于python自带的unittest框架.包括 Pubilc模块定义所有接口. Main模块根据业务需求重新封装接口便于测试. config文件导入测试业务的固定参数. ...
- SpringBoot全局异常处理方式
每个项目全局异常处理非常重要, 今天在处理项目架构的时候添加了一个全局异常处理. 大概三种异常情况: 一:在进入Controller之前,譬如请求一个不存在的地址,404错误. 二:在执行@Reque ...
- 一.UTF8字符集csv文件在oracle下乱码问题处理
1.问题描述 在excel中生成了一个UTF-8编码格式的csv文件准备导入数据库,在notpad++下打开显示正常,编码集为UTF-8,通过pl/sql dev导入oracle是出现乱码,此时初步推 ...
- wpf中的触发器详解 (转自 乂乂的日志 - 网易博客)
2010-03-24 16:19:07| 分类: WPF相关 | 标签: |字号大中小 订阅 wpf中的触发器详解 WPF/C# 2009-08-24 11:32:50 7.1.2 简单 ...
- UVA-10129 Play on Words (判断欧拉道路的存在性)
题目大意:给出一系列单词,当某个单词的首字母和前一个单词的尾字母相同,则这两个单词能链接起来.给出一系列单词,问是否能够连起来. 题目分析:以单词的首尾字母为点,单词为边建立有向图,便是判断图中是否存 ...
- 002——数组(二)each() list() implode() explode() in_array()
<?php /** * 数组(二)each() list() implode() explode() in_array() */ /*implode() 把数组拆分成字符串 * explode( ...