The summary of common knowledge points of jquery and the usual functions of _jquery

This article introduces jquery common knowledge points and functions, including a lot of details of knowledge, let's study together.

jquery provides us with a number of useful attributes, some of the common functions that we summarize ourselves. Personally think in the online disk development will be more commonly used, only for everyone to learn and reference.

Just start to learn the front end of the time to start sorting this document, now the content has gradually increased. Although it now looks like the contents of the document are very simple, looking at the content, it seems vaguely to remember the scene where the line of code was recorded. So I want to save this memory, for just contact the front of the children's shoes to provide a simple way to query, but also to cherish the memory of my front-end learning road.

* * * This document, I will continue to update * *
--------------------------------------------------------------------------------

jquery Common knowledge points

jquery effect

Hide/Show:

Hide/show (Speed,callback); Speed (empty/slow/fast/ms)
$ ("#hide"). Click (function () {
$ ("P"). Hide ();//hidden p tag;
$ ("P"). Show ()//display p= label;
};

Fade In/fade:

Fadein/fadeout (Speed,callback)
$ ("#click"). Click (function () {
$ (#div1). FadeIn ();//direct display;
$ ("#div2" ). FadeIn ("slow");//show slowly;
$ ("#div3"). FadeIn (3000);//3 seconds to display;
}

Sliding: Slidedown/slideup (speed,callback)

$ ("#click"). Click (function () {
$ (#div1). Slidedown ();//Direct slide;
$ ("#div2"). Slidedown ("slow");
$ ("#div3"). Slidedown (3000);///in 3 seconds of time slipping;
})

Animation:

$ (". Btn1"). Click (function () {
$ ("#box"). Animate ({
height: 300px), 
width: "300px"
}); Change the width height to 300px;
});

JQuery DOM

Get text value, property value:

<p id= "Test" > This is a paragraph of text <b> bold </b></p>
<input id= "input" value= "text value"/>

JS Code:

$ ("#test"). Text ()//Output "This is bold in a piece of text"
$ ("#test"). html ();//Output "This is <b> bold </b>"
$ ("#input") in a piece of text. Val ()//output "text value"
$ ("#a"). attr ("href");//output "http://...", get element property value

Set Text property values:

JS Code:

$ ("#test"). Text (');
$ ("#test"). html (');
$ ("#input"). Val (');
$ ("#a"). attr (' href ', ' xxx ');

To add an element:

$ ("#test"). Append ("<span> add text </span>";//Add this code at the end of the id=test tag
("#test"). Prepend ("<span> Add text </span>//Add this code at the beginning of the selected label
("#test"). After ("<span> add text </span>";//Add this code after the selected label
$ ("#test"). Before ("<span> add text </span>";//Add this code before the selected label

To delete an element:

$ ("#div1"). Remove ()//delete the selected element and all its child elements
$ ("#div1"). Empty ()//deletes all child elements of the selected element
$ ("#div1"). Remove (". Info");// Deletes a child element of the selected element with the class name info

Find elements:

$ ("#test"). Parent (); Returns the direct parent element of the selected element (just one);
$ ("#test"). Parents ();//return all ancestor elements of the selected element;
$ ("#test"). Children (empty/selector); Returns all the direct child elements (many) of the selected element when the value is NULL, returns a specific child element (just one) for the selector,
$ ("#test"). Find ('. AAA ');//Look for the element
$ ("#test") with the class name AAA under the test element. Next (); Returns the next sibling element of the selected element (only one);

Manipulating CSS:

Addclass/removeclass ("..."); Add/Remove class name
$ ("P") to the element. CSS ("color");//Returns the value of the color style property of the P element
$ ("P"). CSS ("Color", "red //sets the Color property of the P element to red
$ ("P"). css ({"Color": "Red", "font-size": "14px"});//Set multiple property values to P

JQuery AJAX:

jquery Ajax functions

I encapsulated an Ajax function by myself, and the code is as follows:

var Ajax = function (URL, success) {
$.ajax ({
url:url,
type: ' Get ',
dataType: ' json ',
timeout: 10000,
success:function (d) {
var data = D.data;
Success && success (data);
},
error:function (e) {
throw new error (E);}}
);
//Use method:
Ajax ('/data.json ', function (data) {
console.log (data);
});

Jsonp

Sometimes in order to cross the domain, to use the Jsonp method, I also encapsulate a function:

function Jsonp (config) {
var options = Config | | {}; You need to configure the URL, success, time, fail four properties
var callbackname = (' jsonp_ ' + math.random ()). Replace (".", "");
var ohead = document.getElementsByTagName (' head ') [0];
var oscript = document.createelement (' script ');
Ohead.appendchild (oscript);
Window[callbackname] = function (JSON) {//Create JSONP callback function
ohead.removechild (oscript);
Cleartimeout (Oscript.timer);
Window[callbackname] = null;
Options.success && options.success (JSON); Delete the script tag first, and actually execute the success function
};
OSCRIPT.SRC = Options.url + '? ' + callbackname; Send Request
if (options.time) {//Set timeout processing
Oscript.timer = settimeout (function () {
Window[callbackname] = null ;
Ohead.removechild (oscript);
Options.fail && options.fail ({message: "timeout"});
}, Options.time);
}; How to use:
jsonp ({
URL: '/b.com/b.json ',
success:function (d) {
//Data Processing
},
time:5000,
fail:function () {
//error handling
} 
});

Commonly used functions for encapsulation

$ (window). Scroll (function () {
var a = $ (window). scrolltop ();
if (a >) {
$ ('. Go-top '). FadeIn ();
} else {
$ ('. Go-top '). fadeout ();
}
});
$ (". Go-top"). Click (function () {
$ ("Html,body"). Animate ({scrolltop: "0px"}, ' n ');
});

Block Bubble function

function Stopbubble (e) {
e = e | | window.event; 
if (e.stoppropagation) { 
e.stoppropagation ();//w3c block Bubbling method 
}else { 
e.cancelbubble = true;//ie Block bubbling method 
} 
}

Get the "?" in the URL The object property value after

var geturlparam = function (name) {return
decodeuricomponent (new RegExp. | +] ' + name + ' = ' + ' ([^&;] +?) (&|#|;| $) ', "IG"). EXEC (Location.search) | | [, ""]) [1].replace (/\+/g, '%20 ')] | | null;
};

Deep Copy Objects

function Cloneobj (obj) {
var o = Obj.constructor = = Object new Obj.constructor (): New Obj.constructor (Obj.valueof () );
for (var key in obj) {
if (O[key]!= Obj[key]) {
if (typeof (Obj[key)) = = ' object ') {
O[key] = mods.cloneobj (obj[k EY]);
} else{
O[key] = Obj[key];
}
}
return o;
}

Generate random numbers

function Randombetween (Min,max) {return
min + (math.random () * (Max-min + 1));
}
Console.log (parseint (Randombetween (50,100)));

Other

Git common commands

1. git config user.name \ user.email//view current git user name, Mailbox
2, git clone https://github.com/jarson7426/javascript.git// Clone warehouse to Local.
3, modify the local code, submit to the branch: git add file \ git commit-m "new Files"
4, push the local library to the remote library: Git push Origin master
5, view submit log: Git log-5< C5/>6, return a version: Git reset--hard 123
7, create a branch: Git branch name \ git checkout name
8, Merge name branch to current branch: git merge name
9. Delete local branch: git branch-d name
10, remove remote branch: Git push Origin:d aily/x.x.x
11, git checkout-b mydev origin/daily/1.0.0/ /Map Remote Daily branch to local Mydev branch for development
12, Merge remote branch to current branch Git pull Origin daily/1.1.1
13, publish to line:
git tag publish/ 0.1.5
git push Origin publish/0.1.5:publish/0.1.5

The above content is small series to introduce the jquery commonly used knowledge point summary as well as usually encapsulate commonly used functions, hope to help everyone!