• 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" 结尾的元素。

  • 相关阅读:
    函数終探------匿名函数
    再探函数2---函数的嵌套与装饰器
    无需触摸芯片的触摸电路
    单芯片移动电源方案——1A同步升压5V--TP4351B
    HTML列表元素
    HTML表格元素
    HTML基本元素
    创建HTML5文档
    HTML5环境安装
    windows本地搭建https环境,tomcat使用https协议
  • 原文地址:https://www.cnblogs.com/xiaochaozi/p/3386123.html
Copyright © 2020-2023  润新知