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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 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数据的三种方法
2006/10/09 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
详解Vue 的异常处理机制
2020/11/30 Vue.js
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python实现朴素贝叶斯分类器
2018/03/28 Python
python 获取等间隔的数组实例
2019/07/04 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python计算n的阶乘的方法代码
2019/10/25 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
表彰先进的通报
2014/01/31 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
单位推荐信范文
2015/03/27 职场文书
最美乡村教师观后感
2015/06/11 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
OpenCV实现反阈值二值化
2021/11/17 Java/Android