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 JSQL,SQL无处不在,
May 05 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
传智播客学习之java 反射
2009/11/22 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
毕业寄语大全
2014/04/09 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
人民调解协议书
2016/03/21 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers