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 document.images实例
May 27 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
总结js函数相关知识点
Feb 27 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
react PropTypes校验传递的值操作示例
Apr 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
经典商业广告词
2014/03/13 职场文书
监督检查工作方案
2014/05/28 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
产品质量保证书范本
2015/02/27 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
社区文明倡议书
2015/04/28 职场文书
放牛班的春天观后感
2015/06/01 职场文书
技能培训通讯稿
2015/07/18 职场文书
关于五一放假的通知
2015/08/18 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript