jQuery The concept of
jQuery Quick start
1、 download jQuery
??? at present jQuery There are three major versions ：
1.x edition ： compatible ie678, The most widely used , At present, the government only does BUG maintain , No more features . So in general, for projects , Use 1.x The version will do , Final version ：1.12.4 (2016 year 5 month 20 Japan )
2.x edition ： Are not compatible ie678, Few people use , At present, the government only does BUG maintain , No more features . If you do not consider the compatibility of the lower version of the browser can use 2.x, Final version ：2.2.4 (2016 year 5 month 20 Japan )
3.x edition ： Are not compatible ie678, Only the latest browsers are supported . Unless otherwise required , Generally not used 3.x Version of , Many old jQuery The plug-in does not support this version . At present, this version is mainly updated and maintained by the official . The latest version can be found on the official website , Direct to the official website .
We are downloading and using jQuery You will find , There are usually two js file , One is to bring .min Of , The other is not carrying .min Of .
jquery-xxx.js And jquery-xxx.min.js difference ：
1. jquery-xxx.js： Development version . For programmers , Well indented and annotated . It's bigger
2. jquery-xxx.min.js： Production version . Used in program , No indent . Smaller size . The program loads faster
So we usually import the second one when we use it jquery-xxx.min.js Production version of
2、 Import JQuery Of js file
Import min.js file
After the html The header of the file is imported to the js Link to file , As shown below ：
<head> <meta charset="UTF-8"> <title>jquery Quick start </title> <script src="js/jquery-3.3.1.min.js"></script> </head>
We use jQuery When getting an element object , have access to “$()” As a selector , Get the content in the label body . Use... Respectively jQuery And don't use jQuery Get tag content , Make a practical comparison .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery Quick start </title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1">div1...</div> <div id="div2">div2...</div> <script> // adopt jQuery Object to get the specified ID object var div1 = $("#div1"); var div2 = $("#div2"); // adopt alert Output the result （ With jQuery Get the value in the form of ） alert(div1.html()); alert(div2.html()); /** * Here's not to use jQuery Methods * */ // Don't use jQuery Get specified ID object var div3 = document.getElementById("div1"); var div4 = document.getElementById("div2"); // Don't use jQuery Get element content alert(div3.innerHTML); alert(div4.innerHTML); </script> </body> </html>
jQuery Objects and JS Object differentiation and transformation
Compared with JS object ,jQuery Objects are more convenient to operate , The code is more concise
** But here's the thing ：jQuery Objects and JS Object's method is not universal ,** So if we want to be in jQuery Use in js Method , Or in the js Use in jQuery How to do it ？
therefore , Let's share with you jQuery Objects and JS The transformation of objects
jQuery To js
Use jQuery object [ Indexes ] perhaps jQuery object .get( Indexes ) take jQuery Object to js object , You can use js Methods .
Detailed use of the following code ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery and js The transformation of objects </title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1">div1...</div> <div id="div2">div2...</div> <script> /** * jQuery To js * */ //1、 adopt js It's called div All of the html Element object # summary Above knowledge points , It includes the mainstream application technologies of current Internet enterprises and what can make you “ The bestselling ” Advanced architecture knowledge , Almost every note contains actual combat content . ** Many people worry that learning is easy to forget , Here's a way to teach you , That is repeated learning .** For example , If you're learning spring annotation , Suddenly I found an annotation @Aspect, I don't know what to do , You may check the source code or learn from a blog , It took half an hour to figure it out , Next time I see @Aspect 了 , You're a little depressed , It seems that I studied there last time , It took you five minutes to quickly open a web page and learn again . ** Data collection method ： Get it free of charge here ** From the comparison of half an hour and five minutes, we can find that learning more is a step closer to mastering knowledge . !(https://s2.51cto.com/images/20210808/1628421498692614.jpg) Human nature is easy to forget , Only by constantly impressing 、 Repeat learning can really master , So I recommend you to read many books . There are so many geniuses , He just read more books than you . !(https://s2.51cto.com/images/20210808/1628421498724120.jpg)