Fanbin168

JQuery +选择器 (你懂的)

<1>

在Jquery中对标签进行多样式设置的两种方式

    <script type="text/javascript">
        $(function () {

            $("#div1").css("background", "Yellow") //第一中设置方式 A

            $("#div2").css("background", "Blue").css("font-size", "20px") //第一中设置方式 B

            $("#div3").css({ "background": "Red", "font-size": "20px", "text-decoration": "underline" }) //第二种设置方式
                           
        })
    </script>

attr（）设置元素的属性值

$("#banner").attr({ //一次性设置4个属性
                src: "banner,gif",
                alt: "advertisenment",
                width: 720,
                height: 64
            });

parent()方法获取当前元素的父元素（注意：这里仅仅是找父元素，不是找父元素的父元素）

| jquery parent() parents() closest()区别

详情参考：jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<div>
  <div id="abc">中国</div>
</div>
</body>
</html>
<script>
//---------------parent()方法的作用为：获取当前元素的父元素
alert($("#abc").parent().text()) //获取id=abc的元素父元素的text内容这；这里输出：中国
alert($("#abc").parent().html()) //获取id=abc的元素父元素的html内容; 这里输出：<div id="abc">中国</div>
</script>

jquery中插入节点的方法，以及它们的区别append，appendTo与prepend，prependTo | after， insertAfter 与 Before，insertBefore

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">

        //append与prepend：是向【每个】匹配的元素内部追加内容。appendTo与prependTo：是把所有匹配的元素追加到【指定】的元素元素集合中 。这就是它们区别

        $(function () {
            $("#a1").click(function () {
                $("#div1").append("<span>你好</span>"); //将<span>你好</span>这个元素添加到 $("#div1")这个元素内部的后面去 即：给$("#div1")这个标签添加一个儿子   【注意：这里是将<span>你好</span>这个标签添加到$("#div1")标签内部的后面】
            })

            $("#a2").click(function () {
                $("#div1").prepend("<span>世界</span>");//将<span>世界</span> 这个元素添加到 $("#div1")这个元素内部的前面去 即：给$("#div1")这个标签添加一个儿子   【注意：这里是将<span>你好</span>这个标签添加到$("#div1")标签内部的前面】
            })

            $("#a3").click(function () {
                $("#div2").appendTo($("#div1")); //将$("#div2")这个标签添加到$("#div1")这个元素内部。【注：假如$("#div1")这个标签里面有2个元素，那么就将$("#div2")的这个标签添加到这2个元素的后面】 
            })

            $("#a4").click(function () {
                $("#div2").prependTo($("#div1")); //将$("#div2")这个标签添加到$("#div1")这个元素内部。【注：假如$("#div1")这个标签里面有2个元素，那么就将$("#div2")的这个标签添加到这2个元素的前面】
            })

            /*----------------------after与insertAfter的区别--------------------------------------------------- */

            //after()——其方法是将方法里面的参数添加到jquery对象后面去；如：A.after(B)的意思是将B放到A后面去；
            //insertAfter()——其实是将元素对调位置； 如：A.insertAfter(B);即将A元素调换到B元素后面；

            /*---------------------------------------------------------------------------------------------------*/

            $("#a5").click(function () {
                $("#div1").after("<span>中国</span>"); //将<span>中国</span>这个标签追加到$("#div1")元素的后面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")后面有多少兄弟，<span>中国</span>这个标签仅仅是添加到$("#div1")元素的后面，紧挨着的）
            })

            $("#a6").click(function () {
                $("#div1").before("<span>德国</span>"); //将<span>德国</span>这个标签追加到$("#div1")元素的前面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")前面有多少兄弟，<span>德国</span>这个标签仅仅是添加到$("#div1")元素的前面，紧挨着的）
            })


            $("#a7").click(function () {
                $("<span>英国</span>").insertAfter($("#div1")); //将<span>英国</span>这个标签添加到$("#div1")元素的后面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")后面有多少兄弟，<span>英国</span>这个标签仅仅是添加到$("#div1")元素的后面，紧挨着的）
            })
           
            $("#a8").click(function () {
                $("<span>日本鬼子</span>").insertBefore($("#div1")); //将<span>日本鬼子</span>这个标签添加到$("#div1")元素的前面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")前面有多少兄弟，<span>日本鬼子</span>这个标签仅仅是添加到$("#div1")元素的前面，紧挨着的）
            })
        });
    </script>
</head>
<body>
    <div>
        <div id="div1"><span>海南</span></div>
        <div id="div2">我是div2</div>
        <br />
        <button id="a1">提交1</button> <button id="a2">提交2</button> <button id="a3">提交3</button><button id="a4">提交4</button>
        <button id="a5">提交5</button><button id="a6">提交6</button>

        <button id="a7">提交7</button><button id="a8">提交8</button>

    </div>
</body>
</html>

children()获取下级元素 find()获取所有下级元素 filter()筛选具有某些属性和包含某些文字的标签 has()包含标签 contains()包含文本

contains的用法及find()与filter()的区别

$('div').filter('.div1');//选择div标签中class属性为div1的div元素

$('div').find('em');//选择div标签中的em标签的元素

filter()是根据括号中的属性来进行筛选比如：$("div").filter("p") 这样是不允许的。filter括号里只一些属性，或者包含什么的，不能是一个元素，例如"p"

而find()是获取某些元素。

<pre class="javascript" name="code"><html>
<head>
    <script src="jquery-2.1.3.js"></script>
</head>
<body>
    <div class="css"> <p class="rain">测试1</p> </div>
    <div class="rain"> <p>测试2</p> </div>

    <ul>
        <li>中国</li>
        <li>美国</li>
        <li>德国</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    $(function () {
        //find()会在div元素内 寻找 class为rain 的元素。
        var a = $("div").find(".rain");  //相当于 var a= $("div[class=rain]");
        alert(a.length); //打印出：1

        var b = $("div").find("p"); //相当于 var b=$("div p");

        var c = $("div").children("p") //相当于 var c=$("div > p")
        

        



        //在li元素集合中筛选出包含"中国"，或者包含"美国"的a元素，并计算这样的a有几个。
        var li_Count = $("li").filter(":contains(中国),:contains(美国)").length;

        alert(li_Count) //打印出：2

        var li_Value = $("li").filter(":contains(中国),:contains(美国)").text();

        alert(li_Value); //打印出：中国美国

        //find()会在div元素内 寻找 class为rain 的元素。
        $("div").filter(".css").css("color", "red");  //相当于 $("div[class=css]").css("color", "red");
    })
</script>

<pre class="javascript" name="code"><html>
<head>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
    <ul class="level-1">
        <li class="item-i">I</li>
        <li class="item-ii">
            II

            <ul class="level-2">
                <li class="item-a">A</li>
                <li class="item-b">
                    B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                        <li id="abc">4</li>
                    </ul>
                </li>
                <li class="item-c">C</li>
            </ul>
        </li>
        <li class="item-iii">III</li>
    </ul>
     

    <div class="css">
        <p class="rain">测试1</p>
    </div>
    <div class="rain">
        <p>测试2</p>
    </div>
</body>
</html>
<script type="text/javascript">
    //----------------------------------------------children()获得选中元素的一下级的子元素

    //children及find方法都用是用来获得element的子elements的，但children方法获得的仅仅是元素一下级的子元素，而find方法获是得所有下级元素

    $("ul.level-1").children().css('border', '1px solid green');//取得匹配元素的子元素集合,只考虑子元素不考虑后代元素;

    //相当于 

    $("ul.level-1 > li").css('border', '1px solid green');

    
    
    //----------------------------------------------find() --获取选中元素的所有下级元素 :(指定的对象集合下进行查找)

    //将ul 标签下calss属性值level-3的标签的背景颜色设为红色【即:获取ul标签的所有后代，根据find()方法括号里面的参数(选择器)来过滤，即根据find()方法括号里的选择器来取我们需要的元素】
    $("ul").find(".level-3").css("background", "red");

    $("ul").find(".item-2").css("color", "red"); //将ul 标签下面class属性值为item-2的标签的字体颜色设为红色 ; 所以这条语句等价于下面的这条语句

    $("ul .item-2").css("color", "red"); //将ul 标签下面class属性值为item-2的标签的字体颜色设为红色 （注意ul与.之前有一个空格，如果去掉那个空格意思就变成了 将class属性值为item-2的ul标签的字体颜色设置为红色了）


    //----------------------------------------------filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤)


    $("li").filter(".item-1") //获取class属性值为item-1的li元素

    $("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色

    $("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ，同时获取id属性值为abc的所有li标签

    $("p").filter(".selected, :first");//获取class属性值为selected的所有P标签，同时获取第一个P标签


    //----------------------------------------------has() --获取标签里包含了某些标签的标签  (has是判断标签的)


    $("div").has("p") //获取div标签中包含了p标签的div标签

    $("div").has("p").length; //获取 div标签里包含p标签的的长度。即：div标签里面包含了p标签的div的个数，即：像这样的div有几个。其实它就是获取div的个数， 如果这个打印一下的话，打印结果为 2

    $("div").has("p").text()//获取div标签中包含了p标签的div的text值  //打印一下，结果为“测试1 测试2”


    //----------------------------------------------:contains() --获取标签里包含了某些文字的标签  (contains是判断文本的)

    //jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于：has是判断标签的 contains是判断文本的

    $("div p:contains('测试')").text(); //获取div标签下包含“测试”的p标签的text值  //打印一下，结果为“测试1 测试2”

    //alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数”

</script>

wrap() wrapAll() wrapInner() 包裹 | unwrap()清除父级元素（清除包裹）

<html>
<head>   
    <title>Wrap</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
    <span id="s1">我是S1</span>
    <div><span id="s2">我是S2</span></div>
    <p><span id="s3">我是S3</span></p>
    
</body>
</html>
<script type="text/javascript">

    $("span").wrap("<div></div>"); //将每个span标签都用div标签包裹起来

    $("span").wrapAll("<div></div>");//将所有的span标签用一个div标签包裹起来  注: 如果使用wrapAll后 会将<span>标签从原本包裹它的<p>标签中移出后再用<div>标签将它包裹起来

    //例：<p><span id="s3">我是S3</span></p> 使用了$("span").wrapAll("<div></div>") 后 就变成了 <div><span>我是S3</span></div> <p></p>

    $("span").wrapInner("<div></div>"); //将span元素的text内容用div标签包裹上。例：<span>abc</span>  使用$("span").wrapInner("<div></div>")后，就变成了<span><div>abc</div></span>

    $("span").unwrap(); // 清除所有<span>标签的父元素,父元素为body时除外。  unwrap() 方法用于删除被选元素的父元素。
</script>

contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点

contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容