jquery Basics and CSS and property manipulation other functions

jquery syntax using jquery you must first import the selector $ ("selector name") in the Jquery-x.x.x.js file jquery. function name (); note $ is the abbreviation for jquery, that is, the selector can use jquery (": Input") JQuery Document-Ready function

$ (document). Ready (function() {    //jquery code    console.log ($ (": Input: Disabled "),});

Shorthand document-ready function $ (function () {}) the difference between jQuery and window.onload window.onload must wait until the page resource is fully loaded to execute the document-ready function just wait until the page DOM structure is loaded. You can execute window.onload only once in a page the document-ready function may have n jquery objects and JS objects using $ ("") to fetch the node as a jquery object in a page, only the jquery method cannot be used, and the native JS method ("# Div1 "). Click (function () {}), correct $ (" #div1 "). Onclick=function () {}; Error using jquery invoke native JS similarly use the GetElement series function to take the JS object, You can also call the jquery function jquery object and the JS object to convert the jquery object to the JS object using the. Get (index) or [index] selection is the JS object

$ ("div") [0].onclick (function() {}), $ ("div"). Get (0). onclick (function() {});

JS object to jquery object using $ wrap JS Object

var div=document.getelementsbytagname ("div"); $ (div). Click (function() {});

Solving the jquery multi-Library Conflict Problem page if you introduce multiple JS frames at the same time may result in a conflict resolution using jquery.noconflict (); make jquery discard in global use use the jquery keyword instead of $ or use a self-executing function

! function ($) {// in the self-executing function, you can use & instead of jquery// Other areas other than self-executing functions to prohibit jquery from using $} (JQuery);

CSS and property manipulation Settings node properties

$ ("#div1"). attr ("Class", "CLS")

Incoming objects set multiple-pair properties in the form of key-value pairs

$ ("#div1"). attr ({
})

Modify the CSS style by returning the value from the callback function.

 $ ("button:eq (0)"). Click (function   () { /span>var  id = setinterval (function   () {$ ( #div1 "" Width ": function   (index,value) {var  v = parsefloat (value) + 1;  if  (V>600 return  v+ "px" ;            }                });        },  10

Take to Node properties

Console.log ($ ("#div1"). attr ("id"));

Delete Node Properties

$ ("#div1"). Removeattr ("class")

attr, like prop, can read and set the difference between the attr and the prop when the property name = property value is read, ATTR returns the property value and undefined prop returns TRUE or false that is, attr the property to be fetched, Must be a property already stated on the label, otherwise return undefined

Console.log ($ ("Input:eq (0)"). attr ("disabled")) Console.log ($ ("Input:eq (0)"). Prop ("Disabled"))

Add a class name based on the original class if there is no class attribute, it will be added automatically

$ ("#div1"). AddClass ("CLS")

Delete the specified class name, and the other class names that are not deleted are retained if the deletion will leave only the class attribute

$ ("#div1"). Removeclass ("CLS")

Switch class If there is a specific class to delete if there is no new

$ ("Button:eq (0)"). Click (function() {$ ("#div1"). Toggle ("Div1")})

The. HTML takes or sets the HTML code in the node. Text to or sets the literal in the node. Val fetch or set value values in the node

Console.log ($ ("#div1"). HTML ("<p>555</p>"). html ()) Console.log ($ ("#div1"). Text ("<p> 555</p> "). Text ()) Console.log ($ (" input "). Val (" <p>6666</p> "

. css add CSS styles to a node belong to row-level style sheet permissions

$ ("#div1"). CSS ("Color", "#008000")

Add multiple-pair CSS styles to multiple nodes at the same time

$ ("#div1"). CSS (function() {"color": "#008000" "font-size": "20px"})

Take or set the width of the node

$ ("#div1"). Width ("400px")$ ("#div1"). Height (400)

The width of the node +padding does not contain border and margin

$ ("#div1"). Innerheight () $ ("#div1"). Ininnerwidth ()

The non-pass parameter indicates that the width high +padding +border passed in true means that the width is high +padding +border+margin

Console.log ($ ("#div1"). Outerheight ()) Console.log ($ ("#div1"). Outerwidth (true))

Returns the offset of a node relative to the upper-left corner of the browser, returning an object {top:20px left:20px}

Console.log ($ ("#div1"). Offset ())

Returns the offset of a node relative to the parent container note ① Use this method to require that the parent element must be an anchor element if the parent container is not an anchored element, it is still measured relative to the upper-left corner of the browser ② when using this method to measure offsets, margin is considered to be part of the current container regardless of margin

Console.log ($ ("#div1"). Position ())

ScrollTop Sets or takes the position of the vertical scroll bar of the specified node

$ ("#div1"). ScrollTop ()

Position of horizontal scroll bar

$ ("#div1"). ScrollLeft ()

Each used to traverse the number of objects in jquery is used in the callback function Returnfalse equivalent to breakreturntrue equivalent to continue

$ ("#ul Li"). each (function(index,value) {console.log (index) Console.log ($) (value). Text ())

In the callback function, this points to the node object that is currently calling the function this is a JS object, use $ (this) if you want to use the JQ object

Console.log (this) $ (this). Text ($ (value). Text () + "QQQ")})

. Size (). Length returns the number of queried arrays

Console.log ($ ("#ul li"). Size ()) Console.log ($ ("#ul li"). Length)

. Get () The JQuery object, into the JS object into the index to take out the first few, and to the JS object does not pass parameters, that is, all the objects in jquery, to the JS object

Console.log ($ ("#ul Li"). Get ())

$.each (arr, obj,function () {}) iterates over an incoming array or object, either as an array of jquery objects or as an array and an object in JS

$.each ($ ("Li"),function(index,value) {         console.log (index) Console.log (value)    })

Array mappings

var arr=[1,2,3,4]var newarr=$.map (arr,function(index,value) {  return value+5;}) Console.log (newarr)

Detects if a value is in the array, returns the subscript, no return-1 The third parameter indicates the starting subscript for the lookup

var arr=[1,2,3,4]var is=$. Array (2,arr,3) Console.log (Arr.indexof (2,3)) Console.log (IS)

Restores the selected jquery Dom collection to the array, where each object is a JS object

Console.log ($ ("#ul li"). ToArray ())

Merging two arrays

var arr=$.merge ([0,1,2], [2,3,4]) console.log (arr)

$.parsejson () converts a JSON string into a JSON object

var str= ' {"" "" "" "" "" "" "" "" "" "" "" "": "" "": ""} 'Console.log (str) console.log ($.parsejson (str))});

Detects if a node contains another node

Console.log ($.contains ($ ("#ul") [0],$ ("#li") [0]) console.log ($.contains ($ ("#li") [0],$ ("#ul") [0])

jquery Basics and CSS and property manipulation other functions