current position:Home>[jQuery framework (1), introduction to Java zero foundation, baidu cloud

[jQuery framework (1), introduction to Java zero foundation, baidu cloud

2021-08-27 01:52:37 No hair loss Xiaoyi

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>


     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.

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>


     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.

js To jQuery


Use “ ” The parenthesis of the character contains j s object , Such as : ” The parenthesis of the character contains js object , Such as : (js object )

It can be used later jQuery The method of the ,

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>


#  Pleasantly surprised 

 Finally, I prepared a set of interview questions corresponding to the above materials ( There's an answer ) And the high-frequency interview algorithm questions during the interview ( If the interview preparation time is not enough , Then concentrate on these algorithm problems , Hit rate 85%+)

![image.png](https://s2.51cto.com/images/20210823/1629692500957065.jpg)


![image.png](https://s2.51cto.com/images/20210823/1629692500812638.jpg)

**[ Data acquisition method : Get it free of charge here ](https://gitee.com/vip204888/java-p7)**
     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

copyright notice
author[No hair loss Xiaoyi],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827015235288e.html

Random recommended