jquery is a JS library/Common version is jjquery-1.7.2.js/This version is mainly used for open use
The product is made with its min version.
When you play jquery, you spend money (dollars) on whatever you do.
Note the point:
1.silbings (' input '), except for the other siblings of the element that took place the event of the input sibling element note silblings to add S
2.jquery Unable to get current time
3.jquery object and JS object mixed operation problem (read book resolution)
4.innerhtml=html (content);
5.is (": Checked") is the method of JQ to determine whether an element is selected, returns a Boolean value
6.JQ No timer, can only write native
7.bind is the binding event unbind is the unbound event, generally is not used, because, JQ default all the events are bound state, generally use on instead, because on has the function of event delegation
8.parent () find structure parent element offsetParent () Locate parent
9.css (", value) must be quoted
10.$ (' img '). Size (); Calculate the number of all pictures in the document
11. One element binds multiple events and multiple functions
$ (' #div1 '). On ({' MouseOver ': function () {
}, ' MouseMove ': function () {
}});
12. Empty an event with off ();
13.jquery ways to block default events
return False
Ev.preventdefault ()
14.$ (this). Find (' span ') finds the span below this
. Click (FN);
. MouseOver (FN);
. Mouseout (FN);
. Hover (fn1,fn2);
. Toggle (Fn1,fn2,fn3 ...);
Effect:
. Hide (); Hidden
. Show (); Show
. Animate ({name:value,name:value});
* * must be preceded by Stop ()
very Important: the conversion of jquery and Dom objects
native Object-"jquery object"obj==>$ (obj)jquery Object-"native object"$ (' div ') [subscript]$ (). Get (subscript)
loops in jquery:
the cycle of jquery
$ (' div '). each (function (index,element) {
Index Subscript
element each native object
This each native object
});
event inside this native
Each inside this native
all this is native in jquery.
However, the only exception to this is the jquery object in the plugin.
Plugins
1.
$.fn. Function name =function () {};
2.
$.fn.extend ({
function Name1:function () {},
function Name2:function () {},
function Name3:function () {}
});
Example:
' use strict '
$.fn.extend ({
cs:function (sname,svalue) {
//The This in the plugin is a jquery object
this.css (sname,svalue);
}
});
★ Number is a more important point of knowledge has been identified
page Loading: The first is the company must use, remember
★
1.$ (document). ready.$ (function () {}); This is the mainstream common
2.$ (function () {});
Index Value:
$ (' div '). EQ ($ (this). Index ())
selector: The main core is the same as the CSS selector
= = Element selection = =
★
$ (' #id ') ID selector
★
$ ('. class ') class selector
$ (' tagName ') tag Selector
= = Level Selection = =
★
$ ("Div,span,p.myclass") and select
$ (' #box ol. Active input ');
Hierarchy Selector (what is found below what element)
= = Sibling Selection = =
$ ("form > Input") matches all of the child input elements in the form.
$ ("label + input") matches all input elements following the label
$ ("form ~ input") finds all input elements that are siblings of the form
= = pseudo-Class selection = =
★
$ ("Li:eq (Index)") index is subscript
$ (' Li:first '); Gets the first element of a match
$ (' li:last '); Gets the last element of a match
$ ("Input:not (: Checked)") to find all the unselected input elements
$ ("Li:even") Select Odd line
$ (' li:odd ') select even rows
$ (": Header"). CSS ("Background", "#EEE"); Add background color to all headings in the page
$ ("#login: Focus"); Set focus of ID login after page load
$ ("Div:has (P)"). AddClass ("test"); Add a text class to all DIV elements that contain p elements
= = Property Selector = =
$ ("input[name= ' newsletter ')"). attr ("Checked", true); Find all the name attribute is the INPUT element of newsletter
manipulating CSS
. CSS (name); Get
. CSS (name,value); Modify a
. css ({name:value,name:value}); Batch modification
Action Properties
. attr (name); Get
. attr (Name,value); Modify a
. attr ({name:value,name:value}); Batch modification
$ ("img"). Removeattr ("src"); The name of the property to delete
disables and selects the check boxes on all pages.
$ ("input[type= ' checkbox ']"). Prop ("disabled", false);
$ ("input[type= ' checkbox ']"). Prop ("checked", true);
Operation class
. addclass ()
. Removeclass ()
$ ("P"). Removeclass ("selected"); Remove the ' selected ' class from the matching element
Action Content
form Element (equivalent to value)
. Val () gets
. Val (' a ') setting
. Val (") Empty
non-form element (equivalent to innerHTML)
. HTML () gets
. HTML (' a ') settings
. HTML (') empty
dom Operation:
To Create an element:
$ (' <div> created a div tag </div> ')
2. Inserting elements
AppendTo inside back
$ (' <div><strong>abc</strong></div> '). AppendTo ($ (' div '));
prependto inside Front
InsertAfter External back
InsertBefore outside Front
3. Deleting an element
$ (). remove ();
$ ("P"). Detach (); Remove all paragraphs from the DOM
4. Get parent Node
$ (). parent (); Find Structure Parent
$ (). OffsetParent (); Find a location parent
5. Cloning
$ ("B"). Clone (). Prependto ("P"); clone all B elements (and select copies of those clones) and then forward them to all paragraphs
6. Get Location JS jquery
Locate Parent Position offset position Note that you want to locate
absolute position GetPos offset absolute position
7. Get the dimensions
Width ()/height () simple width and height
innerwidth ()/innerheight () Width-height +padding
outerwidth ()/outerheight () the width and height of the box model
EV in event ev:jquery is already compatible
Event Bindings
all events in the *jquery are bound by default.
Bind events are binding, so they're not very useful.
Unbind
Event Delegate:
On (' event name ', FN) delegate binding event
off (' event name ', FN) Unbind delegate event
jquery Basics Learning Notes
