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

2016-02-19 14:35 3 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JQuery Tips(2) 关于$()包装集你不知道的,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

我想这个理解起来很简单,被$()包装的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:-)

来源:https://www.tulaoshi.com/n/20160219/1607287.html

延伸阅读
夏天天气炎热,常见的解暑方法就是喝冰镇饮料或者捧着一个大西瓜,那种凉爽确实别有一番风味,但是,约上三五好友,品着一壶茶水,在这快节奏的社会,让自己的心也能够静下来,未尝不是一件幸事,更何况,喝茶比喝饮料还有益,其中还有不少好处呢。 一、时令下的茶最宜人 茶道始于中国,中国人对于茶的喜爱,是其它国家无法...
1、雪肌精化妆水含酒精吗 雪肌精化妆水确实含有酒精,所以对酒精过敏的人群要慎用。很多朋友反映使用雪肌精化妆水时闻到很浓的酒精味,就是因为雪肌精化妆水中含有乙醇成分,在成分表里排第二,乙醇俗称酒精,是水以外唯一被允许使用在化妆品中的溶剂,常出现于化妆水中。酒精的风险成分比较低,但还是有致敏的可能性,所以大家...
标签: 月经 女人养生
私密手册:关于月经你不知道的三个秘密 关于老朋友,我们是不是了解的很全面?这些现象,你是否清楚? 代偿性月经(倒经) 月经期除子宫有周期性出血外,在身体其他部位也有少量的出血,也是有周期性的,称为代偿性月经。常常发生在鼻腔、直肠(便血)、口腔出血。 发生原因是因为鼻粘膜与女性生殖器官...
标签: 营养价值
料酒是人们烹调过程中常用的一种调味品,很多人在做菜的时候都喜欢放上一点料酒。因为它不但能去腥解腻,还可以激发出食物的香味,使食物变得美味可口。那么你知道料酒酒的由来吗?知道料酒该如何使用吗?下面就让图老师小编带你领略不一样的料酒文化吧! 料酒是什么 料酒是一种烹调用酒,一般是以黄酒为原料,再加入其他香料和...
标签: 怀孕
避孕很多人都知道,但是都知道的并不详细。今天小编给大家介绍一下避孕中7个知之不全的事实,这7个秘密也许会影响到你一生哦! 秘密1:体重在起作用 介于18-39岁年龄段的女性,如果体重等于或大于58公斤,口服避孕药有60%可能失败,尤其是雌性激素指标偏低者。体重过高的女性新陈代谢较快,需要更多的荷尔蒙以防止受孕。而且,避孕...

经验教程

619

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部