微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐