使用jQuery获取html元素并进行简单操作

首先这里，我们需要新建一个jQuery项目，在js里面把jQuery复制过来，复制这个就好了：

像这样就OK了，然后在代码里面引入。

然后就看代码叭：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <Meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 7         <script type="text/javascript">
 8             //第一种方法
 9             // function init(){
10             //     alert("init");
11             // }
12             // $(init);  //用来指定网页加载完成后要执行的函数
13             
14             //第二种方法
15             // $(function(){
16             //     console.log("init");
17             // });
18             $(function(){
19                 $("#one").show();  //使用jQuery使id为one里面的内容显示
20                 //上面这行代码：$("#one")会返回一个jQuery对象。总的来说，第一步：获取；第二步：操作
21                 //它的实际作用就相当于把display:none修改为了display:block
22             });
23             
24         </script>
25     </head>
26     <body>
27         <div id="one" style="display: none;">
28             你想要的未来，在你不愿做出的改变里。
29         </div>
30     </body>
31 </html>

还有一些别的方法，像这个：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <Meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 7         <script type="text/javascript">
 8             
 9             $(function(){
10                 $("#one").text("别忘了向往的未来，别苟且于忙碌的现在。");  //使用text修改里面的内容
11             });
12         </script>
13     </head>
14     <body>
15         <div id="one">
16             
17         </div>
18     </body>
19 </html>

使用jQuery获取html元素并进行简单操作

相关文章