Jquery重新学习之四[核心属性与文档处理属性]

1:核心.each(callback),size(),length(),get([index])

1.1 .each(callback)通过它可以遍历对象、数组的属性值并进行处理

    <form id="form1" runat="server">
     <img/><img/>
    </form>

    <script type="text/javascript">
        $(function () {
            $("img").each(function (i) {
                this.src = "test" + i + ".jpg";
            });
        })
    </script>

$(document).ready(function () {
    var members = ["张三", "李四", "王老五", "赵老六", "王二麻子"];
    var ol = $("ol");
    $.each(members, function (index, item) {
        ol.append("<li>" + item + "</li>");
    })
});

1.2 .size()当前匹配的元素个数

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").size();-->显示为：2

1.3 .length()同样是返回元素个数

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").length;-->显示为：2

1.4 .get([index])取得其中一个匹配的元素,没有参数时则取得所有匹配的 DOM 元素集合。有参数时取得第 index 个位置上的元素。$(this).get(0)与$(this)[0]等价

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").get(0);-->获得dom无素： <img src="test1.jpg"/>

2：文档处理.append(content|fn)与appendTo(content),prepend(content|fn)与prependTo(content)

2.1 .append(content) 参数content向每个匹配的元素内部追加内容，而content则是要追加到目标中的内容[$(A).append(B): 将B追加到A中]；

    <div id="My_Div"></div>

    <script type="text/javascript">
        $(function () {
        $("#My_Div").append("<span style='color:red'>踏浪帅</span>")
        })
    </script>

2.2 .append(fn) 参数function(index, html)返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这
个对象原先的html值。

     <div></div>
     <div></div>

    <script type="text/javascript">
        $(function () {
            $("div").append(function (index) {
                return "<span style='color:red'>踏浪帅" + index + "</span>";
            });
        })
    </script>

2.3 .appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中,参数content用于被追加的内容;[$(A).append(B): 将A追加到B中]

<p>I would like to say: </p>
<div></div><div></div>

$("p").appendTo("div");

结果:

<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

2.5 .prepend(content) 向每个匹配的元素内部前置内容,参数要插入到目标元素内部前端的内容

<p>I would like to say: </p>

$("p").prepend("<b>Hello</b>");--><p><b>Hello</b>I would like to say: </p> 

2.6 .prepend(fn) 参数function(index, html)返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值

     <div></div>
     <div></div>

    <script type="text/javascript">
        $(function () {
            $("div").prepend(function (index) {
                return "<span style='color:red'>踏浪帅" + index + "</span>";
            });
        })
    </script>

2.7 .prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中

<p>I would like to say: </p><div id="foo"></div>

$("p").prependTo("#foo");

结果:<div id="foo"><p>I would like to say: </p></div>

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；