jquery的dom操作

jquery的dom操作

jquery的强项在于对DOM的操作，在一定程度上大大简化了js的编写，它可以分为xml dom、html dom和css dom，下面简单的代码段演示一些基本的操作，属性样式的改变以及对结点的各种操作。

【1】样式属性

l        增删换判样式/属性

//给id 为first的元素添加 .one 样式

$('#b1').click(

       function(){

              $('#first').attr("class","one"); 

       }

);

//追加样式: addClass()

$('#b2').click(

       function(){

              $('#first').addClass("one");    

       }

);

//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class

$('#b3').click(

       function(){

              $('#first').removeClass("one");     

       }

);

//切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它

$('#b4').click(

       function(){

              $('#first').toggleClass("one");

       }

);

//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

$('#b5').click(

       function(){

              window.alert($('#first').hasClass("one"));    

       }

);

【2】结点操作

l        内部插入/外部插入结点

//添加重庆li到上海下（使用dom的传统方法）

function test1(){

       varmyli=document.createElement("li");

       myli.setAttribute("id","cq");

       myli.setAttribute("name","chongqing");

       myli.innerHTML="重庆";

       document.getElementById("city").appendChild(myli);

}

//添加重庆li到 上海下面

$('#b1').click(

       function(){

              //方法一：一步到位法

              $myli=("<liid='cq' name='chongqing'>重庆</li>");

              //先使用内部最后插入

              //$('#city').append($myli);

              //如果使用appendTo则应该这样写

              //$myli.prependTo($('#city'));

             

              //方法二：逐步添加我们的dom对象

              $myli=$("<li></li>");

              $myli.text("重庆");

              $myli.attr("id","cq");

              $myli.attr("name","chongqing");

              //把$myli添加到上海后

              $('#city').append($myli);

       }

);

//添加成都li到 北京前面

$('#b2').click(

       function(){

              //方法一：一步到位法

              $myli=("<liid='cd' name='chengdu'>成都</li>");

              //先使用内部前面插入

              $('#city').prepend($myli);

              //$myli.prependTo($('#city'));

       }

);

//添加成都li到 北京和重庆之间

//使用外部插入法

$('#b4').click(

       function(){

              //一步到位法

              //$("#bj").after("<liid='cd' name='chengdu'>成都</li>");

              $("<liid='cd' name='chengdu'>成都</li>").insertAfter($('#bj'));

       }

);

//添加成都li到 吉林前面

$('#b5').click(

       function(){

              //一步到位法

              var$jl=$("<li id='cd' name='chengdu'>成都</li>");

              //$("#jl").before($jl);

              $jl.insertBefore($('#jl'));

       }

);

//使用内部插入法把反恐li移动天津后

$('#b3').click(

       function(){

              $('#city').append($('#fk'));

       }

);

l        移动结点

JQuery当找不到需要的标记是也不会报错，但是js却是会报错的

//使用外部插入法把反恐li移动天津后

$('#b2').click(

       function(){

              $("#tj").after($('#fk'));

       }

);

l        删除结点

//删除所有p

$('#b1').click(

       function(){

              $("p").remove();

       }

);

//删除上海这个li

$('#b3').click(

       function(){

              $("#sh").remove();

       }

);

l        清空结点

//清空所有p

$('#b2').click(

       function(){

              $("p").empty();

       }

);

l        复制结点

$("p").click(

       function(){

              window.alert($(this).text()); 

       }

);

 

//不克隆段落p的事件

//$("p").clone().insertAfter($('button'));

//连同段落p的事件一起克隆

$("p").clone(true).insertAfter($('button'));

l        替换结点

//将段落p替换掉

//$('p').replaceWith("<inputtype='button' value='按钮'><br/>");

$("<ahref='#'>sohu</a>").replaceAll($("p"));

l        遍历结点

取得匹配元素的所有子元素：children()。该方法只考虑子元素而不考虑任何后代元素。

取得匹配元素后面紧邻的同辈元素的集合：next();

取得匹配元素前面紧邻的同辈元素的集合：prev();

取得匹配元素前后所有的同辈元素：siblings()

//查找所有子元素（class为one的div的所有子元素）

$("#b2").click(

       function(){

              $(".one").children().each(

                     function(){

                  window.alert($(this).text());

              }

              );

             

              //指定获取第一个子孩子

              //window.alert($(".one").children().eq(0).text());

       }

);

//查找.one后面的所有同辈元素

$("#b3").click(

       function(){

              $(".one").nextAll().each(

                     function(){

                  window.alert($(this).text());

              }

              );

              //获取.one后面第二个兄弟

              //window.alert($(".one").nextAll().eq(1).text());

       }

);

//查找.one后面的所有同辈元素,取一个用next(),多个nextAll()

$("#b3").click(

       function(){

              $(".one").nextAll().each(

                     function(){

                  window.alert($(this).text());

              }

              );

              //获取.one后面第二个兄弟

              //window.alert($(".one").nextAll().eq(1).text());

       }

);

//查找.one前面的所有同辈元素,取一个用prev(),多个prevAll()

$("#b4").click(

       function(){

              $(".one").prevAll().each(

                     function(){

                  window.alert($(this).text());

              }

              );

              //获取.one前面第1个兄弟

              //window.alert($(".one").prevAll().eq(0).text());

              //window.alert($(".one").prev().text());

       }

);

//获取所有的同辈元素

$("#b5").click(

       function(){

              $(".one").siblings().each(

                     function(){

                  window.alert($(this).text());

              }

              );

       }

);