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+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
让焦点自动跳转
2006/07/01 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Python 学习笔记
2008/12/27 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
公务员培训自我鉴定
2014/02/01 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
保险公司演讲稿
2014/09/02 职场文书
先进党组织事迹材料
2014/12/26 职场文书
员工辞职信范文
2015/03/02 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
限期整改通知书
2015/04/22 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书