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获取距今n天前的日期
Jul 08 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
在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
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php目录拷贝实现方法
2015/07/10 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
Script标签与访问HTML页面详解
2014/01/10 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue.js中created方法作用
2018/03/30 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
python爬虫 requests-html的使用
2020/11/30 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
区域销售经理职责
2013/12/22 职场文书
英文产品推荐信
2015/03/27 职场文书
运动会运动员赞词
2015/07/22 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python