jquery删除，停止，获取设置css,设置内容和属性，过滤

Arce

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jquery删除实验</title>
    <script src="../js/jquery-1.4.2.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
      /*
       * 删除元素/内容
       * 如需删除元素和内容，一般可使用以下两个 jQuery 方法：
       * remove() - 删除被选元素（及其子元素）
       * empty() - 从被选元素中删除子元素
       */
      //jQuery remove() 方法删除被选元素及其子元素。
      $(document).ready(function(){
        $("#btn1").click(function(){
          $("#div1").remove();
        });
      //jQuery empty() 方法删除被选元素的子元素。
        $("#btn2").click(function(){
          $("#div1").empty();
        });
        
      /*
       * 过滤被删除的元素
       * jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
       * 该参数可以是任何 jQuery 选择器的语法。
       * 下面的例子删除 class="italic" 的所有 <p> 元素：
       */
      $("#btn3").click(function(){
        $("p").remove(".italic");
      });
        
      });
    </script>
  </head>
  <body>
    <div id="div1" style="height:300px;width:600px;border:1px solid black;background-color:yellow;">
      This is some text in the div.
      <p>This is a paragraph in the div.</p>
      <p>This is another paragraph in the div.</p>
      <p class="italic"><i>This is another paragraph in the div.</i></p>
      <p class="italic"><i>This is another paragraph in the div.</i></p>
    </div><br />
    
    <button id="btn1">删除 div 元素</button>
    <button id="btn2">清空 div 元素</button>
    <button id="btn3">删除 class="italic" 的所有 p 元素</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>stop实验测试</title>
    <script src="../js/jquery-1.4.2.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
      /*
       * jQuery 动画 - animate() 方法
       * jQuery animate() 方法用于创建自定义动画。
       * 语法：$(selector).animate({params},speed,callback);
       * 必需的 params 参数定义形成动画的 CSS 属性。
       * 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
       * 可选的 callback 参数是动画完成后所执行的函数名称。
       */
      $(document).ready(function(){
          $("#start").click(function(){
          $("div").animate({left:'100px'},5000);
          $("div").animate({fontSize:'3em'},5000);
          });
  
          $("#stop").click(function(){
          $("div").stop();
          });
          $("#stop2").click(function(){
          $("div").stop(true);
          });
          $("#stop3").click(function(){
            $("div").stop(true,true);
          });
  
      });
    </script>
  </head>
  <body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止但要完成</button>
    <p><b>"开始"</b> 按钮会启动动画。</p>
    <p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
    <p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
    <p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jquery获取并设置css类</title>
    <link href="../css/jquery-ui-1.9.2.custom.css" />
    <script src="../js/jquery-1.4.2.js"></script>
    <script src="../js/jquery-1.8.3.js"></script>
    <script>
      /*
       * jQuery 操作 CSS
       * jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
       * addClass() - 向被选元素添加一个或多个类
       * removeClass() - 从被选元素删除一个或多个类
       * toggleClass() - 对被选元素进行添加/删除类的切换操作
       * css() - 设置或返回样式属性
       */
      $(document).ready(function(){
        //下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
        $("#btn1").click(function(){
          $("h1,h2,p").addClass("blue");
          $("div").addClass("important");
        });
        //jQuery removeClass() 方法  
        //下面的例子演示如何不同的元素中删除指定的 class 属性
        $("#btn2").click(function(){
          $("h1,h2,p").removeClass("blue");
        });
        
        //jQuery toggleClass() 方法
        //下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
        $("#btn3").click(function(){
          $("h1,h2,p").toggleClass("blue");
        });
      });
    </script>
    <style type="text/css">
      .important
      {
        font-weight:bold;
        font-size:xx-large;
      }
      .blue
      {
        color:blue;
      }
    </style>
  </head>
  <body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <div>这是非常重要的文本！</div>
    <br>
    <button id="btn1">向元素添加类</button><br />
    <button id="btn2">从元素上删除类</button><br />
    <button id="btn3">切换 CSS 类</button><br />
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jquery过滤</title>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../js/jquery-1.4.2.js"></script>
    <script>
      /*(缩写搜索元素的范围
      三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
      其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
      */
      
      /*jQuery first() 方法
      first() 方法返回被选元素的首个元素。
      下面的例子选取首个 <div> 元素内部的第一个 <p> 元素
      */
      $(document).ready(function(){
        $("div p").first().css("background-color","yellow");
        /*
         * jQuery last() 方法
         * last() 方法返回被选元素的最后一个元素。
         * 下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：
         */
        $("div p").last().css("background-color","red");
        
        /*
         * jQuery eq() 方法
         * eq() 方法返回被选元素中带有指定索引号的元素。
         * 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
         */
        $("p").eq(1).css("background-color","yellow");
        
        
        /*
         * jQuery filter() 方法
         * filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
         * 下面的例子返回带有类名 "intro" 的所有 <p> 元素：
         * 
         * jQuery not() 方法
         * not() 方法返回不匹配标准的所有元素。
         * 提示：not() 方法与 filter() 相反。
         * 下面的例子返回不带有类名 "intro" 的所有 <p> 元素：
         * 
         */
        
        
      });
    </script>
  </head>
  <body>
    <h1>欢迎来到我的主页</h1>
    <div>
      <p>这是 div 中的一个段落。</p>
    </div>
    
    <div>
      <p>这是 div 中的另一个段落。</p>
      <p>这也是段落。</p>
      <p>这也是段落。</p>
      <p>这也是段落。</p>
      <p>这也是段落。</p>
      <p>这也是段落。</p>
      <p>这也是段落。</p>
    </div>
    <p>这也是段落。</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jquery设置内容和属性</title>
    <script src="../js/jquery-1.4.2.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
      /*
       * 设置内容 - text()、html() 以及 val()
       * 我们将使用前一章中的三个相同的方法来设置内容：
       * text() - 设置或返回所选元素的文本内容
       * html() - 设置或返回所选元素的内容（包括 HTML 标记）
       * val() - 设置或返回表单字段的值
       * 下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
       */
      $(document).ready(function(){
          $("#btn1").click(function(){
          $("#test1").text("Hello world!");
          });
          
          $("#btn2").click(function(){
          $("#test2").html("<b>Hello world!</b>");
          });
          
          $("#btn3").click(function(){
          $("#test3").val("Dolly Duck");
          });
          /*
           * 设置属性 - attr()
           * jQuery attr() 方法也用于设置/改变属性值。
           * 下面的例子演示如何改变（设置）链接中 href 属性的值：
           */
          $("button#btn4").click(function(){
          $("#w3s2").attr({
            "href" : "http://www.w3school.com.cn/jquery/",
            "title" : "W3School jQuery 教程"
          });
          });
      });
    </script>
  </head>
  <body>
    <p id="test1">这是段落。</p>
    <p id="test2">这是另一个段落。</p>
    <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    <p><a href="http://www.w3school.com.cn" id="w3s2">W3School.com.cn</a></p>
    <button id="btn4">改变 href 和 title 值</button>
    <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p>
  </body>
</html>

一纸高中万里风，寒窗读破华堂空。莫道长安花看尽，由来枝叶几相同？

[jQuery] jquery删除，停止，获取设置css,设置内容和属性，过滤

相关帖子

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

好看的CSS剪裁GIF背景图片动画特效

Win便捷工具常用设置软件

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

css3怎样设置子元素居中的方法

react如何引入css

阿里云盘获取refresh_token方法

Arce LV4