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数字格式化通用类 accounting.js使用
Aug 24 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 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
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
python针对excel的操作技巧
2018/03/13 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python如何给函数库增加日志功能
2020/08/04 Python
Python编写万花尺图案实例
2021/01/03 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
课外小组活动总结
2014/08/27 职场文书
小学教师师德整改措施
2014/09/29 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL