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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
js实现文本框选中的方法
May 26 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 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
PHP4引用文件语句的对比
2006/10/09 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js给selected添加options的方法
2015/05/06 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
原生JS轮播图插件
2017/02/09 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
django数据库自动重连的方法实例
2019/07/21 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
银行实习生自我鉴定范文
2013/09/19 职场文书
团日活动总结书格式
2014/05/08 职场文书
主题团日活动总结
2014/06/25 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
医院护士工作检讨书
2014/10/26 职场文书
数学教师求职信范文
2015/03/20 职场文书
公司保密管理制度
2015/08/04 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis