JQuery DOM manipulation instance
- 2020-03-30 02:17:14
- OfStack
To deepen the impression, everyone know jQuery is very good use, because it simplifies the javascript code, more important is that it is compatible with all browsers basically, web development is the most headache is this, so the jQuery also so loved by code of farmers, but first you have to remember that it can better use it, isn't it too long the useless attribute method also fade, below is the jQuery DOM operation properties of the explanation, deepen the impression.
Example although ugly function still exists completely!
<!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 {
}
.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"> apple </li>
<li id="b"> Navel orange </li>
<li id="c"> grapefruit </li>
</ul>
<div id="d">
<p> content </p>
</div>
<input type="button" value=" Hover effect " id="over" />
</div>
<script type="text/javascript">
$().ready(function () {
var p = $("#p");
//alert(p.attr("id"));//attr(" The property name ") Get the properties, attr(" The property name "," Attribute values ") Set properties
//p.attr("title","title");// Set properties
//p.removeAttr("id");// Deletes an element attribute with the specified element attribute name
//$("#all").attr("class", "class");// Set up the class Property, so setting the property replaces the previous one class attribute (class='class')
//$("#all").addClass("class");// Set up the class Property in the original class Append one to the property class(class='all class') If a class It has the same properties ( Such as color), Then the latter will override the former
//$("#all").removeClass("all");// Delete specified class attribute
//$("#all").removeClass();// remove class All of them class attribute
//$("#all").toggle(// Alternate method
// function () {
// $(this).css("color","red");
//}, function () {
// $(this).css("color","purple");
//});
//$("#div").click(function () { $("#all").toggle();});// Used to show the element specified by the hide alternate
//$(" # all "). Click (function () {$(" # div "). The text (" the class attribute is: "+ $(" # all"). Attr (" class ")); });
//$("#all").click(function () {
// $("#all").toggleClass("b")
//});
//alert($("#all").hasClass("all"));// Determine if there is class attribute
//alert($("#all").is(".all"));// The effect same as above
//alert($("#all").html());// With equal InnerHTML The effect
//$("#all").html(" setup successful ");
//alert($("#all").text());// Gets all the text content
//$("#all").text(" set successfully ");
//alert($("[name='text']:eq(0)").val());// With equal value attribute (val(" Setting property values "))
var newP = $("<p id='newP'>newP</p>");//Create element, create a single element cause (<P />) Add /
//p.append(newP);// Append elements to p Behind the internal (<p id='p'>p<p id='newP'>newP</p></p>)
//newP.appendTo(p);// will newP Appended to the p Behind the internal
//p.prepend(newP);// Append elements to p Inside the front (<p id='p'><p id='newP'>newP</p>p</p>)
//newP.prependTo(p);// will newp Appended to the p Inside the front
//p.after(newP);// Append elements to p After the element (<p id='p'>p</p><p id='newP'>newP</p>)
//newP.insertAfter(p);// will newP Appended to the p After the element
//p.before(newP);// Appended to the p In front of the element
//newP.insertBefore(p);// will newP Appended to the p In front of the element
//Apple Navel orange Pomelo moves attribute nodes
var a = $("#a");
var c = $("#c");
//c.insertBefore(a);// the c( grapefruit ) The element moves to a( apple ) In front of the element
//a.remove();// Remove nodes ( All descendant nodes will also be deleted )
//a.remove();
//c.after(a);// Delete the element and add it back
//$("ul>li").remove("li[id='a']");// Removes the specified element according to the condition
//a.empty();// Empty everything inside the element
//a.clone().insertAfter(c);// Copy the nodes a( apple ) Added to the c( grapefruit ) The back of the
//$("#d").replaceWith("<span>span</span>");// the id for #d All text elements inside the element are replaced with the specified content text
//$("<span>span</span>").replaceAll("#d");// Same as above , It's just in the wrong order
//$("#ul").wrap("<b></b>");// the id for #ul Elements with <b> Label wrapped ( Let's say I have multiple ul Element and this method will take each of them ul a <b> wrapped )
//$("#ul").wrapAll("<b></b>");// the id for #ul Elements with <b> Label wrapped ( Let's say I have multiple ul Element and this method will take all of them ul With a <b> wrapped )
//$("#ul").wrapInner("<b></b>")// USES one for the contents of the specified element <b> Label wrapped
//alert($("#ul").children().length);// Gets all child elements (next() Is to get the next peer node, prev() Get the last peer node, siblings() Gets all peer nodes )
//$("#ul").closest("ul").css("color","red");// Retrieves whether it matches the current element, and returns to the parent element if the part matches , Otherwise return null
//alert($("#ul").css("height"));//css The height obtained by the method may have auto And with px , and css The Settings are associated with and used height() The height obtained is the actual height of the element on the page and is not carried px . width Is the same
//Offset () method
var ul = $("#ul").offset();
//alert(ul.left);// Gets the offset value of the element from the window (top)
//The position () method
var ul = $("#ul").position();
//alert(ul.left);// Gets the offset value for absolute positioning
//$(" # ul "). The scrollTop () $("#ul"). ScrollLeft () gets the distance from the top of the scroll bar to the left
//$(" # ul "). The scrollTop (300) $("#ul").scrollleft (300) sets the distance between the top and the left side of the scroll bar
//alert(("aabaa").slice(-2));//slice() Returns the first two strings, 2 The string that follows the start for the return index
$("#over").mouseover(function (e) {
var tool = $("<div id='tool'> Suspended content </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>