使用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对象到底是什么？其实啊，jQuery对象是一个伪数组，可以测试，它具有length属性，还有0-length-1的特点。

 

posted @ 2021-02-14 17:48  EvanTheBoy  阅读(655)  评论(0)    收藏  举报