Home > Developer > Web Develop
jquery Operation Dom:
To modify a property:
Using the attr () method
attr (name, value)
Name: Property name of the property to be modified
Value: the corresponding value
Attr method, if the current tag has a property to be modified, it will be modified, if not, add directly
Example: $ ("a"). attr ("href", "http://www.baidu.com");
To modify multiple property values:
attr (obj)
$ ("img"). attr ({
"title": "File name",
"src": "Path",
"Alt:" Picture "
})
Get Properties
attr (name);
This method returns undefined when a non-existent property is obtained
To remove a property:
//removeattr (name)//Name: The name of the property to delete//The attr method cannot be used to manipulate single attributes (checked selected disable)//operation checked selected disabled these three properties need to be used propExample:<script> $(function(){ $("#btn1"). Click (function(){ $("#check"). Prop ("Checked",true); }); $("#btn2"). Click (function(){ $("#check"). Prop ("Checked",false); }); }) ;</script><body><input type= "button" value= "select" id= "btn1"/><input type= "button" value= "uncheck" id= " Btn2 "/>
<type=name=id="Check"/>
</body>
jquery Operation Value:
Gets the value of the form element
Val ()
Console.log ($ ("#txt"). Val ());
Set value values for form elements
Val (value)
Value: The value to set
$ ("#txt"). Val ("Sun Sky Shines");
When the value of select is obtained with Val (), an array is obtained. (Must be checked, otherwise null is returned)
$ (function() { var $select =$ ("#select >option"). Val (); Console.log ($select); }) </script>HTML () method with the text () method:
$ (function() { $ ("div"). Text ("<span> This is a section of content </span>"); does not translate // get content // $ ("div"). Text ()// $ ("div"). html ("<p> text </p>"); translate });Get Dimensions:
Height () width ()
$ (function() { $ ("#btn"). Click (function() { var width=$ ("div "). Width (); var height=$ ("div"). Height (); Console.log (width,height); } );jquery Operation coordinate values:
Offset () method
$(function () { $("#btnGetOffset"). Click (function () { //the offset () method can be used to get the coordinates of the current element from the upper corner of the page //{top:20, left:20} varOffset = $ ("div"). offset (); Console.log (Offset.top, offset.left); }); $("#btnSetOffset"). Click (function () { //offset (obj) //sets the coordinates of the current element from the upper-left corner of the page //obj: {top:value, left:value}$ ("div"). Offset ({top:40, left:40 }); }); $("#btnGetPosition"). Click (function () { //The postion method is used to get the position of the current element relative to the positioned parent element, and if the parent element does not set the positioning, it will continue to look up until the body is found//The position method can only get the position cannot be modified varpos = $ ("#inner"). Position (); Console.log (POS); });})ScrollTop method
Sets or gets the position of the vertical scroll bar
// gets the scroll distance of the scroll bar left scrollleft ()// top scrolltop () $ (function() { $ (document). Scroll (function() { var scrollleft=$ ( this ). ScrollLeft (); var scrolltop=$ (this). scrolltop (); Console.log (scrollleft,scrolltop); } );Bind binding and Delegate events
$(function(){ //Bind Bind event //bind (Types,eventhandler) //types Event Type, which is a string, if there are multiple spaces separated by //EventHandler: Event handler function$(function(){ $("Div"). Bind ("MouseEnter click",function() {alert (haha); }); $("#btn"). Click (function(){ $("Div"). Append ("<p>233</p>") }); //Delegate Event Delegate //bind multiple times at the same time, or add events dynamically to an element$ ("div"). Delegate ("P", "MouseEnter",function() {alert ("Event delegation"); }); })});On () binding event
//On method Binding event //On (Types,selector,eventhandler) //types Event Type multiple events separated by spaces //selector to whom to bind, select the appropriate selector$(function(){ $("Div"). Append ($ ("P")); $("Div"). On ("MouseEnter click", "P",function(){//delegate to DIV implementationAlert ("Haha"); });//$ ("P"). On ("MouseEnter", function () {//alert ("self-binding");// }) });//On method Binding event //On (Types,selector,eventhandler) //types Event Type multiple events separated by spaces //selector to whom to bind, select the appropriate selector$(function(){ $("Div"). Append ($ ("P")); $("Div"). On ("MouseEnter click", "P",function(){//delegate to DIV implementationAlert ("Haha"); });//$ ("P"). On ("MouseEnter", function () {//alert ("self-binding");// })});Off () Unbind
Off (types)
The type of event to unbind in parentheses
1. Parentheses do not pass arguments to unbind all events
$ ("P"). Off ();
2. Whether a delegate event or a self-binding event will be untied
$ ("P"). Off ("click");
3. Unbind the Click event of all Agents , the events of the element itself will not be untied
$ (selector). Off ("click", "* *");Triggle Trigger Event:
$ (function () { // 1. Invoke event $ ("#btn"). Click (function< /span> () { // $ ("#txt"). focus (); // 2.trigger (type) // // $ ("#txt"). Trigger ("focus"); // 3. Note: This method triggers the event and does not trigger the browser default behavior, such as: The default behavior of the text box to get focus $ ("#txt"). Triggerhandler ("fo Cus "); }); });Event object:
Event.type |
Event Type |
Event.data |
Additional data that is passed when the binding event is stored |
Event.target |
Who's the one who ordered it? |
Event.currenttarget |
Current DOM element, equivalent to this |
Event.delegatetarget |
Proxy Object |
Screenx and Screeny |
The value that corresponds to the upper-left corner of the screen |
OffsetX and OffsetY |
Position of the clicked position away from the upper-left corner of the element |
Clientx and Clienty |
Position in the upper-left corner of the page (ignoring scroll bars) |
Pagex and Pagey |
The position of the upper-left corner of the top of the page (the distance of the scrollbar is calculated) |
Event.wich |
mouse button type, 1 = left mouse button 2 = middle mouse button 3 = right mouse button |
Event.keycode |
Press the keyboard code |
Event.stoppropagation () |
Block event bubbling Behavior |
Event.preventdefault () |
Block browser default behavior |
Blocks the bubbling behavior of events in addition to E. Stoppropagation () and return False;return false, and the effect of blocking browser default behavior, is recommended.
The jquery Supplement section:
Chained programming: You can continue chained programming when setting up an operation, returning this object (return this)
The corresponding value obtained when the operation is obtained cannot return this.
Workaround: Use the filter selector end (); It will change the DOM object of the JQ object and revert to the last state
An implicit iteration:
What is implicit iteration: loop through all the elements that match to the inside of the method, execute the corresponding method, instead of looping, simplifying our operation and making it easier for us to invoke.
$ ("Li"). CSS ("BackgroundColor", "pink");
Here is a lot of the Li tag
$ ("Li") got 10 elements.
The 10 elements are traversed and then the Setup method is executed in turn
$ ("Li"). CSS ("fontSize");
There is no implicit iteration in the Get method
Each () Method:
With implicit iterations, why use each function traversal? In most cases, it is not necessary to use the each method because of the implicit iterative nature of jquery. If you want to do different things for each element, the each method is used.
// Each (function (index,element) {}) // Index is the element that is currently being traversed. // Element is what is currently being traversed. $lis. Each (function (index, Element) { Console.log (index); // Console.log (element); $ (Element). CSS ("BackgroundColor", "Red"); });jquery Operation Dom, jquery event mechanism, jquery supplemental Parts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
