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 相关文章推荐
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
详解JavaScript之Array.reduce源码解读
Nov 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
杏林同学录(九)
2006/10/09 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
python 性能优化方法小结
2017/03/31 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python3.6实现学生信息管理系统
2019/02/21 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
成品仓管员工作职责
2013/12/29 职场文书
讲党性心得体会
2014/09/03 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
同学聚会通知短信
2015/04/20 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
解析Java异步之call future
2021/06/14 Java/Android