Basic knowledge of JQuery

JQuery

1. Features: Small, powerful, cross-browser, plug-in

2. Use

is actually a JS file

A) Copy JS to Webroot

b) page <script src= "jquery.js" charset= "" ></script>

3. Core objects and common methods and properties

A) name

jquery and $

The object that was found with $ is called a jquery object.

The object found with document is called a DOM object.

b) Dom and jquery object conversions

jquery object. Get (0)--->dom object

$ (DOM object)--->jquery object

c) JQuery object method

The. Show () displays

. Hide () hidden

. Toggle () Show or hide toggle

$ ("div"). Hide ();

$ ("#myid"). Show ();

$ (". MyClass"). Show (100);

. Size () The number of objects found

var n = $ ("div"). Size ()

Text box Assignment (value)

$ ("#myid"). Val (123);

. val () value

The content of the layer. Innerhtml/.innertext

$ ("div"). html ();

$ ("div"). HTML (123);

$ ("div"). html ("<input type=button>");

$ ("div"). Text ("<inputtype=button>");

Style document....style.color= "Red"

$ ("div"). CSS ("Color", "red"). CSS ("Font-size", "18");

$ ("div"). css ({color: "Red", "font-size": 18});

Delete

$ ("div"). Remove (); Delete all Div

Add to

Parent Gazi: $ ("div"). Append ("<inputbutton>");

$ ("div"). Append ($ ("#myid"));

Ziga father

$ ("input"). AppendTo ($ ("div"));

Object Properties

$ ("input"). attr ("Checked", true);

Go space:

$.trim (String)

$ ("div"). each (function (i,obj) {});

$.post (url,function (x) {});

$.post (url,{key: Value},function (x) {});

$.getjson (url,function (x) {//here X has turned into JSON, do not use eval});

Cloning

$ ("div"). Clone ();

4. Selector

a) class selector

<input type=textclass= "MyClass" >

$ (". MyClass") to find multiple

b) ID Selector

<input type=textid= "myID" >

$ ("#myid") find a

Equivalent: document.getElementById ("myID")

c) Tag Selector for multiple

$ ("Div,span")

Equivalent to document.getElementsByTagName ()

d) Form Selector

$ (": Text") All text boxes

$ ("input[type=text][value=")

$ (": Radio") all the radio boxes

$ (": checkbox") all check boxes

e) Form Property Selector

$ (": checkbox:checked") or $ (": Checked:checkbox")

$ (": Checked") Find all selected (Radio box and check box)

$ (": Selected") Find All Selected list boxes

f) Level Selector

The father is looking for a C for child D

$ ("table"). Find ("tr")//To find descendants

$ ("table>tbody>tr") Find all TR

$ ("Table>tbody>tr:first") find the first line

$ ("table>tbody>tr"). EQ (0) Find the first line

$ ("table>tbody>tr:odd") all odd lines

$ ("Table>tbody>tr:even") all even lines

Son find Father

$ ("tr"). Parent ()

Find a brother.

$ (a). Next () Next

$ (b). Prev () Previous

---jquery's operation on table tr

function bh ()//serial number

{

JQuery ("#t >tr"). each (function (i,obj) {

obj.cells[0].innerhtml=i+1;

});

}

function AddRow ()//Add line TR

{

var tr =jquery ("#t >tr:first"). Clone (). AppendTo (JQuery ("#t"));

Tr.find (": Text"). Val ("");

Tr.find ("TD"). EQ (4). HTML (""); EQ (4) Second text box

BH ();

}

Functiondrorow (DEL)//delete line TR

{

JQuery (DEL). Parent (). Parent (). remove ();

BH ();

}

Calculates the result of a number in the input text

Function js (JS)

{

Find TR

Vartr=jquery (JS). Parent (). parent ();

Fetch number

Varsl=tr.find (": Text"). EQ (1). Val ();

Varjg=tr.find (": Text"). EQ (2). Val ();

Tr.find ("TD"). EQ (4). HTML (SL*JG);

}

Radio Radio Value: JQuery ("input[@type =radio][name=ckbb][checked]"). Val ();

<-------------------------------------------------------------

Others to see:

Gets the value of a set of radio selected items

var item = $ (' input[@name =items][@checked] '). Val ();

Gets the text of the Select selected item

var item = $ ("select[@name =items]option[@selected]"). Text ();

The second element of the Select drop-down box is the currently selected value

$ (' #select_id ') [0].selectedindex = 1;

Radio the second element of a radio group is the currently selected value

$ (' input[@name =items] '). Get (1). checked = true;

Get Value:

text box, text area: $ ("#txt"). attr ("value");

Multi Box checkbox:$ ("#checkbox_id"). attr ("value");

Radio Group radio:$ ("input[@type =radio][@checked]"). Val ();

Drop-down box select: $ (' #sel '). Val ();

Control form elements:

text box, text area: $ ("#txt"). attr ("Value", "");//Clear Contents

$ ("#txt"). attr ("value", ' 11 ');//fill content

Multi Box checkbox:$ ("#chk1"). attr ("Checked", "");//Do not tick

$ ("#chk2"). attr ("Checked", true);//tick

if ($ ("#chk1"). attr (' checked ') ==undefined)//Determine if a tick has been made

Radio Group Radio: $ ("input[@type =radio]"). attr ("Checked", ' 2 ');//Set value=2 item as current check (wrong)

$ ("input[@name =radio_s][@value =16]"). attr ("Checked", true); (Test pass)

drop-down box select:$ ("#sel"). attr ("value", '-sel3 ');//Set the VALUE=-SEL3 item as the current selection (wrong)

$ ("select[name=sex]option[value="-sel3 "]"). attr ("selected", true);(test passed)

$ ("<option value= ' 1 ' >1111</option><optionvalue= ' 2 ' >2222</option>"). AppendTo ("#sel")// option to add a drop-down box

$ ("#sel"). empty ();//Empty drop-down box

$ ("#select1") [0].options (index). Selected = true; Make index option selected

$ ("#select1") [0].options (3). text//Take the option value of index 3