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 ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
python 提取文件的小程序
2009/07/29 Python
python循环监控远程端口的方法
2015/03/14 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python flask实现分页的示例代码
2018/08/02 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
函数指针的定义是什么
2016/08/14 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
小学生自我评价范文
2014/01/25 职场文书
市场专员岗位职责
2014/02/14 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
经典团队口号
2014/06/06 职场文书
2014年组织部工作总结
2014/11/14 职场文书
教师节随笔
2015/08/15 职场文书
Python 如何安装Selenium
2021/05/06 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android