JQuery Tips(2) 关于$()包装集你不知道的


Posted in Javascript onDecember 14, 2009

我想这个理解起来很简单,被$()包装的JQuery对象总是以集合的形式出现.就算包装集中只有一个对象.

<div id="a"></div> 
<div id="b"></div> 
<script type="text/javascript"> 
$("div").html("hi"); </script>

上面被选择的两个DIV的内容都会被改变为”hi”
包装集内元素的顺序
在被JQuery包装的元素中,包装集中所包含的内部顺序是按照HTML流从先向后排列的,而不是选择顺序:
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Se = $("#b,#a"); 
alert(Se.get(0).innerHTML); 
alert(Se.get(1).innerHTML); </script>

上面代码可以看到,虽然是b先被选择,但是在执行alert的时候会先弹出”here is a”继而是“here is b”
JQuery对象和DOM的转化
首先,是DOM转化成JQuery对象,这个很容易,只需包含在$()里面即可.但有一点注意的是,再被JQuery包装的元素的事件内,this总是指向当前对象:
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
$("div").click(function() { 
alert(this.id);//this Ö¸Ïòµ±Ç°µÄDOM 
}); </script>

将JQuery包装集中的元素转为DOM对于JQuery来说也是很简单的事,大多数情况都使用JQuery的get方法
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Jq = $("div"); 
alert(Jq.get(0).id); //alert "a" 
alert(Jq.get()[0].id); //alert "a" as well 
alert(Jq[0].id);//alert "a" 
</script>

从面可以看出,通过get方法加索引作为参数,会返回索引值的DOM对象,而不加参数会返回JQuery包装集中的整个数组
还有一种简便方法是直接在JQuery包装集后面加数组符号,可以把上面的Jq[0]看做Jq.get(0)的简便方式:-)
检查当前JQuery包装集中的元素个数
在很多时候,需要检查在JQuery包装集中的元素个数,我们可以直接通过包装集的length属性(这个属性在VS当中是不提示的)
div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Jq = $("div"); 
alert($("Div").length);//alert "2" 
</script>

这个属性还可以直接用于检测当前的包装集是否为空
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
if ($("div").length) { 
alert("Not Empty"); 
} 
if ($("div").get(0)) { 
alert("Not Empty"); 
} 
</script>

上面两个alert都会被执行,第二个方式通过检测当前包装集中第一个元素是否为空来确定包装集为空.
包装集在某些特定情况下也“不总是面向集合”
刚才不是号称总是面向集合吗,咋又变了?其实的确是面向集合,但在使用JQuery的某些方法进行提取时,就不是这样了,比如下面代码:
<div id="a" >here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
alert($("div").attr("id")); 
</script>

上面代码只会alert第一个div的id.那在这种情况下咋办呢?对,用JQuery的Each方法,each方法会遍历包装集中的每一个元素:
<div id="a" >here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
$("div").each(function() { 
alert($(this).attr("id")); 
}); 
</script>

上面代码会执行两个alert:-)
Javascript 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 #Javascript
JQuery下关于$.Ready()的分析
Dec 13 #Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 #Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 #Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 #Javascript
页面中iframe相互传值传参
Dec 13 #Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 #Javascript
You might like
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
python中循环语句while用法实例
2015/05/16 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
python 调试冷知识(小结)
2019/11/11 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
大学生就业自荐信
2013/10/26 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
护理专业自我鉴定
2014/01/30 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
大型营销活动计划书
2014/04/28 职场文书
2015年仓库工作总结
2015/04/09 职场文书
服装店员工管理制度
2015/08/07 职场文书
小学英语教学随笔
2015/08/14 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
python 中yaml文件用法大全
2021/07/04 Python