 |
|
Tool version compatibility problem
JQuery It's a javascript The framework of , Yes javascript A package for .
Correct
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 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
<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>
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>
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" $(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(){ }
<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>
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
<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>
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 .
<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>
Through $("#d") Get div After the object , Call directly hide() and show() method , You can hide and display .
<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>
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
The answer has been submitted successfully , Auditing . Please
My answer Check the answer record at , thank you
2020-10-21
You can find resources here
2 One answer
up-bear Jump to the problem location Answer time ：2021-04-25
thank you
The smiling face in the mirror Jump to the problem location 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
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
|
|||||||||||||||||||||||
