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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
为原生js Array增加each方法
Apr 07 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 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的安全
2006/10/09 PHP
php发送post请求的三种方法
2014/02/11 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
angular.bind使用心得
2015/10/26 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
常用python编程模板汇总
2016/02/12 Python
Python3 中文文件读写方法
2018/01/23 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
python反编译学习之字节码详解
2019/05/19 Python
简单分析python的类变量、实例变量
2019/08/23 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python如何构建mock接口服务
2021/01/28 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
合作意向书模板
2014/03/31 职场文书
师德师风自我评价范文
2014/09/11 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
放牛班的春天观后感
2015/06/01 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python