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的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
package.json配置文件构成详解
Aug 27 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
JS实现导航栏楼层特效
Jan 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
php实现mysql数据库备份类
2008/03/20 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
施工单位工程部经理岗位职责
2015/04/09 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
z-index不起作用
2021/03/31 HTML / CSS
jQuery实现影院选座订座效果
2021/04/13 jQuery
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Mysql Online DDL的使用详解
2021/05/20 MySQL
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫