jquery Basics (Ii.)

Brief introduction:

jquery is a fast, concise JavaScript library that makes it easier for users to handle htmldocuments, events, animate, and easily provide Ajax interactivity to websites.

The syntax of jquery and the difference between JS and CSS :

1. Selector

 CSS selector :
Basic selector: * #. P
Combo selector: p,h p h p+h p>h
Property selector: [class= ' AAA '] div[id]

 DOM node lookup in JS : Direct Lookup
Navigation Properties Find 6 types
Children
parentelement
Firstelementchild
Lastelementchild
nextelementsibling
previouselementsiling

jquery
selector:
Basic Selector
Hierarchy Selector
Property Selector
form selector

Filter:
$ (' Li:eq (2) ')
Filter Filter: $ (' li '). EQ (2)
Find filter: Children find
Next Nextall Nextuntill
prev Prevall Prevuntill
Parent Parents Parentuntil
siblings


 2. Text node (document operation)
JS and jquery node operations comparison
 JS: createelement
Appendchind
InsertBefore
Removechind
ReplaceChild

 jquery Document operations :
Append prepend parent node to add child nodes
AppendTo prependto child node added to parent node

After before brother tags added
InsertAfter InsertBefore

replacewith Replacement
Empty the contents of the label
Remove Delete Label
Clone clones a new tag

3. Property Manipulation


 JS Node property operation :
Arribute Property: SetAttribute (Name,value)
getattribute (name)
removeattribute ()
Class Property:
Node.classname
Node.classList.add ()
Node.classList.remove ()
Node value: InnerText
InnerHTML
CSS Properties:
Node.style.color
Create a tag: $ (' <p> ')


 jquery Properties :
Intrinsic properties: Prop () Removeprop ()
Custom properties: attr () removeattr ()
Class Property:
addclass ()
removeclass ()
values for node nodes:
html ()
text ()
Val () for intrinsic properties
CSS Properties:
$ (). CSS (' Color ', ' red ')
Location: $ (). Offset ({left:0,top:0}) offsets
$ (). Position ()
$ (). ScrollTop ()
$ (). ScrollLeft ()
Size: $ (). Height () Content Heights
$ (). Width () content width
$ (). Innerheight () plus padding
$ (). Innerwidth ()
$ (). Outerheight () plus border
$ (). Outerwidth ()
$ (). Outerheight () plus margin
4.Jquery Other
 jquery animation effect : Show Hide Toggle
Slidedown slideup Slidetoggle
Fadedown fadeup Fadetoggle
callback function
 jquery loop : $.each (OBJ,FN)
Way One: Iterate through an array or dictionary
$.each (array,function (i,j) {}) I: Index j: Element value
$.each ({key:value},function (i,j) {}) I:key J:value

Way Two: Traverse the Node object
$ (' Elector '). each (function () {
$ (This)})
5. Event Binding
JS
Event Binding Method One:
<p Onclick=func (this) >ppppp</p>
function func (self) {
Self self : Current action label DOM Object
$ (self)} $ (self): Current action label jquery object


Event Binding mode two:
var Ele=document.getelementbyid (")
ele.onclick=function () {
This this : Current action label DOM Object
$ (This)} This: Current action label jquery object



This is in the global, referring to the Window object

Jquery
 Event Binding method :
$.bind (' click ', Function () {})
$ ('). Click (function () {
$ (This)})
$ ('). On (' click ', [Selector],function () {})


 jquery Events :
page loaded: $ (document). Ready
event handling: on off
Event Switching: hover (FUNC1,FUNC2)
event: Blur
 Change
Click
DblClick
Focus
KeyDown
KeyUp
KeyPress
mouseover
mouseout
MouseLeave
MouseEnter
Scroll
Select
Submit
Unload

6. Extension method: Plugin
1 $.extend ({
name:function () {};
     })
2 $.fn.extend ({
name:function () {};
   })

jquery Basics (Ii.)