Summary of using skills of jquery
Various source codes 2020-11-26 05:36:32
One 、 brief introduction
1.1、 summary
With WEB2.0 And ajax The rapid development and dissemination of ideas on the Internet , There have been some excellent ones Js frame , One of the more famous ones is Prototype、YUI、jQuery、mootools、Bindows And domestic JSVM Frame, etc , By putting these JS The application of the framework to our project enables programmers to design and write complex JS Free from the application , Focus on functional requirements rather than implementation details , So as to improve the development speed of the project .
jQuery Is the prototype And then there was another excellent Javascript frame . It is from John Resig On 2006 Created at the beginning of the year , It helps to simplify JavaScript? as well as Ajax Programming . Some people use such a metaphor to compare prototype and jQuery:prototype It's like Java, and jQuery It's like ruby. It's a simple, fast and flexible JavaScript frame , It allows you to easily manipulate documents on your web page 、 Handling events 、 To achieve special effects and for Web Page add Ajax Interaction .
It has the following characteristics :
1、 The code is concise 、 The meaning is easy to understand 、 Learn fast 、 The document is rich .
2、jQuery It's a lightweight script , The code is very small , the latest version JavaScript It's just 20K about .
3、jQuery Support CSS1-CSS3, And basic xPath.
4、jQuery It's cross browser , The browsers it supports include IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+.
5、 It can be very easy for jQuery Extend other features .
6、 Be able to make JS Code and HTML The code is completely separate , Easy to code and maintain and modify .
7、 Rich plug-ins , except jQuery In addition to some special effects , More functions can be achieved through plug-ins , Such as form validation 、tab Navigation 、 Drag and drop effect 、 Table sorting 、DataGrid, Tree menu 、 Image effects and ajax Upload, etc .
jQuery The design will change you write JavaScript The way the code works , Reduce your learning to use JS The complexity of operating a web page , Improve the web page JS Development efficiency , No matter for js A beginner or a senior expert ,jQuery Will be your first choice .
jQuery For designers 、 Developers and enthusiasts , Also suitable for commercial development , so to speak jQuery Suitable for any JavaScript Where to apply , Can be used for different Web In the application .
The official site :http://jquery.com/ Chinese site :http://jquery.org.cn/
1.2、 Purpose
By studying this document , Can be right jQuery There is a simple understanding of , clear JQuery And others JS Different frames , master jQuery Common syntax 、 Tips and precautions .
Two 、 Usage method
In need of use JQuery In the page of JQuery Of js File can .
for example :<script type="text/javascript" src="js/jquery.js"></script>
Once introduced, it can be used anywhere on the page jQuery Provided grammar .
3、 ... and 、 Study tutorials and reference materials
Please refer to 《jQuery chinese API manual 》 and http://jquery.org.cn/visual/cn/index.xml
Two good ones are recommended jquery course :《jQuery The starting point of the tutorial 》 and 《 Use jQuery simplify Ajax Development 》
( explain : All the above documents are in 【 The attachment 】 in )
Four 、 Grammar summary and notes
1、 References to page elements
adopt jquery Of $() Reference elements include through id、class、 The name of the element and the hierarchy of the element dom perhaps xpath Conditions, etc , And the returned object is jquery object ( A collection of objects ), Can't call directly dom Method of definition .
2、jQuery Object and the dom Object conversion
Only jquery Objects can only be used jquery Method of definition . Be careful dom Objects and jquery Objects are different , When calling a method, pay attention to the operation of dom The object is still jquery object .
ordinary dom Objects can generally be passed through $() convert to jquery object .
Such as :$(document.getElementById("msg")) Then for jquery object , have access to jquery Methods .
because jquery The object itself is a collection . So if jquery Object to be converted to dom Object must take out one of them , Generally, it can be retrieved by index .
Such as :$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5] These are all dom object , have access to dom The method in , But it can't be used anymore Jquery Methods .
The following expressions are correct :
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、 How to get jQuery An item of a set
For the collection of acquired elements , Get one of these ( Specify by index ) have access to eq or get(n) Method or index number , it is to be noted that ,eq The return is jquery object , and get (n) And the index returns dom Element object . about jquery Object can only use jquery Methods , and dom Object can only use dom Methods , To get a third < div> Content of element . There are two ways :
$("div").eq(2).html(); // call jquery Object method
$("div").get(2).innerHTML; // call dom Method properties of
4、 The same function implements set and get
Jquery Many of the methods in are like this , It mainly includes the following :
$("#msg").html(); // return id by msg Element node of html Content .
$("#msg").html("<b>new content</b>");
// take “<b>new content</b>” As html String write id by msg In the element node content of , The page shows bold new content
$("#msg").text(); // return id by msg The text content of the element node of .
$("#msg").text("<b>new content</b>");
// take “<b>new content</b>” Write as a normal text string id by msg In the element node content of , The page shows bold <b>new content</b>
$("#msg").height(); // return id by msg The height of the elements of
$("#msg").height("300"); // take id by msg The height of the element of is set to 300
$("#msg").width(); // return id by msg The width of the element of
$("#msg").width("300"); // take id by msg The width of the element of is set to 300
$("input").val("); // Return to the form input box value value
$("input").val("test"); // Input the form into the box value Value to test
$("#msg").click(); // Trigger id by msg The click event of the element of
$("#msg").click(fn); // by id by msg Click event add function
Again blur,focus,select,submit Events can have two call methods
5、 Set processing function
about jquery The content of the returned collection does not need to be iterated and processed separately for each object ,jquery We have provided a very convenient method for the processing of sets .
There are two forms :
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
// The indexes are as follows 0,1,2 Of p Elements set different font colors .
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
// To achieve the color effect of the table
$("p").click(function(){alert($(this).html())})
// For each p Elements have been added click event , Click on a p The element pops up its content
6、 Expand the functionality we need
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); // by jquery Expanded min,max Two methods
Using an extended approach ( adopt “$. Method name ” call ):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7、 Support method linking
The so-called hyphenation , That is to say, you can deal with a jquery Object continuously calls various methods .
for example :
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});
8、 The style of the operation element
It mainly includes the following ways :
$("#msg").css("background"); // Returns the background color of the element
$("#msg").css("background","#ccc") // Set the element background to gray
$("#msg").height(300); $("#msg").width("200"); // Set the width and height
$("#msg").css({ color: "red", background: "blue" });// Set the style as a name value pair
$("#msg").addClass("select"); // Add the name of the element to select Of class
$("#msg").removeClass("select"); // Delete the element name as select Of class
$("#msg").toggleClass("select"); // If there is ( non-existent ) Just delete ( add to ) The name is select Of class
9、 Perfect event handling function
Jquery We have been provided with a variety of event handling methods , We don't need to be in html Write events directly on the element , And it can be done directly by jquery Get the object to add the event .
Such as :
$("#msg").click(function(){alert("good")}) // Added click event for element
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})
// For three different p Element click events set different processing
jQuery Several custom events in :
(1)hover(fn1,fn2): A simulated hover event ( Move the mouse over and out of an object ) Methods . When the mouse moves over a matching element , Will trigger the first function specified . When the mouse moves out of this element , Will trigger the specified second function .
// When the mouse is over a row in the table, put class Set as over, Set to when you leave out.
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
(2)ready(fn): When DOM Load ready to query and manipulate when bound to a function to be executed .
$(document).ready(function(){alert("Load Success")})
// Page loading finished prompt “Load Success”, amount to onload event . And $(fn) Equivalent
(3)toggle(evenFn,oddFn): Switch the function to be called every time you click . If you click on a matching element , Trigger the first function specified , When clicking the same element again , Trigger the specified second function . Each subsequent click repeats the call to these two functions .
// Each click alternates the addition and deletion of names named selected Of class.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
(4)trigger(eventtype): Trigger a certain type of event on each matching element .
for example :
$("p").trigger("click"); // Trigger all p Elemental click event
(5)bind(eventtype,fn),unbind(eventtype): Event binding and unbonding
From every matching element ( add to ) Delete bound Events .
for example :
$("p").bind("click", function(){alert($(this).text());}); // For each p Element add click event
$("p").unbind(); // Delete all p All events on the element
$("p").unbind("click") // Delete all p The click event on the element
10、 Several practical special effects functions
among toggle() and slidetoggle() Method provides state switching function .
Such as toggle() Methods include hide() and show() Method .
slideToggle() Methods include slideDown() and slideUp Method .
11、 Some useful jQuery Method
$.browser. Browser type : Check browser type . Effective parameter :safari, opera, msie, mozilla. For example, whether the test is ie:$.browser.isie, yes ie The browser returns true.
$.each(obj, fn): General iterative functions . Can be used to approximate iterate objects and arrays ( Instead of cycling ).
Such as
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
Equivalent to :
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr);
}
Can also be handled json data , Such as
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
The result is :
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN): Extend an object with one or more other objects , Returns the extended object . This is a jquery The inheritance method of implementation .
Such as :
$.extend(settings, options);
// Merge settings and options, And return the merged result to settings in , amount to options Inherit setting Inherit and save the results in setting in .
var settings = $.extend({}, defaults, options);
// Merge defaults and options, And return the merge result to setting Medium but not covered default Content .
Can have multiple parameters ( Merge multiple items and return )
$.map(array, fn): An array of map . Put the items in an array ( After processing the conversion ) Save to another new array , And return the generated new array .
Such as :
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr The content is :[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr The content is :[2,3]
$.merge(arr1,arr2): Merge two arrays and remove duplicate items from them .
Such as :$.merge( [0,1,2], [2,3,4] ) // return [0,1,2,3,4]
$.trim(str): Remove white space at both ends of a string .
Such as :$.trim(" hello, how are you? "); // return "hello,how are you? "
12、 Solve custom methods or other class libraries with jQuery The conflict of
A lot of times we define ourselves $(id) Method to get an element , Or something else js Class libraries such as prototype They all define $ Method , If these contents are put together at the same time, it will cause the variable method definition conflict ,Jquery There are specific methods for solving this problem .
Use jquery Medium jQuery.noConflict(); Method can be used to change the variable $ To the first library that implements it, or a previously customized one $ Method . Later application Jquery When all the $ Switch to jQuery that will do , As the original reference object method $("#msg") Change it to jQuery("#msg").
Such as :
jQuery.noConflict();
// Start using jQuery
jQuery("div p").hide();
// For other purposes $()

$("content").style.display = 'none';

From the original :http://www.cnblogs.com/lijieblog/archive/2012/12/05/2802623.html

jquery Summary of using skills

版权声明
本文为[Various source codes]所创,转载请带上原文链接,感谢
https://fheadline.com/2020/11/20201126053401676d.html
相似文章

2021-08-09