jQuery中$()函数的7种用法汇总
前言
jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中,形成了统一(也是惟一)的操作入口。
其中我们用的非常频繁的一个函数是$()或者说是jQuery(),当我们调用他的时候会根据传入的参数的不同而达到不同的效果。
接下来会一一说一下这7中用法,欢迎大家指正其中不正确的地方。
简要的说是:接收一个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></li>
<li></li>
<li></li>
<li></li>
<li></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对象。
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362
var obj={name:'谦龙'};
var $obj=$(obj);//封装成jQuery对象
//绑定自定义事件
$obj.on('say',function(){
console.log(this.name)//输出谦龙
});
$obj.trigger('say');
jQuery中$()函数的7种用法汇总的更多相关文章
- Jquery中toggleClass的两种用法
css样式: <style type="text/css"> .bgc{ background-color:#F00; color: #FFF} </style& ...
- PHP易混淆函数的区别及用法汇总
本文实例分析了PHP易混淆函数的区别及用法.分享给大家供大家参考.具体分析如下: 1.echo和print的区别PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.ech ...
- jQuery核心函数的四种不同用法
核心函数根据实参的不同,有四种不同的用法. ①传一个函数作为参数 例如:$(function(){}) 作用:和window.onload = function(){}类似,它会在文档加载完成之后运行 ...
- getline()函数的两种用法
getline()函数的输入流对象可以是标准输入流对象cin,也可以是一个文件输入流对象fin; (1)输入流对象的成员函数(有三个参数,一般除非需要自己选定停止符,并不推荐使用): basic_is ...
- PHP回调函数的几种用法
PHP回调函数的实现方法 目录 前言 全局函数的回调 类静态函数的回调 对象的方法的回调 PHP事件模型(观察者模式)的实现思路 前言 最近在开发一个PH ...
- jQuery添加自定义函数的三种方法
原文链接:http://caibaojian.com/284.html 方法一: jQuery.fn.setApDiv=function () { //apDiv浮动层显示位置居中控制 var whe ...
- javascript创建函数的20种方式汇总
http://www.jb51.net/article/68285.htm 工作中常常会创建一个函数来解决一些需求问题,以下是个人在工作中总结出来的创建函数20种方式,你知道多少? function ...
- JS函数的几种用法
1.正常使用:
- jquery 中toggle的2种用法
一.在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能 ...
随机推荐
- C#线程学习笔记十:async & await入门三
一.Task.Yield Task.Yield简单来说就是创建时就已经完成的Task,或者说执行时间为0的Task,或者说是空任务,也就是在创建时就将Task的IsCompeted值设置为0. 我们知 ...
- https的原理
https目的是为了防止第三方截获信息,原理是使用非对称加密和数字证书认证传输密钥建立连接,使用密钥对称加密信息进行通讯. https建立连接的过程: 数字证书原理:
- 第2章:C++泛型机制的基石:数据类型表——《C++泛型:STL原理和应用》读书笔记整理
第二章:C++泛型机制的基石--数据类型表 2.1 类模板的公有数据类型成员 2.1.1 类的数据类型成员 C++类中不仅可以定义数据成员和函数成员,而且还可以定义数据类型成员.在泛型设计中,类的 ...
- Linux.centos安装mysql5.7.18
一:删除已有的mysql步骤 1 卸载旧的mysql 1.1 查询有哪些mysql文件 [root@zookeeper init.d]# find / -name mysql /var/lock/su ...
- Jmeter脚本参数化和正则匹配
我们在做接口测试过程中,往往会遇到以下几种情况 每次发送请求,都需要更改参数值为未使用的参数值,比如手机号注册.动态时间等 上一个接口的请求体参数用于下一个接口的请求体参数 上一个接口的响应体参数用于 ...
- Azure 上的高可用概念
更多内容,添加公众号关注: 场景一: 某智能家居厂家,用户喊出“小X同学,帮我扫地”后,服务器宕机了,扫地机器人不能立即启动,于是,用户可能再连续喊几次后,无奈又习惯的按下了扫地机器人的启动按钮. 场 ...
- soapUI 之 测试文件上传 [6]
在接口测试中会遇到需要上传文件的操作,比如头像修改等.那么soapui是怎么实现这部分测试的呢.以下以文件上传接口为例. 一.获取文件上传接口 可以通过开发直接提供的接口文档,或者自己抓包获取接口信息 ...
- Checkedlistbox只能单选不能多选
private void Checkedlistbox_ItemCheck(object sender, ItemCheckEventArgs e) { ; i < chkCountry.Ite ...
- sklearn集成支持向量机svm.SVC参数说明
经常用到sklearn中的SVC函数,这里把文档中的参数翻译了一些,以备不时之需. 本身这个函数也是基于libsvm实现的,所以在参数设置上有很多相似的地方.(PS: libsvm中的二次规划问题的解 ...
- PHP 字符串大全
PHP字符串函数是核心的一部分.无需安装即可使用这些函数 函数名称 描述 addcslashes 以 C 语言风格使用反斜线转义字符串中的字符 addslashes 使用反斜线引用字符串 bin2he ...