jQuery implements div display, hiding and text filling-JS Tutorial-php.cn

jQuery implements div display, hiding and text filling

善始善终

Release： 2020-08-27 14:03:00

Original

2153 people have browsed it

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"/>

Copy after login

3) Add three DIV tags to the HTML page;

<div></div>
<div></div>
<div></div>

Copy after login

(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 tag in index.html.

<head>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>

Copy after login

3) Add page style under the style.css file

Global style

*{
       margin: 0;
       padding: 0;
}

Copy after login

div style

div{
        width:500px;
       height:100px;
       border:1px solid #a5b6c8;
       background:#eef3f7;
       display: none;
    }

Copy after login

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 tag in index.html.

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>

Copy after login

(4) Effect implementation

1) Create the <script></script> tag before the tag on the index.html page;

(2) Write the entry function in the <script></script> tag

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

Copy after login

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

$(&#39;#show&#39;).click(function(){
   $("div").show();
});

Copy after login

Hide

$(&#39;#hide&#39;).click(function(){
   $("div").hide();
}

Copy after login

Text Fill

$(&#39;#text&#39;).click(function(){
    $("div").text("内容填充");
});(4) 按F12浏览页面效果。

Copy after login

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>

Copy after login

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!