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插件 selectToSelect使用方法

    jQuery插件 selectToSelect使用方法

    最近做一个报表页面显示位置配置的界面,刚开始时用的是多个checkbox,选择其中需要的报表即可。后来随着业务变复杂,需要使用两个select,选择其中需要的到右边select,然后提交到数据库
    2013-10-10
  • 基于jQuery的ajax功能实现web service的json转化

    基于jQuery的ajax功能实现web service的json转化

    前面文章说过下次会给大家介绍详细的基于web Services的JqueryAjax调用如何把一个datatable得数据转化成JSON数据,然后在客户端再通过json2.js转化成javascript对象。
    2009-08-08
  • jQuery ajax cache缓存问题

    jQuery ajax cache缓存问题

    在jquery里面, 大部分的时候, 属性要用''引起来。否则容易变成变量名。比如red, 引不引都差不多。但是引起来也可以认。 所以习惯就全部引起来好了。
    2010-07-07
  • jQuery动态设置form表单的enctype值(实现代码)

    jQuery动态设置form表单的enctype值(实现代码)

    本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • jquery的幻灯片图片切换效果代码分享

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

    这篇文章主要介绍了jquery的幻灯片图片切换效果,幻灯片图片切换效果特别适合做产品演示,感兴趣 的小伙伴可以参考下。
    2015-09-09
  • 基于jQuery实现淡入淡出效果轮播图

    基于jQuery实现淡入淡出效果轮播图

    这篇文章主要为大家详细介绍了基于jQuery淡入淡出效果轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 跟着JQuery API学Jquery 之二 属性

    跟着JQuery API学Jquery 之二 属性

    在选择器的API学习中,走马观花的把选择器过了一遍,但是选择归选择,选择出来了没干什么事,也没有什么用嘛
    2010-04-04
  • jquery层级选择器(匹配父元素下的子元素实现代码)

    jquery层级选择器(匹配父元素下的子元素实现代码)

    下面小编就为大家带来一篇jquery层级选择器(匹配父元素下的子元素实现代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    本篇文章主要是对Jquery EasyUI中弹出确认对话框以及加载效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery EasyUI开发技巧总结

    jQuery EasyUI开发技巧总结

    这篇文章主要介绍了jQuery EasyUI开发技巧总结的相关资料,希望通过本文大家能够掌握EasyUI的开发技巧,需要的朋友可以参考下
    2017-09-09

最新评论