inotgo.com

Download area
File name File size
jquery.min.js 81k

Tool version compatibility problem
JQuery It's a javascript The framework of , Yes javascript A package for .

Through JQuery It can be operated very conveniently html Elements of


This example passes JQuery realization " Hide and show ", And explain the meaning of each step step step by step
Correct

Example 1 : use JQuery Hide and show   
Example 2 : jquery.min.js   
Example 3 : How to use when testing locally jquery.min.js   
Example 4 : understand $(function(){})   
Example 5 : Through id Get element   
Example 6 : Add a listener   
Example 7 : Hide and show   

Operation effect
<script src="/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").hide(); }); $("#b2").click(function(){ $("#d").show(); }); }); </script> <button id="b1"> Hide div</button> <button id="b2"> Show div</button> <br> <br> <div id="d"> This is a div </div>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
To use Jquery You need to import a third-party javascript Library jquery.min.js, You can download... On the right
<script src="/study/jquery.min.js"></script>
<script src="/study/jquery.min.js"></script>
Example 3 :

How to use when testing locally jquery.min.js

edit top fracture
Because so far , I haven't explained how to build web The server , So it can't be like the demonstration on this website hold jquery.min.js Put it in /study/jquery.min.js This place .
So how to test locally ?
1. First download... On the right jquery.min.js
2. hold jquery.min.js And tested html Put it in the same directory
3. In the test html Write directly in src="jquery.min.js"
 How to use when testing locally  jquery.min.js
Example 4 :

understand $(function(){})

edit top fracture

$(function(){
});

Indicates that the document is loaded . It looks a little complicated , It is actually composed of the following two :

$();


function(){
}

Merging together is :

$(function(){
});

This is to prevent the document from loading completely ( be ready ) Run before jQuery code .
let me put it another way , Written here JQuery The code is after the document is loaded .
There will be no problem of getting an image that has not been loaded yet .
Same function , There is another way to write

$(document).ready(function(){
});

It also consists of two parts

$(document).ready();


function(){
}
Operation effect
<script src="/study/jquery.min.js"></script> <script > $(function(){ document.write(" The document was loaded successfully !"); document.close(); }); </script>
<script src="/study/jquery.min.js"></script>

<script >

$(function(){
  document.write(" The document was loaded successfully !");
  document.close();
});

</script>



Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
With javascript Through id Get element node The way (document.getElementById ) Different
JQuery Through $("#id") You can get


It should be noted that , Through document.getElementById What we get is DOM In the Element node
And through $("#id") What you get is a JQuery Object
reference resources DOM Element node of With JQuery Object interchange
Operation effect
<script src="/study/jquery.min.js"></script> <script > $(function(){ document.write( $("#d") ); document.close(); }); </script> <div id="d">Hello JQuery</div>
<script src="/study/jquery.min.js"></script>

<script >

$(function(){
  document.write( $("#d") );
  document.close();
});

</script>

<div id="d">Hello JQuery</div>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
JQuery Add click Event monitoring

$("#b1").click(function(){
alert(" Click the button ");
});

This is also composed of two parts :
1. b1 Button click event

$("#b1").click();

2. Function of pop-up dialog box

function(){
alert(" Click the button ");
}

And native javascript need stay html Add listening events on the element The difference is
JQuery You don't need to be in html Element
The advantage is ,html Just display the content , Especially after the business is complex, maintenance js The code will be easier .
Operation effect
<script src="/study/jquery.min.js"></script> <script > $(function(){ $("#b1").click(function(){ alert(" Click the button "); }); }); </script> <button id="b1"> Button </button>
<script src="/study/jquery.min.js"></script>

<script >

$(function(){
     $("#b1").click(function(){
        alert(" Click the button ");
     });
});

</script>

<button id="b1"> Button </button>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
Through $("#d") Get div After the object , Call directly hide() and show() method , You can hide and display .
Operation effect
<script src="/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").hide(); }); $("#b2").click(function(){ $("#d").show(); }); }); </script> <button id="b1"> Hide div</button> <button id="b2"> Show div</button> <br> <br> <div id="d"> This is a div </div>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect


The official account of programming , Follow and get the latest tutorials and promotions in real time , thank you .


Q & A area    
2021-03-08 Suggest
DK_afei

The stationmaster can get out JQuery EasyUI and Vue EasyUI My tutorial , Or recommend which of these two is better







The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




2020-10-21 You can find resources here
Carmine

https://www.bootcdn.cn/




2 One answer

up-bear
Answer time :2021-04-25
thank you

The smiling face in the mirror
Answer time :2021-04-01
https://jquery.com/download/



The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




2020-10-21 Don't want to download JQuery, You can also add this code to head in
2020-05-09 Share one IDEA Download jquery.min.js File method
2020-05-06 a


Too many questions , Page rendering is too slow , To speed up rendering , Only a few questions are displayed on this page at most . also 15 Previous questions , please Click to view

Please... Before asking questions land
The question has been submitted successfully , Auditing . Please My question Check the question record at , thank you
about Front end part -JQuery-Hello JQuery Your questions

Try to provide Screenshot code and Abnormal information , Help to analyze and solve problems . You can also enter this station QQ Group communication : 496725845
Ask questions and try to provide complete code , Environment description , The more conducive to the recurrence of the problem , The faster your question can be answered .
Have questions about the code in the tutorial , Please provide which step , Which line is in doubt , This makes it easy to quickly locate the problem , Improve the speed at which questions are answered
In the thousands of questions that already exist , A considerable proportion , Because of the use of and webmaster Different versions of the development environment Resulting in , For example jdk, eclpise, idea, mysql,tomcat Wait, the version of the software is inconsistent .
Please use the same version as the webmaster , You can save yourself a lot of learning time . The webmaster sorted out the software versions used in teaching , It's all here , Convenient for everyone to download : /k/helloworld/helloworld-version/1718.html

Upload screenshot