jQuery DOM 操作の例_jquery

さらに重要なことに、これは Web 開発における最大の悩みの種であり、jQuery はこの点でも非常に愛されています。プログラマーに愛されていますが、それをより良く使用するには、まず覚えておかなければなりません? 時間が経つと、役に立たない属性メソッドは忘れてしまいます。 以下に、jQuery の DOM 操作メソッドの属性について詳しく説明します。印象。

この例は醜いですが、それでもすべての機能が備わっています。

コードをコピー コードは次のとおりです: body { /*color: purple;*/ } .a{ color:red; } .b { color:purple; } class

all p

苹果 脐橙 柚子 内容

$().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 = $(" newP

");//创建元素，创建单个元素时因( )加上/ //p.append(newP);//追加元素到p内部后面( p newP

) //newP.appendTo(p);//将newP追加到p内部后面 //p.prepend(newP);//追加元素到p内部前面( newP

p

) //newP.prependTo(p);//将newp追加到p内部前面

//p.after(newP);//追加元素到p元素的后面( p

newP

) //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 ");//把id为#d元素里面的所有文本元素替换成指定的内容文本 //$(" span ").replaceAll("#d");//同上,只是顺序反了

//$("#ul").wrap(" ");//把id为#ul的元素用 标签包裹起来(如果假设有多个ul元素的话此方法会将每个ul都用一个 包裹起来) //$("#ul").wrapAll(" ");//把id为#ul的元素用 标签包裹起来(如果假设有多个ul元素的话此方法会将所有的ul用一个 包裹起来) //$("#ul").wrapInner(" ")//将指定元素里面的内容用一个 标签包裹起来

//alert($("#ul").children().length);//获取所有的子元素(next()是获取下一个同辈节点，prev()获取上一个同辈节点，siblings()获取所有的同辈节点) //$("#ul").closest("ul").css("color","red");//检索是否与当前元素匹配，如果部匹配则返回到父元素检索,否则返回空 //alert($("#ul").css("height"));//css方法获取的高度可能有auto，且带有px，与css设置相关联，而用height()获取的高度是元素在页面上的实际高度，且不带px，width也是一样

// $ ("#ul") .scrollTop(300) $("#ul").scrollLeft(300) スクロールバーと上端および左端との距離を設定します //alert( ("aabaa").slice(-2));// スライス() は最初の 2 つの文字列を返します。2 は戻りインデックスの先頭の後の文字列 です $("#over").mouseover(function ( e) { var tools = $(" "); 「トップ」、ページY "px").css("left ", e.pageX "px"); //tool.css({ "top": e.pageY "px", "left" : e.pageX "px" }).show(); .tool").remove(); }); });