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

<!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>

 

posted @ 2019-07-17 14:43  薄眠抛却陈年事。  阅读(777)  评论(0编辑  收藏  举报