码迷,mamicode.com
首页 > Web开发 > 详细

JQuery-文档处理&选择器

时间:2016-04-21 22:00:57      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

<body>

        <div id="textDiv">...</div>
        <p>第一段..</p>
        <b>第二段..</b>
        <div id="mass">
            <span class="myspan">AAAAAAAAA</span>
            <div id="content">12345678906785.</div>
        </div>
       
    </body>

 

       /*    五丶文档处理        */
//        $(‘#textDiv‘).append(‘<b>--append--</b>‘);           
//        <div id="textDiv">...<b>--append--</b></div>

//        $(‘<b>--append--</b>‘).appendTo( $(‘#textDiv‘) );   
//        <div id="textDiv">...<b>--append--</b></div>
       
//        $(‘#textDiv‘).prepend(‘<b>--append--</b>‘);           
//        <div id="textDiv"><b>--append--</b>...</div>

//        $(‘<b>--append--</b>‘).prependTo( $(‘#textDiv‘) );   
//        <div id="textDiv"><b>--append--</b>...</div>
       
//        $(‘#textDiv‘).after( ‘<b>--append--</b>‘ );           
//        <div id="textDiv">...</div> <b>--append--</b>

//        $(‘#textDiv‘).before( ‘<b>--append--</b>‘ );       
//        <b>--append--</b> <div id="textDiv">...</div>
       
//        $(‘#textDiv‘).wrap(‘<span></span>‘)                   
//        <span><div id="textDiv">...</div></span>

//        $(‘#textDiv‘).unwrap(‘<span></span>‘)               
//        <div id="textDiv">...</div>
       
//        $(‘#textDiv‘).wrapInner(‘<span></span>‘)           
//        <div id="textDiv"><span>...</span></div>
       
//        $(‘p‘).replaceWith(‘<b>替换后第一段</b>‘)           
//        <p>第一段..</p>---><b>替换后第一段</b>

//        $(‘<b>替换的b1</b>‘).replaceAll(‘p‘)                   
//        <p>第一段..</p>---><b>替换的b1</b>
       
//        $(‘#mass‘).empty()                                   
//        <div id="mass"></div>    清空内部所有内容

//        $(‘span‘).remove(‘.myspan‘);                       
//        移除class为.myspan的span, 该span绑定的事件被移除

//        $(‘span‘).detach(‘.myspan‘);                       
//        移除class为.myspan的span, 该span绑定的事件被保留
       
        /*    1.基本选择器        */
        //console.log(    $("#id_1").css({"width":"500px","height":‘100px‘,‘background‘:"red"})                    );
       
//        console.log(    $(".class_1")                );
//        console.log(    $("span")                    );
//        console.log(    $("#id_1,.class_1,span")    );    //    div#id_1, div.class_1, span, span, span
//       
//        console.log(    $("div").length                );    //    12
//       
//        /*    2.层次选择器        */
//        console.log(    $("#id_2 div")                );    //    4    #id_2(子孙)元素里所有div
//        console.log(    $("#id_2 > span")            );    //    1    #id_2(孩子)元素里所有span
//        console.log(    $(".class_1 ~ span")        );    //    1    .class_1之后所有span(兄弟)元素
//        console.log(    $("#id_2_1 + div")            );    //    1    div#id_2_2紧邻的(兄弟)div
//       
//        /*    4.内容过滤选择器        */
//        console.log(    $("div:contains(‘哈哈哈‘)")    );    //    2    获取文本含有"哈哈哈"的div元素,(子孙)元素包含也算    div#id_2 div#id_2_3
//        console.log(    $("div:empty")                );    //    5    获取内容为空的div元素,(注意折行算有内容)       
//        console.log(    $("div:has(span)")            );    //    3    div#id_2, div#id_2_1, div#id_2_1_1    获取包含span的div元素,祖先元素也算
//        console.log(    $("div:parent")                );    //    8    获取有子元素的div,文本内容也算       
//       
//        /*    5.可见性过滤选择器        */
//        console.log(    $("div:hidden")                );    //    1    #id_3    获取display: none的元素
//        console.log(    $("div:visible")            );    //    11    获取所有可视的div元素
//       
//        /*    6.属性过滤选择器        */
//        console.log(    $("div[id]")  );    //    11    获取拥有id属性的div元素       
//        console.log(    $("div[id=id_3]")  );    //    1    获取id属性等于id_3的div元素       
//        console.log(    $("div[id!=id_3]")  );    //    11    获取id属性不等于id_3的div元素           
//        console.log(    $("div[id^=id]")  );    //    10    获取id属性以id开头的div元素           
//        console.log(    $("div[id$=1]")  );    //    3    div#id_1, div#id_2_1, div#id_2_1_1    获取id属性以1结尾的div元素           
//        console.log(    $("div[id*=2]")  );    //    8    获取id属性含有2的div元素       
//        console.log(    $("div[id|=id]")  );    //    1    div#id-2    获取id属性是id或者以id-开头的div元素       
//        console.log(    $(‘div[id~="2"]‘)  );    //    1    div#id 2    获取id属性空格分隔的字符中有2的div元素
//       
//        /*    7.子元素过滤选择器    */
//        console.log(    $("#id_2 :first-child")    );    //    3    获取id=id_2的div的子元素               
//        console.log(    $("#id_2 :last-child")    );    //    3    获取id=id_2的div的子元素               
//        console.log(    $("#id_2 :nth-child(1)")    );    //    3    获取id=id_2的div的子元素            

JQuery-文档处理&选择器

标签:

原文地址:http://www.cnblogs.com/nemoro1928/p/5418621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!