jquery Knowledge Collation

A: A brief introduction to jquery

jquery is a lightweight, multi-browser-compatible JavaScript library.

jquery allows users to easily manipulate HTML Document, Events, make phone calls, and easily interact with Ajax, which can greatly simplify JavaScript programming.

The purpose of jquery : "Write less, does more".

Two: The advantages of jquery

is a lightweight framework, the core file is only dozens of KB, loading up very fast;

Rich Dom Selector, jquery selection is handy, the code to find the elements of the original JS to save a lot of the first;

chain expression, query chain operation can write multiple operations in one line of code, more concise;

Simplify the JS operation of the CSS code, and the code readability is better than JS, support events, styles, animations;

Ajax Operations Support , jquery simplifies the Ajax operation, the backend simply return a JSON-formatted string to complete the communication with the front end;

Cross-browser compatible , jquery is basically compatible with the current mainstream browser, no longer for browser compatibility problems and the brain;

Plug-in extension development. jquery has a rich third-party plug-in, such as: Tree menu, date control, picture switch plug-ins, pop-ups, and so on the basic front-end page of the components have corresponding plug-ins, and with the jquery plug-in made the effect is very dazzling, and can be adapted to their own needs to rewrite and encapsulation plug-in, simple and

Three: Related understanding

jquery content:

Selectors, filters, style operations, text manipulation, property manipulation, document handling, events, animation effects, plugins, each, data, Ajax.

jquery version:

1.x: Compatible with IE678, the most widely used, the official only bug maintenance, function no longer new. So for general projects, the 1.x version is available, and the final version: 1.12.4 (May 20, 2016)

2.x: Incompatible with IE678, few people use, official only bug maintenance, function no longer new. If you do not consider a compatible low version of the browser can use 2.x, final version: 2.2.4 (May 20, 2016)

3.x: Incompatible IE678, only the latest browser is supported. It is important to note that many of the old jquery plugins do not support version 3.x. Currently this version is the official maintenance version of the main update

jquery Download Link:

jquery Official website

jquery Documentation Links:

jquery Documentation Brochure

Four: jquery object

jquery objects are created by wrapping a DOM object on jquery, which is a unique object of jquery, and jquery objects can use the methods in jquery

Note: Conventionally, when declaring a jquery object variable, precede the variable name with $, so that when you get an object, you will be able to distinguish the type well.

var // get the div tag for a DOM object var // get the div tag for a jquery object  //DOM object converted to jquery  object =  //jquery object converted to DOM object

Although jquery objects are converted from DOM objects, only the method of jquery can be used, and the same DOM object can only use the DOM object's methods.

var dEle = document.getelementsbytagname (' div ') [0]dele.classlist.add (' C2 ')// Dom Object Modify CSS  = $ (' div ') $dEle. addclass (' C2 ')//jquery object Modify CSS

V: The basic syntax of jquery

$ (selector). Action ()

5.1: Find Tags

Basic Selector

// ID Selector $ (// Tag Selector $(//class selector $ ("div.c1")  //  Find the div tag with the C1 class class $ ( // all element selectors $ ( /// Combo Selector

Hierarchy Selector

X and y can be any selector

$ ("x y"); // x All descendants of Y (descendants)$ ("x > Y"); // all sons of X Y (son)$ ("x + y")// Find all of the Y-$ ("x ~ y") immediately following the  x followed by all brothers y

Basic filters

// first one // last : eq (index)//  index equals that element of index//  matches all elements whose index value is even, starting from 0 counting // matches all elements with an odd index value starting at 0 : GT (Index)//  match all elements greater than the given index value : LT (index)//  Match all elements less than the given index value : not (element selector)//  Remove all tags that meet the not condition: has (element selector)//  Select all labels that contain one or more labels (referring to the descendant elements)

Example

$ ("Div:has (H1)")//  Find all descendants with a H1 tag in the div tag $ ("Div:has (. C1)")//  find the div tag with C1 style class in all descendants $ ("Li:not (. C1)")//  Find all Li tags that do not contain C1 style classes $ ("Li:not (: Has (a))")//  Find all descendants with an Li tag that does not contain a tag

Example: Customizing modal frames, using jquery for Popup and hide functions

<! DOCTYPE html>. cover {position:fixed; Left:0; Right:0; Top:0; Bottom:0; Background-Color:darkgrey; Z-index:999;      }. Modal {width:600px;      height:400px; Background-Color:white;      position:fixed; Left:50%; Top:50%; Margin-left:-300px; Margin-top:-200px; Z-index:1000;    }. Hide {display:none; }  </style> for= "I1" > Name </label> <input id= "I1" type= "text" > <label for= "I2" > Hobbies </label> <input id= "I2" type= "text" > <input type= "button" id= "i3" value= "Off" ></div ><script src= "Https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ></script><script>varTButton = $ ("#i0") [0]; Tbutton.onclick=function () {    varCoverele = $ (". Cover") [0]; varModalele = $ (". Modal") [0]; $ (Coverele). Removeclass ("Hide"); $ (Modalele). Removeclass ("Hide");  }; varCButton = $ ("#i3") [0]; Cbutton.onclick=function () {    varCoverele = $ (". Cover") [0]; varModalele = $ (". Modal") [0]; $ (Coverele). addclass ("Hide"); $ (Modalele). addclass ("Hide"); }</script></body>View Code
Property Selector
[Attribute][attribute=value] // property equals [Attribute!=value] // property is not equal to
Example
<input type= "text" ><input type= "password" ><input type= "checkbox" >$ ("input[type=" CheckBox '] "); // take the input label of the checkbox type $ ("input[type!= ' text ']"); // take the input label that is not of type text
Forms Common Filter
: Text:password:file:radio:checkbox:submit:reset:button
Form Object Properties
: enabled:disabled:checked:selected
Example
<form>  <input name= "email" disabled= "disabled"/>  <input name= "id"/></form>$ ( "input:enabled")  //  Find the available input tags

<select id= "S1" >  <option value= "Beijing" > Beijing </option>  <option value= "Shanghai" > Shanghai </option>  <option selected value= "Guangzhou" > Guangzhou </option>  <option value= "Shenzhen "> Shenzhen </option></select>$ (": Selected ")  //Find all selected option
Filter
Next element:
$ ("#id"). Next () $ ("#id"). Nextall () $ ("#id"). Nextuntil ("#i2")
Previous element:
$ ("#id"). Prev () $ ("#id"). Prevall () $ ("#id"). Prevuntil ("#i2")
Father elements:
$ ("#id"). Parent () $ ("#id"). Parents ()  //Find all parental elements of the current element
$ ("#id"). Parentsuntil ()//finds all the parent elements of the current element until the matching element is encountered.
Son and brother elements:
$ ("#id"). Children ();//sons $ ("#id"). siblings ();//Brothers
Find elements:
$ ("#id"). Find ()//searches all elements that match the specified expression. This function is a good way to find out the descendant elements of the element being processed.
Add:
. First ()//Gets a match for the element. Last ()//Gets the final match of the element. Not ()//The element that matches the specified expression is removed from the collection of matching elements. has ()//preserves elements containing specific descendants, removing those that do not contain the specified descendants.
Example: Left menu
<! DOCTYPE html>. Left {position:fixed; Left:0; Top:0; Width:20%; Height:100%; Background-color:rgb (47, 53, 61); }. Right {width:90D; Height:100%;    }. menu {color:white; }. title {text-Align:center;      padding:10px 15px; Border-bottom:1px solid #23282e; }. Items {background-color: #181c20;      }. Item {padding:5px 10px; Border-bottom:1px solid #23282e;    }. Hide {display:none; }  </style>  $(". Title"). Click (function(){//jquery Binding Event    //Hide all tags in class that have. Items$ (". Items"). AddClass ("Hide");//Bulk Operations$( This). Next (). Removeclass ("Hide"); });</script>
View Code5.2 Operating Labels
Style actions
AddClass ();//Add the specified CSS class name. Removeclass ();//Removes the specified CSS class name. Hasclass ();//Determine whether the style exists toggleclass ();//Toggle CSS class name, if any, remove, if not, add.
Example: Switching lights and modal frames
Css
CSS ("Color", "red")//dom operation: tag.style.color= "Red"
Example:
$ ("P"). CSS ("Color", "red"); Set the font of all P tags to red
Position:
Offset ()//Gets the relative offset of the matching element in the current window or sets the element position position ()//Gets the offset of the matching element relative to the parent element scrolltop ()//Gets the offset of the matching element relative to the top of the scrollbar scrollleft ()// Gets the offset to the left of the matching element relative to the scrollbar
Back to the top example
<! DOCTYPE html>. c1 {width:100px;      height:200px; Background-color:red;      }. c2 {height:50px;      width:50px;      position:fixed;      bottom:15px;      right:15px; Background-color: #2b669a;    }. Hide {display:none;    }. c3 {height:100px; }  </style>  $("#b1"). On ("click",function () {    $(". C1"). Offset ({left:200, top:200});  }); $ (window). Scroll (function () {    if($ (window). scrolltop () > 100) {      $("#b2"). Removeclass ("Hide"); }Else {      $("#b2"). AddClass ("Hide");  }  }); $("#b2"). On ("click",function() {$ (window). scrolltop (0); })</script></body>View Code
Size:
Height () width () innerheight () innerwidth () outerheight () Outerwidth ()
jquery Knowledge Collation