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 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
js module大战
2019/04/19 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
python创建线程示例
2014/05/06 Python
python之wxPython应用实例
2014/09/28 Python
Python如何判断数独是否合法
2016/09/08 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
python使用matplotlib绘制热图
2018/11/07 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
python tkinter实现连连看游戏
2020/11/16 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
公司市场部岗位职责
2013/12/02 职场文书
TypeScript 内置高级类型编程示例
2022/09/23 Javascript