加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

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

发布时间:2018-08-19 19:51:36 所属栏目:业界 来源:站长网
导读:包装集老是面向荟萃的 我想这个领略起来很简朴,被$()包装的JQuery工具老是以荟萃的情势呈现.就算包装齐集只有一个工具. div id=a/div div id=b/div script type=text/javascript $(div).html(hi); /script 上面被选择的两个DIV的内容城市被改变为hi 包装

包装集老是面向荟萃的
我想这个领略起来很简朴,被$()包装的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:-)

转自:http://www.cnblogs.com/CareySon/

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读