Summary of sharp jQuery key points (2) DOM operations in jQuery (Part 2)_jquery

12 Set and get HTML, text and value

$("selector").html()
Get html code
$("selector").html(html)
Set html Code (replacing content in tags), the html() method cannot be used for XML documents
$("selector").text()
Get plain text content
$("selector").text(text )
Set the text content (replace the content in the tag), the text() method can be used in XML documents
$("selector").val()
Get the value of the element
$("selector ").val(value)
Set the value of the element, (external: the defaultValue attribute can obtain the html default attribute, P80 example: if (txt_value==this.defaultValue){...})
$(" select").val("option")
Set the selected state of the select control, similar to: $(":checkbox").val("check1","check2"); $(":radio"). val("radio1");
(External: You can use the attr() method to achieve the same function, such as: $("select option:eq(1)").attr("selected",true); $(" [value=radio2]:radio").attr("checked",true);)

13 Traverse nodes

$("selector").children()
Get matching The set of child elements of the element, returned as an array (only child elements are considered, and descendant elements below the child elements are not considered)
Extension: a method to loop through the html content of each child element:


$( "selector").next()
Gets the sibling elements immediately behind the matching element, returned as an array
$("selector").prev()
Gets the sibling elements immediately before the matching element, returned as an array Return
$("selector").siblings()
Get all the sibling elements before and after the matching element, and return it as an array
P88 Example of using this method:


$( "selector").closest()
Get the nearest matching element. First check whether the current element matches. If it matches, return the element itself. Otherwise, search the parent element upwards until it matches. If it cannot find it, return empty. jQuery object
P89 example



Other methods for traversing nodes (find(), filter(), nextAll(), prevAll(), parent(), parents(), etc.) This book is omitted

14 CSS-DOM operations

$("selector").css("property")
Get the value of the property attribute of the element style
$( "selector").css("property","value")
Set the value of the property attribute of the element style
$("selector").css({"property1":"value1","property2" :"value2"})
Set the values ​​of multiple style attributes of the element at the same time. Note: Example: "font-size" = fontSize (CamelCase without quotes)
$("selector").css("opacity","value")
Set transparency (supports all browsers), value value (0 ~ 1)
$("selector").css("height")
Get the height value of the element height
$("selector").height()
Get the element The currently calculated actual height value will definitely not return auto or the like. It can also be used to obtain the height of the window and document
$("selector").height(100)
Set the height, the default unit is px, such as To use other units, you need to pass a string such as .height(10em)
$("selector").width()
Get the currently calculated actual width value of the element

$(selector).offset()
Get the relative offset of the element in the current window. The returned object contains two attributes, top and left. This method is only valid for visible elements.
P91 Example of getting the offset of the
element


$("selector").position()
Getting the closest position of the element with the style attribute set to relative Or the relative offset of absolute's grandparent node. The returned object contains two attributes, top and left. Example:

$("selector").scrollTop()
Get the distance between the scroll bar of the element and the top, such as: var scrollTop = $("selector").scrollTop(); <script>var $ul = $("ul").children();for (var i=0 len=$ul.length; i<len; i++){alert($ul[i].innerHTML);}</script> $("selector").scrollLeft() <script>$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();})</script>Get the distance from the left side of the element's scroll bar, such as: var scrollLeft = $("selector").scrollLeft(); <script>$(document).bind("click",function(e){$(e.target).closest("li").css("color","red");})</script>Control the element's scroll bar to scroll to Position, parameters can be passed in the above two methods, such as: <script>var offset = $("p").offset();var left = offset.left();var top = offset.top();</script>$("textarea").scrollTop(300); <script>var position = $("p").position();var left = position.left;var top = position.top;</script>$("textarea").scrollLeft(300);