jQuery学习笔记之jQuery构建函数的7种方法


Posted in Javascript onJune 03, 2014

一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象;

 //$(selector[,限制范围])
         $(".guo").click(function () {//这里没有context参数
             $("a.aguo", this).css({"color":"red"});//this就是context参数,用于限定范围
         });

二:$(htmlStr[,文档对象]),$(html[,json对象])传入html字符串,创建一个新的dom元素

当传入的是字符串的时候,构造函数会判断是选择器字符串还是html字符串.,
如果是选择器字符串:则遍历dom,查找与之匹配的元素,如果没有匹配元素,
会返回一个空的jQuery对象;否则会将这些匹配到的元素创建一个对一个jQuery对象.

 //$(htmlStr[,文档对象])
         $("<div>大家好</div>").append("body"); //简单标签:不带子节点

三:$(dom元素),$(dom元素集合)将dom元素转换成jQuery对象.

jQuery构造函数会使用js的原生态方法document.createElement()创建一个dom节点

 $("<div><a>大家好</a></div>").append("body"); //复杂标签:含有子节点.

四:$(自定义对象)封装普通对象为jQuery对象.

jQuery会使用文档碎片buildFragment()的方法将所有子节点一次性的全部插入到[,文档对象]中,如果这里不指定的话,就是document; $(html[,json对象]) 

当html是简单标签时,那么她的第二个参数可以是一个json对象,包含了这个dom元素的属性或事件.

 //$(html[,json对象])
  $("<div></div>", {
             "class": "gys", //因为class是js的关键字,所以要加引号
             text: "大家好",
             click: function () { alert("点我干嘛"); }
         }).append("body");

五:$(回调函数)绑定ready事件监听函数,当Dom加载完成时执行.

$(element)或者$(elements)

传入一个dom对象或者一组dom对象集合

 ("div.guo").click(function () {
             $(this).slideUp();
         });

六:$(jQuery对象)接受一个jQuery对象,返回一个jQuery对象的拷贝副本

$(object);

传入一个普通的对象

 var obj = { name: "guo", age: 24 };
 var $obj = $(obj);
 $obj.on("guo", function () {
  alert("出发了一个自定义的事件");
 });
 $obj.trigger("guo");

七:$()创建一个空jQuery对象.

$(callback)传入一个函数

 $(function () { })

这个表示在Dom加载完毕后执行函数中的.

$(jQuery Object);

传入一个jQuery对象,则创建该jQuery对象的一个副本并返回,副本与传入的jQuery对象引用完全相同的Dom对象.

Javascript 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
JavaScript实现简单拖拽效果
Sep 15 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 #Javascript
jQuery学习笔记之总体架构
Jun 03 #Javascript
jquery控制select的text/value值为选中状态
Jun 03 #Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 #Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 #Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 #Javascript
php+js实现倒计时功能
Jun 02 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP执行速率优化技巧小结
2008/03/15 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
优质的学校老师推荐信
2013/10/28 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
技术入股合作协议书
2016/03/21 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
python解析json数据
2022/04/29 Python