Day (08/15) jquery operation elements (attributes, CSS, document processing)

Four action elements (attributes, CSS, document processing) 4.1 Event page loading

12	ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。$(document).ready(function(){}) -----------> $(function(){})

Event Bindings

Syntax:  label object. Events (functions)    eg: $ ("P"). Click (function () {})

Event Delegation:

$ (""). On (EVE,[SELECTOR],[DATA],FN)  //an event handler that is bound to one or more events on the selection element.

<ul>    <li>1</li>    <li>2</li>    <li>3</li></ul>
Event switching
Hover Event:
A method that mimics the hover event (moving the mouse over an object and moving out of the object). This is a custom method that provides a "keep in" state for frequently used tasks.
Over: The mouse moves to the function to be triggered on the element
Out: The mouse moves out of the element to trigger the function
View Code4.2 Property Operations
--------------------------CSS Class $ (""). AddClass (CLASS|FN) $ (""). Removeclass ([CLASS|FN])
--------------------------Property $ (""). attr (); $ (""). Removeattr (); $ (""). Prop (); $ (""). Removeprop ();
--------------------------HTML code/text/value $ (""). HTML ([VAL|FN]) $ (""). Text ([VAL|FN]) $ (""). Val ([Val|fn|arr])
---------------------------$ ("#c1"). CSS ({"Color": "Red", "fontSize": "35px"})
The Attr method uses:
View Code4.3 Each loop
We know

 
 
 
  
  
 
   
 
    
1
 
    
$("p").css("color","red")　　
 
   
 
  
 
 
 
is to add the CSS action to all the labels and maintain a loop internally, but if you do different processing for the selected tag, you need to loop through all the tag arrays.
jquery supports two ways of looping:
Way One
Format: $.each (OBJ,FN)
LI=[10,20,30,40];d ic={name: "Yuan", Sex: "Male"};$.each (li,function (i,x) {    console.log (i,x)});
Way Two
Format: $ (""). each (FN)
$ ("tr"). each (function () {    Console.log ($ (this). html ())})
Where the $ (this) refers to the current loop label.
Each extension
/*  function f () {for (Var i=0;i<4;i++) {if (i==2) {  return} console.log (i)}} f (); This example should not be a problem for everyone!!!    -----------------------------------------------------------------------li=[11,22,33,44];   $.each (Li,function (i,v) {if (v==33) {return;            = = = Try a return false what? } console.log (v)});//------------------------------------------//Think again: return in function only ends the current function and does not affect the execution of the subsequent function//this is not a problem, but because there are a lot of situations in our demand: we do not matter when we loop to the first function, once return,//hope that the subsequent function is no longer executed! Based on this, jquery adds another step in the $.each: for (             var i in obj) {ret=func (i,obj[i]);             if (Ret==false) {return; }}//This is very flexible://<1> If you want to return after the following loop function continues to execute, then directly write return or return TRUE//<2> if you do not want to return after the following loop function Continue, then write the return false//---------------------------------------------------------------------
4.4 Document Node Processing
Create a Label object    $ ("<p>")//Inside Insert    $ (""). Append (CONTENT|FN)      ----->$ ("P"). Append ("<b>hello </b> ");    $ (""). AppendTo (content)       ----->$ ("P"). AppendTo ("div");    $ (""). Prepend (CONTENT|FN)     ----->$ ("P"). Prepend ("<b>Hello</b>");    $ (""). Prependto (content)      ----->$ ("P"). Prependto ("#foo");//External Insert    $ (""). After (CONTENT|FN)       ----- >$ ("P"). After ("<b>Hello</b>");    $ (""). Before (CONTENT|FN)      ----->$ ("P"). Before ("<b>Hello</b>");    $ (""). InsertAfter (content)    ----->$ ("P"). InsertAfter ("#foo");    $ (""). InsertBefore (content)   ----->$ ("P"). InsertBefore ("#foo");//Replace    $ (""). ReplaceWith (CONTENT|FN)- ---->$ ("P"). ReplaceWith ("<b>paragraph. </b> ");//delete    $ (" "). Empty ()    $ (" "). Remove ([expr])//Copy    $ (" "). Clone ([Even[,deepeven]])
4.5 animation effects Show hiddenView CodeSlidingView CodeFade in and fadeView Codecallback functionView Code4.6 CSS Action CSS position operation
        $ (""). Offset ([coordinates])        $ (""). Position ()        $ (""). ScrollTop ([Val])        $ (""). ScrollLeft ([Val])
Example 1:
View Code
Example 2:
View Code
Example 3:
View CodeDimension operation
        $ (""). Height ([VAL|FN])        $ (""). Width ([VAL|FN]) $ (""). Innerheight () $ (""        ). Innerwidth ()        $ (""). Outerheight ([soptions])        $ (""). Outerwidth ([options])
Example:
View CodeBack to top extension method (plug-in mechanism) Jquery.extend (object)
Extends the jquery object itself.
Used to add new functions to the jquery namespace.
Add two functions to the jquery namespace:
<script>    jquery.extend ({      min:function (A, b) {return a < b? a:b;},      max:function (A, b) {return a > B? A:B; }});    Jquery.min (2,3); = 2    Jquery.max (4,5);//= 5</script>
JQuery.fn.extend (object)
Extend the JQuery element set to provide new methods (usually used to make plugins)
Add two plugin methods:
<body><input type= "checkbox" ><input type= "checkbox" ><input type= "checkbox" ><script src= "Jquery.min.js" ></script><script>    jQuery.fn.extend ({      check:function () {         $ (this). attr ("Checked", true);      },      uncheck:function () {         $ (this). attr ("checked", false);      }    );    $ (": checkbox:gt (0)"). Check () </script></body>
Http://www.cnblogs.com/yuanchenqi/articles/6936986.html Detailed reference Teacher Blog
Day (08/15) jquery operation elements (attributes, CSS, document processing)