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封装的对话框简单实现
Jul 21 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Angular 容器部署的方法
Apr 17 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
你准备好迎接vue3.0了吗
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
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python Requests库基本用法示例
2018/08/20 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python 监控logcat关键字功能
2020/09/04 Python
pandas针对excel处理的实现
2021/01/15 Python
室内趣味活动方案
2014/08/24 职场文书
2014年招生工作总结
2014/11/26 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书