jQuery DOM操作例

7150 ワード
jquery dom操作
印象を深めましょう。jQueryはとても使いやすいとみんな知っています。JAvascriptコードを簡略化していますので、もっと重要なのは基本的にすべてのブラウザに対応しています。ウェブページの開発が一番頭が痛いのはこれです。だからjQueryもコード農家に好かれています。でも、まず覚えておいてからもっと上手に使えますよね。時間が経つと、無駄な属性方法も忘れてしまいます。以下はjQueryのDOM操作方法の属性の詳細な解説です。見てみて印象を深めてください。
例は醜機能がそろっていますが。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            /*color: purple;*/
        }
        .a{
            color:red;
        }
        .b {
            color:purple;
        }
    </style>
    <script src="script/jquery-1.4.1.js"></script>
</head>
<body>
    <p id="div">class</p>
    <div id="all" class="a" >all
    <input type="text" value="text" name="text" id="text"/>
        <p id="p">p</p>
        <ul id="ul">
            <li id="a">  </li>
            <li id="b">  </li>
            <li id="c">  </li>
        </ul>
        <div id="d">
            <p>  </p>
        </div>
        <input type="button" value="      " id="over" />
    </div>
    <script type="text/javascript">
        $().ready(function () {
            var p = $("#p");
            //alert(p.attr("id"));//attr("   ")    ，attr("   ","   ")    
            //p.attr("title","title");//    
            //p.removeAttr("id");//              
            //$("#all").attr("class", "class");//  class  ，            class  (class='class')
            //$("#all").addClass("class");//  class  ，    class        class(class='all class')    class        (  color),         
            //$("#all").removeClass("all");//     class  
            //$("#all").removeClass();//  class     class  
            //$("#all").toggle(//    
            //    function () {
            //        $(this).css("color","red");
            //},  function () {
            //    $(this).css("color","purple");
            //});
            //$("#div").click(function () { $("#all").toggle();});//             
            //$("#all").click(function () { $("#div").text("class   ："+$("#all").attr("class"));});
            //$("#all").click(function () {
            //    $("#all").toggleClass("b")
            //});
            //alert($("#all").hasClass("all"));//      class  
            //alert($("#all").is(".all"));//    

            //alert($("#all").html());//   InnerHTML  
            //$("#all").html("    ");
            //alert($("#all").text());//         
            //$("#all").text("    ");
            //alert($("[name='text']:eq(0)").val());//   value  (val("     "))


            var newP = $("<p id='newP'>newP</p>");//    ，        (<p/>)  /
            //p.append(newP);//     p    (<p id='p'>p<p id='newP'>newP</p></p>)
            //newP.appendTo(p);// newP   p    
            //p.prepend(newP);//     p    (<p id='p'><p id='newP'>newP</p>p</p>)
            //newP.prependTo(p);// newp   p    


            //p.after(newP);//     p     (<p id='p'>p</p><p id='newP'>newP</p>)
            //newP.insertAfter(p);// newP   p     
            //p.before(newP);//   p     
            //newP.insertBefore(p);// newP   p    
            //                 
            var a = $("#a");
            var c = $("#c");
            //c.insertBefore(a);// c(  )     a(  )     
            //a.remove();//    (            )
            //a.remove();
            //c.after(a);//         
            //$("ul>li").remove("li[id='a']");//          
            //a.empty();//         
            //a.clone().insertAfter(c);//      a(  )   c(  )   


            //$("#d").replaceWith("<span>span</span>");// id #d                     
            //$("<span>span</span>").replaceAll("#d");//  ,      


            //$("#ul").wrap("<b></b>");// id #ul    <b>      (       ul           ul    <b>    )
            //$("#ul").wrapAll("<b></b>");// id #ul    <b>      (       ul            ul   <b>    )
            //$("#ul").wrapInner("<b></b>")//             <b>      


            //alert($("#ul").children().length);//        (next()          ，prev()         ，siblings()         )
            //$("#ul").closest("ul").css("color","red");//           ，              ,     
            //alert($("#ul").css("height"));//css          auto，   px， css     ，  height()                 ，   px，width    


            //offset()  
            var ul = $("#ul").offset();
            //alert(ul.left);//           (top)
            //position()  
            var ul = $("#ul").position();
            //alert(ul.left);//          
            //$("#ul").scrollTop()  $("#ul").scrollLeft()                 
            //$("#ul").scrollTop(300)  $("#ul").scrollLeft(300)                 
            //alert(("aabaa").slice(-2));//slice()        ，2             
            $("#over").mouseover(function (e) {
                var tool = $("<div id='tool'>     </div>");
                $("body").append(tool);
                tool.css("position", "absolute").css("top", e.pageY+"px").css("left", e.pageX + "px");
                //tool.css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show();
                //alert(e.pageX+" "+e.pageY);
            }).mouseout(function () {
                $("#tool").remove();
            });
        });
    </script>
</body>
</html>
7つのJS基礎知識まとめ
phpはarray_を使用しますchunk関数は、1つの配列を複数の配列に分割します。