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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
拖拉表格的JS函数
Nov 20 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 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
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python和php通信乱码问题解决方法
2014/04/15 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python清空文件并替换内容的实例
2018/10/22 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Tensorflow 多线程设置方式
2020/02/06 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
综合实践活动方案
2014/02/14 职场文书
承诺书范本大全
2015/05/04 职场文书
天那边观后感
2015/06/09 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
python垃圾回收机制原理分析
2022/04/13 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android