current position：Home>[jQuery framework (2), geek University architect training camp

[jQuery framework (2), geek University architect training camp

2021-08-27 01:52:33 【No hair loss Xiaoyi】

Hello！ How are you? , I'm grey ape , A super can write bug The program ape ！

In understanding jQuery Objects and JS The difference between objects and before conversion , Let's start with jQuery Framework for a simple introduction .

jQuery The concept of

=============

jQuery It's a fast one 、 concise JavaScript frame , Is the Prototype And then another excellent one JavaScript The code base （ or JavaScript frame ）.jQuery The purpose of the design yes “write Less,Do More”, That is to say, write less code , Do more . It encapsulates JavaScript Common function codes , Provides a simple JavaScript Design patterns , Optimize HTML The document operation 、 Event handling 、 Animation design and Ajax Interaction . It's used to simplify JS Development

And for JavaScript frame , In essence, they are some js file , Encapsulates the js The native code 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>


     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

3、jQuery Use

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  var divs = document.getElementsByTagName("div"); alert(divs.length); // You can use it as an array  // Yes divs All in div Let its label body content become “aaa” for (var i = 0;i<divs.length;i++){ // divs[i].innerHTML = "aaa" $(divs[i]).html("ccc") // take js object divs[i] Turn into jQuery object  } </script>

</body>

</html>




























































js To jQuery

Use “ $” The parenthesis of the character contains js object , Such as ：$ (js object )

Last

Give readers a small benefit , Friends who need this information You can click on me , It's free Collect information ！