[Original] Book notes of sharp JQuery (1)

"Sharp JQuery" is a very good entry book for JQuery in China. Basically, after reading this book, you can master the essence of JQuery, later, we will be able to better understand Jquery through more practices. The following is my reading notes for the entire book. It is also a summary of the main content of the book.

 

 

I. JQuery environment Configuration

1. JQuery is divided into compressed and non-compressed versions.

2. $ = JQuery

3. $ (document). ready (funtion () {}); equivalent to $ (function (){});

4. Comments //

5. Conversion between DOM objects and JQuery objects

Var $ variable (jquery object) = $ (variable) (Dom object );

Var variable (Dom object) = $ variable [0] or $ variable. get (0) (JQuery object)

6. Resolution of Conflicts with other JS libraries (mainly the question of who takes effect of the $ symbol)

[1]. import data after other databases

Before use: Call jQuery. noconflict (); ---- $ will be released to the jQuery library. That is to say, before using the jquery library, declare "jquery usage is used below, and $ represents jquery"

[2]. import data after other databases

You don't have to call jQuery. noconflict ();, just use it.

 

 

Ii. JQuery Selector

 

1. CSS adds a style after an element is found, and jQuery adds a style after an element is found.

2. Advantages of the jQuery selector:

[1] concise writing

[2] selector supporting CSS1 to CSS3

[3] Perfect processing mechanism, even if the element does not exist, it will not report an error like JS

3. method for determining whether an element exists

If ($ ("# tt "). length> 0) or if ($ ("# tt") [0]) instead of if ($ ("# tt ")! = Null), because it is never null.

4. Methods for finding or retrieving elements in native js

GetElementById ("id") such as id = "one"

GetElementByName ("name"), for example, name = "check" of the multiple-choice button"

GetElementByTag ("tagname"), such as <a>, <span>, and other html tags

5. selector Classification

Basic Selector

Level Selector

Filter Selector

Form Selector

6. Basic Selector

<1> $ ("# test") id Selector

<2> $ (". test") class selector

<3> $ ("p") Tag Selector

<4> $ ("*") select all elements

<5> $ ("div, span,. myclass") Combination

 

7. Hierarchical Selector

<1> $ ("div span") Select the span descendant element in the div.

<2> $ ("div> span") Select the child element of span in the div.

<3> $ (". one + div") Select the next div element of one ---- equivalent to $ (". one"). next ("div ")

<4> $ ("# two ~ Div ") Select the id of all <div> sibling elements behind two ---- equivalent to $ (" # two "). nextAll (" div ");

 

8. Filter Selector

 

 

<1> $ ("div: first") the first div in all div elements
<2> $ ("div: last") the last div in all div elements
<3> $ ("input: not (. myclass)") is not a <input> element whose class is myclass.
<4> $ ("input: even") the index is an even input.
<5> $ ("input: odd") input with an odd Index
<6> $ ("input: eq (1)") input ------ index with an index of 1 starts from 0
<7> $ ("input: gt (1)") input with an index greater than 1
<8> $ ("input: lt (1)") input with an index smaller than 1
<9> $ (": header") All <10> $ ("div: animated") where the animation is being executed <div>
<11> $ ("div: contains ('my')") div containing the text 'my'
<12> $ ("div: empty") empty div
<13> $ ("div: has (p)") <div>
<14> $ ("div: parent") <div>
<15> $ (": hidden") all invisible elements
<16> $ ("div: visible") all visible <div>
<17> $ ("div [id]") <div>
<18> $ ("div [title = test]") <div>
<19> $ ("div [title! = Test] ") <div>
<20> $ ("div [title ^ = test]") div whose title starts with "test"
<21> $ ("div [title $ = test]") div whose title ends with "test"
<22> $ ("div [title * = test]") title contains the div of test.
<23> $ ("div [id] [title $ = test]") Multi-Condition Selection

<24>: nth-child (index/even/odd/equation) -------- index starts from 1
<25>: first-child
<26>: last-child
<27>: only-child
<28> $ ("# form1: enabled") All available elements in the form with id "form1"
<29> $ ("# form2: disable ")
<30> $ ("input: checked") All selected <input> Elements
<31> $ ("select: selected") All selected <select> Elements
<32> $ (": input") All <input> <textarea> <select> <button> Elements
<33> $ (": text") All single-row text boxes
<34> $ (": password") all password boxes
<35> $ (": radio") All single partitions
<36> $ (": checkbox") All check boxes
<37> $ (": submit") all submit buttons
<38> $ (": image") All image buttons
<39> $ (": reset") All reset buttons
<40> $ (": button") All buttons
<41> $ (": file") All upload Domains
<42> $ (": hidden") all invisible elements

 

 

9. Adding return false to the click () event will not redirect the link.

10. add and remove styles

RemoveClass ()

AddClass ()

The two can be replaced by a toggleClass ().

 

11. Remember that If you disable javascript, your page cannot be processed normally.

12. The toggle () method is used to alternate a group of mouse clicks.

The hover () method switches between a group of mouse slides.

13. The end () method can return the last element that can be operated.

 

 

Author: Tony zhao

Source of this article: http://www.cnblogs.com/ytaozhao copyright belongs to the author and blog Park, welcome to reprint, but without the author's consent must retain this paragraph of the statement, and in the Article Page clearly given the original connection, otherwise, you are entitled to pursue legal liability.