jquery基础,隐藏 HTML 文档中所有的 <p> 元素

在WebRoot下建立jquery文件夹,添加jquery-2.0.3.js文件,添加script

1 <script type="text/javascript" src="jquery/jquery-2.0.3.js"></script>
2 <script type="text/javascript">
3     $(document).ready(function(){ //为了防止文档在完全加载(就绪)之前运行 jQuery 代码
4         $("button").click(function(){
5             $("p").hide(); //隐藏p标签
6         });
7     });
8 </script>

body主体:点击按钮隐藏p标签

1 <body>
2     <h2>this is a heading !</h2>
3     <p>this is a paragraph!</p>
4     <p>this is another paragraph!</p>
5     <button type="button">click me</button>
6   </body>

 也可直接点击p标签内容进行隐藏,script内容改为

1 <script>
2         $(document).ready(function(){
3             $("p").click(function(){
4                 $(this).hide();
5             });
6         });
7     </script>

如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件

 1 <!--使用 Google 的 CDN-->
 2 <head>
 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
 4 /jquery/1.4.0/jquery.min.js"></script>
 5 </head>
 6 <!--使用 Microsoft 的 CDN-->
 7 <head>
 8 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
 9 /jquery-1.4.min.js"></script>
10 </head>

jQuery 元素选择器,使用 CSS 选择器来选取 HTML 元素,CSS 选择器可用于改变 HTML 元素的 CSS 属性

$(this).hide()隐藏当前的 HTML 元素,$("p").hide()隐藏所有 <p> 元素,

 $(".test").hide()隐藏所有 class="test" 的元素,$("p.intro") 选取所有 class="intro" 的 <p> 元素

 $("#test").hide()隐藏 id="test" 的元素,$("p#demo") 选取所有 id="demo" 的 <p> 元素;

jQuery 属性选择器,使用 XPath 表达式来选择带有给定属性的元素

  jQuery 使用 XPath 表达式来选择带有给定属性的元素。

     $("[href]") 选取所有带有 href 属性的元素,$("[href='#']") 选取所有带有 href 值等于 "#" 的元素,

  $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素,$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

 

 

posted on 2013-10-24 19:46  李园春秋  阅读(1735)  评论(0编辑  收藏  举报

导航