jQuery 中 $( ) 函数的7种用法汇总

1 jQuery(selector,context)

简要的说是:接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。

默认情况下,对匹配元素的查找都是从根元素ducument对象开始,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找

html

<span>body span</span>
<span>body span</span>
<span>body span</span>
<div class="wrap">
    <span>wrap span</span>
    <span>wrap span</span>
    <span>wrap span</span>
</div>

js

$('span').css('background-color','red');//所有的span都会变红
$('span','.wrap').css('background-color','red');//只有.wrap中的span会变红

2 jQuery(html,ownerDocument) 、jQuery(html,props)

用所提供的html代码创建DOM元素对于jQuery(html,ownerDocument),参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象,如果不传入则默认为当前的文档对象。

//单标签  两种方式都可以往body中插入div
/*
 *   1  $('<div>').appendTo('body');
 *   2  $('<div></div>').appendTo('body');
 */
// 多标签嵌套
 $('<div><span>dfsg</span></div>').appendTo('body');

另外:对于单标签,jQuery(html,props),props是一个包含属性和事件的普通的对象,用法如下。

$('<div>我是div</div>',{
    title:'我是新的div',
    click:function(){
        $(this).css('color','red');
        console.log(this);
    }
}).appendTo('body');

3 jQuery(element or elementsArray)

如果传入一个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。

html

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

js

 // 传入DOM元素
 $('li').each(function(index,ele){
        $(ele).on('click',function(){
            $(this).css('background','red');//这里的DOM元素就是this
        })
})
//传入DOM数组
var aLi=document.getElementsByTagName('li');
    aLi=[].slice.call(aLi);//集合转数组
    var $aLi=$(aLi);
    $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象'

4 jQuery(object)

如果传入的是一个object对象,则把该对象封装到jQuery对象中并返回。

var obj={name:'谦龙'};
var $obj=$(obj);//封装成jQuery对象
//绑定自定义事件
$obj.on('say',function(){
    console.log(this.name)//输出谦龙
});
$obj.trigger('say');

5 jQuery(callback)

当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行

$(function(){
})
//以上代码和下面的效果是一样的
$(document).ready(function(){
    ...//代码
})

6 jQuery(jQuery object)

当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素

var aLi=$('li');
var copyLi=$(aLi);//创建一个aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);

7 jQuery()

如果不传入任何的参数,则返回一个空的jQuery对象,属性length为0注意这个功能可以用来复用jQuery对象,例如可以创建一个空的jQuery对象,然后在需要的时候先手动修改其中的元素,然后在调用jQuery方法。从而避免重复创建jQuery对象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,406评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,211评论 0 1
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,494评论 0 44
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 852评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,050评论 0 9