Home > Article > Web Front-end > jQuery implements div display, hiding and text filling
When using native JavaScript programming, we found that it has many shortcomings: for example, it is inconvenient to obtain elements, and sometimes it is necessary to traverse. There may be nesting in the traversal, which makes the code more cumbersome and has poor tolerance. Today I will lead you to use jQuery to implement your first web page.
(1) Use HTML layout page
1) Create project Pro_01, create a web page under the project, name it index.html;
2) In the HTML page Add three buttons;
<input type="button" value="显示" id="show" /> <input type="button" value="隐藏" id="hide" /> <input type="button" value="内容填充" id="text"/>
3) Add three DIV tags to the HTML page;
<div></div> <div></div> <div></div>
(2) Use CSS to beautify the page
1) Create under this project css folder;
2) Create a css file, name it style.css, and import the file before the 36cc49f0c466276486e50c850b7e4956 tag in index.html.
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>3) Add page style under the style.css file
Global style
*{
margin: 0;
padding: 0;
}div style
div{
width:500px;
height:100px;
border:1px solid #a5b6c8;
background:#eef3f7;
display: none;
}4) Press F12 to browse the page effect.
(3) Introduce the jQuery file
1) Download the jquery-3.5.1.js file from the official website (https://jquery.com/download/);
2) After the download is completed, create a js folder under the project and put the downloaded jquery-3.5.1js file into the js folder;
Note: The jQuery version used in this case is 3.5.1 , in this case, the jQuery library file is placed under the folder js. To facilitate debugging, a relative path is used.
3) Introduce the file before the 36cc49f0c466276486e50c850b7e4956 tag in index.html.
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
(4) Effect implementation
1) Create the 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 tag before the 36cc49f0c466276486e50c850b7e4956 tag on the index.html page;
(2) Write the entry function in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 tag
$(document).ready(function(){
});Note:
The difference between jQuery entry function and JavaScript entry function:
The entry function of jQuery will be executed after all HTML tags (DOM) are loaded.
The window.onload event of JavaScript waits until all content, including files such as external images, is loaded before it is executed.
(3) Register the event under the entry function
Display
$('#show').click(function(){
$("div").show();
});Hide
$('#hide').click(function(){
$("div").hide();
}Text Fill
$('#text').click(function(){
$("div").text("内容填充");
});(4) 按F12浏览页面效果。Note: If you do not want to download and store jQuery, then It can also be referenced through a CDN (Content Delivery Network). Staticfile CDN, Baidu, Youpaiyun, Sina, Google and Microsoft all have jQuery on their servers. If your site users are domestic, it is recommended to use domestic CDN addresses such as Baidu, Youpaiyun, Sina, etc. If your site users are foreign, you can use Google and Microsoft. For example, if you want to use Baidu's CDN, you can use the following method:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
The above is the detailed content of jQuery implements div display, hiding and text filling. For more information, please follow other related articles on the PHP Chinese website!