JQuery common knowledge points and common functions encapsulated at ordinary times, jquery knowledge points

JQuery common knowledge points and common functions encapsulated at ordinary times, jquery knowledge points

This article introduces common knowledge points and functions in jQuery, including many details. Let's take a look at them.

JQuery provides many useful attributes for us and summarizes some common functions. I personally think that online disk layout development will be more commonly used for your learning and reference only.

At the beginning of learning the front-end, I began to sort out this document, and now the content has gradually increased. Although it seems that the content in the document is very simple, it seems that I still vaguely remember the recorded scenes of this line of code. So I want to save this memory and provide a simple query method for front-end children's shoes, so as to remember my front-end learning path.

** This document will be updated continuously **
--------------------------------------------------------------------------------

Common jquery knowledge points

Jquery Effect

Hide/display:

Hide/show (speed, callback); speed (null/slow/fast/millisecond) $ ("# hide "). click (function () {$ ("p "). hide (); // hide the p tag; $ ("p "). show (); // display p = tag ;});

Fade in/out:

FadeIn/fadeout (speed, callback) $ ("# click "). click (function () {$ ("# div1 "). fadeIn (); // directly display; $ ("# div2 "). fadeIn ("slow"); // slowly display; $ ("# div3 "). fadeIn (3000); // displayed in 3 seconds ;})

Slide: slideDown/slideUp (speed, callback)

$ ("# Click "). click (function () {$ ("# div1 "). slideDown (); // a direct decline; $ ("# div2 "). slideDown ("slow"); // slow down; $ ("# div3 "). slideDown (3000); // slide in 3 seconds ;})

Animation:

$ (". Btn1 "). click (function () {$ ("# box "). animate ({height: "300px", width: "300px"}); // change the width to 300px ;});

JQuery DOM

Obtain the text value and attribute value:

<P id = "test"> <B> bold </B> </p> <input id = "input" value = "text value"/> <a id = "a" href = "http: //... "> </a>

Js Code:

$ ("# Test "). text (); // The output character is the crude character ("##test”).html (); // The output "this is <B> bold </B> in a text segment" $ ("# input "). val (); // output "text value" $ ("# "). attr ("href"); // output "http ://... ", get the element property value

Set text property values:

Js Code:

$(“#test”).text('');$(“#test”).html('');$(“#input”).val('');$(“#a”).attr('href','xxx');

Add element:

$ ("# Test "). append ("<span> Add text </span>"; // Add this code at the end of the tag id = test $ ("# test "). prepend ("<span> Add text </span>"; // Add this code at the beginning of the selected tag $ ("# test "). after ("<span> Add text </span>"; // Add this code after the selected tag $ ("# test "). before ("<span> Add text </span>"; // Add this code before the selected tag

Delete element:

$ ("# Div1 "). remove (); // Delete the selected element and all its child elements $ ("# div1 "). empty (); // delete all child elements of the selected element $ ("# div1 "). remove (". info); // Delete the child element of the selected element's class name: info

Search element:

$ ("# Test "). parent (); // returns the direct parent element of the selected element (only one); $ ("# test "). parents (); // returns all ancestor elements of the selected element; $ ("# test "). children (null/selector); // if the value is null, all direct child elements (many) of the selected element are returned. If the value is a selector, the special child element (only one) is returned ); $ ("# test "). find ('. aaa'); // search for an element named aaa under the test element $ ("# test "). next (); // return the next compatriot element of the selected element (only one );

Operation css:

AddClass/removeClass ("…"); // Add/delete a class name (“p”).css ("color"); // adjust ("color", "red"); // set the color of the P element to red (“p”).css ({"color": "red ", "font-size": "14px"}); // set multiple attribute values for p at the same time

JQuery AJAX:

Jquery ajax Functions

I encapsulated an ajax function by myself. 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) ;}}; // usage: ajax ('/data. json', function (data) {console. log (data );});

Jsonp:

Sometimes we use the jsonp Method for cross-origin purposes. I also encapsulate a function:

Function jsonp (config) {var options = config | |{}; // the url, success, time, and fail attributes 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 the jsonp callback function oHead. removeChild (oScript); clearTimeout (oScript. timer); window [callbackN Ame] = null; options. success & options. success (json); // Delete the script tag first. The success function is actually executed.}; oScript. src = options. url + '? '+ CallbackName; // send the request if (options. time) {// set timeout to process oScript. timer = setTimeout (function () {window [callbackName] = null; oHead. removeChild (oScript); options. fail & options. fail ({message: "timeout"}) ;}, options. time) ;}}; // usage: jsonp ({url: '/B .com/ B .json', success: function (d) {// data processing}, time: 5000, fail: function () {// error handling }});

Encapsulated common functions

$(window).scroll(function() {var a = $(window).scrollTop();if(a > 100) {$('.go-top').fadeIn();}else {$('.go-top').fadeOut();}});$(".go-top").click(function(){$("html,body").animate({scrollTop:"0px"},'600');});

Blocking the bubble Function

Function stopBubble (e) {e = e | window. event; if (e. stopPropagation) {e. stopPropagation (); // W3C blocking Bubble Method} else {e. cancelBubble = true; // IE blocking the Bubble Method }}

Obtain "?" in the url Object property value after

var getURLParam = function(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;};

Deep copy object

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[key]);}else{o[key] = obj[key];}}}return o;}

Generate random number

function randombetween(min,max){return min + (Math.random() * (max-min +1));}console.log(parseInt(randombetween(50,100)));

Others

Common git commands

1. git config user. name \ user. email // view the current git user name, mailbox 2, git clone https://github.com/jarson7426/javascript.git // clone repository to local. 3. Modify the local code and submit it to the branch: git add file \ git commit-m "add file" 4. Push the local database to the remote database: git push origin master5, view commit log: git log-56, return a version: git reset -- hard 1237, create Branch: git branch name \ git checkout name8. merge the name branch to the current branch: git merge name9. Delete the local branch: git branch-d name10. Delete the remote branch: git push origin: daily/x. x. x11, git checkout-B mydev origin/daily/1.0.0 // map the remote daily branch to the local mydev branch for Development 12, merge the remote branch to the current branch git pull origin daily/1.1.113, publish to production: git tag publish/0.1.5git push origin publish/0.1.5: publish/0.1.5

The above content is a summary of common jQuery knowledge points and commonly used functions are encapsulated. I hope to help you!

Articles you may be interested in:

• JQuery (1) essential knowledge of jquery Selector
• Jquery Knowledge Point 1: differences between Jquery ready and Dom onload
• Jquery knowledge point 2 jquery operations on Arrays
• Jquery knowledge point 3 jquery form object operations
• Detailed description of knowledge points in the validation Library Based on jQuery. Validate
• JQuery knowledge point sorting
• Summary of common js + jquery knowledge points
• JQuery traversal function details
• How to add a user-defined function in jQuery
• Summary of examples of commonly used traversal functions in jQuery