脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery构建函数的方法

jQuery学习笔记之jQuery构建函数的7种方法

 更新时间：2014年06月03日 09:28:14   作者：  
jQuery把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口，这为jQuery操作降低了门槛。那我们来看下具体构造函数的“七种武器”吧。

一:$(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对象.

您可能感兴趣的文章:

相关文章

  • jquery默认校验规则整理

    jquery默认校验规则整理

    这篇文章主要介绍了jquery默认校验规则有哪些,需要的朋友可以参考下
    2014-03-03
  • 如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙

    如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙

    在上一篇文章《如何确保JavaScript的执行顺序 - 之jQuery.html深度分析》中，我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行，其秘密在于 – 同步AJAX获取外部JavaScript。
    2011-03-03
  • jQuery实现仿美橙互联两级导航菜单的方法

    jQuery实现仿美橙互联两级导航菜单的方法

    这篇文章主要介绍了jQuery实现仿美橙互联两级导航菜单的方法,实例分析了jQuery操作css及setTimeout等实现导航菜单的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery的幻灯片图片切换效果代码分享

    jquery的幻灯片图片切换效果代码分享

    这篇文章主要介绍了jquery的幻灯片图片切换效果，幻灯片图片切换效果特别适合做产品演示，感兴趣 的小伙伴可以参考下。
    2015-09-09
  • jquery struts 验证唯一标识(公用方法)

    jquery struts 验证唯一标识(公用方法)

    本教程将为大家详细介绍下使用公用方法验证jquery struts唯一标识，感兴趣的朋友可以参考下哈，希望可以帮助到你
    2013-03-03
  • jQuery Ajax文件上传(php)

    jQuery Ajax文件上传(php)

    今我在网上找了好久哟。。。才找到JQUERY方式的异步文件上传，赶紧记了下来。
    2009-06-06
  • 分享五个有用的jquery小技巧

    分享五个有用的jquery小技巧

    作为轻量级的JS库，jQuery随着JavaScrīpt脚本的大热而备受Web开发者亲睐。本文给大家分享五个有用的jquery小技巧，需要的朋友可以参考下
    2015-10-10
  • jquery延迟对象解析

    jquery延迟对象解析

    第一次认识jquery延迟对象，这篇文章主要为大家详细解析JQ延迟对象的相关概念,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 基于jQuery的简单的列表导航菜单

    基于jQuery的简单的列表导航菜单

    最近一段时间准备开始学习JQUERY,感觉JQUERY的功能非常强大,而且代码量也减少了许多....代码也非常的清晰!
    2011-03-03
  • jQuery中:hidden选择器用法实例

    jQuery中:hidden选择器用法实例

    这篇文章主要介绍了jQuery中:hidden选择器用法,以实例形式较为详细的分析了:hidden选择器的功能、定义及设置匹配元素不可见时的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12

最新评论