jQuery DOM 작업 example_jquery

우리의 인상을 깊게 해보자. jQuery는 자바스크립트 코드를 단순화하기 때문에 사용하기 쉽다는 것은 누구나 알고 있다. 더 중요한 것은 이것이 기본적으로 모든 브라우저와 호환된다는 점이다. 그래서 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 () $ ("#ul"). Scrollleft () 상단과 좌측의 롤링바 거리를 구합니다. side // $ ("#ul") .scrollTop(300) $("#ul").scrollLeft(300) 스크롤 막대와 상단 및 왼쪽 사이의 거리를 설정합니다. //alert( ("aabaa").slice(-2));// Slice()는 처음 두 개의 문자열을 반환합니다. 2는 반환 인덱스 시작 뒤의 문자열 입니다. $("#over").mouseover(function ( e) { var 도구 = $(" 일시 중단된 콘텐츠 "); 'e.page', Y "px").css("왼쪽 ", e.pageX "px"); //tool.css({ "top": e.pageY "px", "left" : e.pageX "px" }).show(); > })