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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
广告代码静态化js通用函数
May 09 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
javascript实现日期按月份加减
May 15 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 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连接被重置的解决方法
2011/02/15 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
xml转json的js代码
2012/08/28 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Python的另外几种语言实现
2015/01/29 Python
python连接MySQL数据库实例分析
2015/05/12 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
员工安全生产责任书
2014/07/22 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
店面出租协议书范本
2014/11/28 职场文书
天坛导游词
2015/02/02 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
唐山大地震的观后感
2015/06/05 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书