jQuery_03_操作HTML和CSS

最新推荐文章于 2021-02-18 17:43:25 发布
最新推荐文章于 2021-02-18 17:43:25 发布
阅读量344 收藏
点赞数 1
分类专栏： # jQuery 文章标签： jQuery HTML DOM CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pre_eminent/article/details/79783944
版权


jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使 访问和操作 元素和属性 变得很容易。

lampDOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型  独立于平台和语言的界面，

允许  程序和脚本  动态  访问和更新  文档的内容、结构以及样式。"


获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的  文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回  表单字段的值

下面的例子演示如何通过 jQuery   text() 和 html() 方法来获得内容：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <p id="id_p_hana">那朵<b>花</b></p>
        <input name="girlname" type="text" value="mathilda" />
        <a id="id_a_hana" href="http://baidu.com/s?wd=anohana">あの花</a>
        
        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $(".class_btn_green").click(
                        function() {
                            // jQuery对象
                            var pHanaObject = $("#id_p_hana");
                            NSLog("text: " + pHanaObject.text());
                            NSLog("html: " + pHanaObject.html());
                            // name属性的值是girlName的元素
                            var inputNameObject = $("[name='girlname']");
                            NSLog("val: " + inputNameObject.val());
                            // 获取属性值
                            var aObject = $("#id_a_hana");
                            NSLog("href: " + aObject.attr("href"));
                            
                        }
                );
                
            }
        );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>text()、html()、val()和attr()
        </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>


效果如下:


核心代码:

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得  输入的表单字段的值：

核心代码:

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});


获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

实例

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

下一章会讲解如何设置（改变）内容和属性值。


jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

  • text() -   设置或返回   所选元素的  文本内容

  • html() -  设置或返回  所选元素的内容（包括 HTML 标记）

  • val() -    设置或返回  表单字段的值value

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <button id="id_btn_read" class="class_btn class_btn_green" type="button" >读取元素</button>
        <button id="id_btn_assign" class="class_btn class_btn_green" type="button" >设置元素</button>
        <p id="id_p_hana">那朵<b>花</b></p>
        <input name="girlname" type="text" value="mathilda" />
        <a id="id_a_hana" href="http://baidu.com/s?wd=anohana">あの花</a>
        
        <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 添加点击事件
                $("#id_btn_read").click(
                        function() {
                            // jQuery对象
                            var pHanaObject = $("#id_p_hana");
                            NSLog("text: " + pHanaObject.text());
                            NSLog("html: " + pHanaObject.html());
                            // name属性的值是girlName的元素
                            var inputNameObject = $("[name='girlname']");
                            NSLog("val: " + inputNameObject.val());
                            // 获取属性值
                            var aObject = $("#id_a_hana");
                            NSLog("href: " + aObject.attr("href"));
                            
                        }
                );

                // 添加点击事件
                $("#id_btn_assign").click(
                        function() {
                            // jQuery对象
                            var pHanaObject = $("#id_p_hana");
                            // 设置html
                            pHanaObject.html("<b style='color:teal;'>那朵花</b>")
                            // name属性的值是girlName的元素
                            var inputNameObject = $("[name='girlname']");
                            // 设置value
                            inputNameObject.val("lolita");

                            // a标签
                            var aObject = $("#id_a_hana");
                            // 设置text
                            aObject.text("anohana");
                            // 设置href
                            aObject.attr("href","http://baidu.com/s?wd=あの花");
                            
                        }
                );
                
            }
        );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>text()、html()、val()和attr()
        </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("#btn1").click(function(){ 
  $("#test1").text("Hello beyond!"); 
}); 
$("#btn2").click(function(){ 
  $("#test2").html("<b>Hello beyond!</b>"); 
}); 
$("#btn3").click(function(){ 
  $("#test3").val("mathilda"); 
});


text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。

回调函数由两个参数：被选元素列表中  当前元素的下标，以及原始（旧的）值。

对于参数1的理解是: 有可能选择器选择出来的不只一个元素哈~

然后以  函数新值  返回(return)您希望使用的新的字符串。


下面的例子演示带有 回调函数 的 text() 和 html()：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <b style="color:red;">text演示:</b><p id="id_p_zh">我们仍未知道<b style="color:teal;">那年夏天</b>所见到的<b style="color:teal;">花的名字</b></p>
        
        <b style="color:red;">html演示:</b><p id="id_p_jp">あの日見た<b style="color:purple;">花の名前</b>を僕達はまだ知らない</p>
        

        <button id="id_btn_readText" class="class_btn class_btn_green" type="button" >读写text</button>

        <button id="id_btn_readHtml" class="class_btn class_btn_green" type="button" >读写html</button>

        <script type="text/javascript">
            $(document).ready(
                function() {
                    // 绑定点击
                    $("#id_btn_readText").click(
                        function() {
                            // 设置p的text,参数是一个函数
                            // 该函数的参数1是 index
                            // 该函数的参数2是 old内容
                            // 该函数的返回值是 要设置的new 内容
                            $("#id_p_zh").text(
                                function(index,oldText) {
                                    //
                                    NSLog("index: " + index + "\nold text: " + oldText);
                                    // 返回新的,要设置的txt
                                    return "那朵花";
                                }
                            );
                        }
                    );

                    // 绑定点击
                    $("#id_btn_readHtml").click(
                        function() {
                            // 设置p的html,参数是一个函数
                            // 该函数的参数1是 index
                            // 该函数的参数2是 old内容
                            // 该函数的返回值是 要设置的new 内容
                            $("#id_p_jp").html(
                                function(index,oldHtml) {
                                    //
                                    NSLog("index: " + index + "\nold html: " + oldHtml);
                                    // 返回新的,要设置的 html
                                    return "<b style='color:green;'>あの</b>";
                                }
                            );
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>text()、html()、val()和attr()<br/>
            回调函数演示
        </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("#btn1").click(function(){ 
  $("#test1").text(function(i,origText){ 
    return "Old text: " + origText + " New text: Hello world! 
    (index: " + i + ")"; 
  }); 
}); 

$("#btn2").click(function(){ 
  $("#test2").html(function(i,origText){ 
    return "Old html: " + origText + " New html: Hello <b>world!</b> 
    (index: " + i + ")"; 
  }); 
});


设置属性 - attr("属性名","属性值")

jQuery attr() 方法也用于 设置/改变 属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

核心代码:

$("button").click(function(){ 
  $("#id_p").attr("href","//www.baidu.com/jquery"); 
});

attr() 方法也允许您 同时设置多个属性。使用对象即可

下面的例子演示如何同时设置 href 和 title 属性：

实例

$("button").click(function(){ 
  $("#id_a").attr({ 
    "href" : "//www.baidu.com/jquery", 
    "title" : "jQuery 教程" 
  }); 
});


attr("属性名",匿名函数) 的回调函数

jQuery 方法 attr()，也提供回调函数。

回调函数由2个参数：

1.被选元素列表中  当前该元素所处的下标，

2.以及原始（旧的）值。

然后以函数新值return返回您希望设置成的新的属性值。

下面的例子演示带有回调函数的 attr() 方法：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <b style="color:red;">修改 属性值 演示:</b><br/><a id="id_a" href="menma.png" target="_self">我们仍未知道<b style="color:teal;">那年夏天</b>所见到的<b style="color:teal;">花的名字</b></a><br/>
        

        <button id="id_btn_setAttr" class="class_btn class_btn_green" type="button" >修改1个</button>

        <button id="id_btn_setAttrs" class="class_btn class_btn_green" type="button" >修改2个</button>
        <button id="id_btn_setAttrCallBack" class="class_btn class_btn_green" type="button" >回调修改</button>

        <script type="text/javascript">
            $(document).ready(
                function() {
                    // 绑定点击
                    $("#id_btn_setAttr").click(
                        function() {
                            // 修改1个属性
                            $("#id_a").attr("href","http://localhost/html_157.html");
                        }
                    );

                    // 绑定点击
                    $("#id_btn_setAttrs").click(
                        function() {
                            // 同时修改2个属性,参数是对象
                            $("#id_a").attr({
                                "href": "http://localhost/html_499.html",
                                "target": "_blank"
                            });
                        }
                    );
                    // 绑定点击
                    $("#id_btn_setAttrCallBack").click(
                        function() {
                            // 回调修改,参数1是要修改的属性名,参数2是函数
                            // 函数的参数1是:被选元素列表中  当前该元素所处的下标
                            // 参数2:old 属性值
                            // 返回值: 欲使用的新的属性值
                            $("#id_a").attr("href",
                                function(index,oldAttrValue) {
                                    NSLog("index: " + index + "\nold attr value: " + oldAttrValue);
                                    // 返回欲使用的新的属性值
                                    return "http://127.0.0.1/form_get.html";
                                }
                            );
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>text()、html()、val()和attr()<br/>
            回调函数演示
        </p>
        <footer id="copyright">
            
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("button").click(function(){ 
  $(" #id_a").attr("href", function(index,origValue){ 
    return origValue + "/jquery"; 
  }); 
});

相关文章

对于 jQuery，具有操作 DOM 的能力很重要。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易：

详细内容请参考本文附录的“jQuery - DOM 操作”部分的内容


attr() 方法设置或返回被选元素的属性和值。

当该方法用于  返回属性值，则返回 第一个匹配元素的值。

当该方法用于  设置属性值，则为匹配元素设置一个或多个属性/值对。

语法

返回属性的值：

$( selector).attr( attribute)

设置属性和值：

$( selector).attr( attribute,value)

使用 属性名 + 回调函数 来  设置属性和值：

$( selector).attr( attribute,function( index,currentvalue))

如果参数是对象, 则可设置多个属性和值：

$( selector).attr({ attribute: value, attribute: value,...})

参数描述
attribute规定属性的名称。
value规定属性的值。
function(index,currentvalue)规定要返回属性值到集合的函数
  • index - 接受集合中元素的 index 位置。
  • currentvalue - 接受被选元素的当前属性值。

jQuery - 添加元素

通过 jQuery，可以很容易地 添加 新元素/内容。

添加新的 HTML 内容

我们将学习用于 添加 新内容的四个 jQuery 方法：

  • append() - 在被选元素内部的结尾插入指定  子元素内容
  • prepend() - 在被选元素内部的开头插入指定 子元素内容
  • after() - 在被选元素之后插入   兄弟元素内容
  • before() - 在被选元素之前插入 兄弟元素内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <p id="id_p_result">那朵花</p>

        <button class="class_btn class_btn_green" type="button" >append追加</button>


        <script type="text/javascript">
            var i = 0;
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 
                            var element = "<b>"+ ++i +"</b>"
                            $("#id_p_result").append(element);
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>append()追加子元素演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("p").append("Some appended text.");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <p id="id_p_result">那朵花</p>

        <button class="class_btn class_btn_green" type="button" >prepend追加</button>


        <script type="text/javascript">
            var i = 0;
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 
                            var element = "<b>"+ ++i +"</b>"
                            $("#id_p_result").prepend(element);
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>prepend()在 内部开头 追加子元素演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("p").prepend("Some prepended text.");

通过 append() 和 prepend() 方法添加若干新的子元素

append() 和 prepend() 方法能够通过参数接收无限数量的新的子元素。

我们可以提前通过 jQuery 来 生成 新的子文本/HTML（就像上面的例子那样），

也可以 通过 JavaScript 代码和 DOM 元素 来生成 新的子文本/html。


在下面的例子中，我们创建若干个新子元素。

这些新的子元素可以提前 通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。

然后我们通过 append() 方法  把这些新的子元素追加到文本中（对 prepend() 同样有效）：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <p style="background-color:rgba(255,181,197,0.5);" id="id_p_result">那朵花</p>

        <button class="class_btn class_btn_green" type="button" >append追加</button>


        <script type="text/javascript">
            
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 
                            var element_1 = "<p>1.龙与虎</p>"
                            var jQueryObject = $("<p></p>");
                            var element_2 = jQueryObject.text("2.食梦者");
                            var element_3 = document.createElement("p");
                            element_3.innerHTML = "3.轻音少女";
                            // 一次性添加n个
                            $("#id_p_result").append(element_1,element_2,element_3);
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>append()在 内部结尾 追加子元素演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

function appendText() 
{ 
var txt1="<p>Text.</p>";               // 使用 HTML 标签创建文本  
var txt2=$("<p></p>").text("Text.");   // 使用 jQuery 创建文本 
var txt3=document.createElement("p");   
txt3.innerHTML="文本。";                //  使用 DOM 创建文本 text with DOM 
$("p").append(txt1,txt2,txt3);         // 追加新元素 
}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后  插入 新的兄弟元素 内容。

jQuery before() 方法在被选元素之前  插入  新的兄弟元素 内容。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <p style="background-color:rgba(255,181,197,0.5);" id="id_p_result">那朵花</p>

        <button class="class_btn class_btn_green" type="button" >after追加</button>


        <script type="text/javascript">
            var i = 0;
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 
                            var element = "<b>"+ ++i +"</b>"
                            $("#id_p_result").after(element);
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>after()追加新的兄弟元素演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:




实例

$("img").after("在后面添加新的兄弟文本 元素"); 

$("img").before("在前面添加新的兄弟文本元素");


通过 after() 和 before() 方法添加若干新的兄弟元素

after() 和 before() 方法能够通过参数接收无限数量的新的兄弟元素。

可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新的兄弟元素。

在下面的例子中，我们创建若干新的兄弟元素。

这些新的兄弟元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。

然后我们通过 after() 方法把这些新的兄弟元素插到文本中（对 before() 同样有效）：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <p style="background-color:rgba(255,181,197,0.5);" id="id_p_result">那朵花</p>

        <button class="class_btn class_btn_green" type="button" >after追加</button>


        <script type="text/javascript">
            
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 
                            var element_1 = "<p>1.龙与虎</p>"
                            var jQueryObject = $("<p></p>");
                            var element_2 = jQueryObject.text("2.食梦者");
                            var element_3 = document.createElement("p");
                            element_3.innerHTML = "3.轻音少女";
                            // 一次性添加n个
                            $("#id_p_result").after(element_1,element_2,element_3);
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>after()在 后面 追加新的兄弟元素演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


实例

function afterText() 
{ 
var txt1="<b>I </b>";                    // 使用 HTML 创建元素  
var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素 
var txt3=document.createElement("big");  // 使用 DOM 创建元素 
txt3.innerHTML="jQuery!"; 
$("img").after(txt1,txt2,txt3);          // 在图片后添加文本 
}

提示：在jQuery中，append/prepend 是在选择元素内部插入子元素，

而after/before 是在元素外面追加兄弟元素。


jQuery - 删除元素 

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() - 删除 被选元素（及其内部的子元素）
  • empty() - 只删除   被选元素中  内部的子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="中国成人教育网-免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <div id="id_div_container" style="height:100px;border:1px solid gray;background-color:rgba(0,0,0,0.8);">
            <p style="background-color:rgba(255,181,197,0.8);color:white;">那朵花</p>
        </div>

        <button class="class_btn class_btn_green" type="button" >remove删除</button>


        <script type="text/javascript">
            
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // remove,删除元素及其后代
                            $("#id_div_container").remove();
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>remove()是删除该元素,及其子元素
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("#div1").remove();

jQuery empty() 方法

jQuery empty() 方法  只是清空  被选元素的 内部的所有子元素。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
       
        <div id="id_div_container" style="height:100px;border:1px solid gray;background-color:rgba(0,0,0,0.8);">
            <p style="background:rgba(255,181,197,0.8);color:white;" >那朵花</p>
            <p style="background-color:rgba(255,181,197,0.8);color:white;" >龙与虎</p>
        </div>

        <button class="class_btn class_btn_green" type="button" >empty清空</button>


        <script type="text/javascript">
            
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // empty,只是清空元素内部的子元素
                            $("#id_div_container").empty();
                        }
                    );
                }
            );
        </script>

        <p class="sgcenter">
            <b>注意:</b>empty()只是清空 该元素内部的子元素
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p name="anime">龙与虎</p>
        <p name="anime">轻音少女</p>
        <p name="girl" style="color:red;">面码</p>
        <p name="girl" style="color:red;">赫萝</p>
        <button class="class_btn class_btn_green" type="button" >remove先过滤再删除</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // remove,删除元素及其后代
                            $("p").remove("[name=anime]");
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>remove()是删除该元素,及其子元素<br/>
            remove()还可以通过参数进行过滤
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


实例

$("p").remove(".italic");


jQuery - 获取并设置 CSS 类

通过 jQuery，可以很容易地对 CSS 元素进行操作。切换 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

  • addClass() - 向被选元素添加  一个或多个类 用空格格开

  • removeClass() - 从被选元素删除  一个或多个类  用空格格开

  • toggleClass() - 对被选元素进行  添加/删除  类  的切换操作

  • css() - 设置或返回样式属性

实例样式表

下面的  样式表  将用于本页的所有例子：

.class_anime
{
font-weight:bold;
font-size:x-large;
}

.class_girl
{
color:red;
}


jQuery addClass() 方法

下面的例子展示如何  向不同的元素  添加 class 属性。

当然，在添加类时，您也可以 通过 逗号 选取多个元素：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <div name="anime">
            食梦者
        </div>
        <p name="anime">龙与虎</p>
        <p name="anime">轻音少女</p>
        <p name="girl">面码</p>
        <p name="girl">赫萝</p>
        <div name="girl">
            古城荆棘王
        </div>
        <button class="class_btn class_btn_green" type="button" >addClass</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 用分号分隔,给多个添加元素添加类
                            $("div[name=anime],p[name=anime]").addClass("class_anime");
                            // 用分号分隔,给多个添加元素添加类
                            // 可简写成$("[name=girl]")
                            $("div[name=girl],p[name=girl]").addClass("class_girl");
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>addClass()
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("button").click(function(){
  $("h1,h2,p").addClass("class_girl");
  $("div").addClass("class_anime");
});

您也可以在 addClass() 方法中,用 空格分隔 添加多个类：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <div name="anime">
            食梦者
        </div>
        <p name="anime">龙与虎</p>
        <p name="anime">轻音少女</p>
        <p name="girl">面码</p>
        <p name="girl">逢坂大河</p>
        <div name="girl">
            艾拉
        </div>
        <button class="class_btn class_btn_green" type="button" >addClass,同时添加多个类,用空格分隔</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 同时添加多个类,用空格分隔
                            $("[name=girl]").addClass("class_girl class_anime");
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>addClass(),同时添加多个类,用空格分隔
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("button").click(function(){
  $("#div1").addClass("important blue");
});


jQuery removeClass() 方法

下面的例子演示如何在 不同的元素 中删除指定的 class 属性：

可同时移除多个class,用空格分隔即可

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <div name="anime" class="class_anime">
            食梦者
        </div>
        <p name="anime" class="class_anime">龙与虎</p>
        <p name="anime" class="class_anime">轻音少女</p>
        <p name="girl" class="class_girl">面码</p>
        <p name="girl" class="class_girl">逢坂大河</p>
        <div name="girl" class="class_girl">
            艾拉
        </div>
        <button class="class_btn class_btn_green" type="button" >removeClass</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 同时移除多个类,用空格分隔
                            $("div,p").removeClass("class_anime class_girl");
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>removeClass(),同时移除多个类,用空格分隔
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");  // 可同时移除多个类,用空格分隔即可
});

jQuery toggleClass() 方法 

下面的例子将展示如何使用 jQuery toggleClass() 方法。

该方法对被选元素进行添加/删除类的切换操作：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <div name="anime" class="class_anime">
            食梦者
        </div>
        <p name="anime" class="class_anime">龙与虎</p>
        <p name="anime" class="class_anime">轻音少女</p>
        <p name="girl" class="class_girl">面码</p>
        <p name="girl" class="class_girl">逢坂大河</p>
        <div name="girl" class="class_girl">
            艾拉
        </div>
        <button class="class_btn class_btn_green" type="button" >removeClass</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 同时移除多个类,用空格分隔
                            $("div[name],p[name]").toggleClass("class_anime class_girl");
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>toggleClass(),添加与移除进行切换,多个类请用空格分隔
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");  // 多个class可用空格分隔
});


 jQuery - css() 方法 

jQuery css() Method

css() 方法  设置或返回  被选元素的  一个或多个  样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法:

css(" propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        <button class="class_btn class_btn_green" type="button" >查看css样式</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 同时移除多个类,用空格分隔
                            var cssStyle = $("h1").css("background-color");
                            NSLog("背景色: " + cssStyle);
                            var textShadow = $("h1").css("text-shadow");
                            NSLog("text-shadow: " + textShadow);
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>css(),设置或返回一个或多个css样式
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css(" propertyname"," value");

下面的例子将为所有匹配元素设置 background-color 值：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        <button class="class_btn class_btn_green" type="button" >设置css样式</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 同时移除多个类,用空格分隔
                            var cssStyle = $("body").css("background-color","black").css("color","white");
                        }
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>css(),设置或返回一个或多个css样式
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("p").css("background-color","teal");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

参数只有1个对象

css({" propertyname":" value"," propertyname":" value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        <button class="class_btn class_btn_green" type="button" >设置css样式</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            // 同时移除多个类,用空格分隔
                            var cssStyle = $("body").css({
                                        "background-color" : "black",
                                        "color" : "white"
                                    }
                                );
                            }
                        
                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>css(),设置或返回一个或多个css样式
            <br/>
            设置多个css样式时,参数只有1个对象
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery - 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法：

  • width()   单纯的content width 
  • height()  单纯的content height
  • innerWidth()   盒子内部的空间(content + padding)
  • innerHeight()  盒子内部的空间(content + padding)
  • outerWidth()   盒子的大小(content + padding + border)
  • outerHeight()  盒子的大小(content + padding + border)
  • outerWidth(true)  盒子的大小 + margin
  • outerHeight(true)  盒子的大小 + margin

jQuery 尺寸

jQuery Dimensions

jQuery width() 和 height() 方法

width() 方法 设置或返回 元素的content宽度（不包括内边距padding、边框border或外边距margin）。

height() 方法 设置或返回 元素的content高度（不包括内边距padding、边框border或外边距margin）。

下面的例子返回指定的 <div> 元素的宽度和高度：

核心代码:

$("button").click(function(){ 
  var txt=""; 
  txt+="Width: " + $("#div1").width() + "</br>"; 
  txt+="Height: " + $("#div1").height(); 
  $("#div1").html(txt); 
});

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回:  元素的content宽度 + 内边距 padding 之后的盒子内部空间宽度。

innerHeight() 方法返回: 元素的content高度 + 内边距 padding 之后的盒子内部空间高度。

下面的例子返回指定的 <div> 元素的 inner-width/height：

核心代码:

$("button").click(function(){ 
  var txt=""; 
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; 
  txt+="Inner height: " + $("#div1").innerHeight(); 
  $("#div1").html(txt); 
});

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回:  盒子整个的宽度,即 元素的content宽度+内边距padding + 边框border。

outerHeight() 方法返回: 盒子整个的高度,即 元素的content高度+内边距padding + 边框border。

下面的例子返回指定的 <div> 元素的 outer-width/height：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_anime {
            font-weight: bold;
            font-size: x-large;
        }
        .class_girl {
            color: red;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <div id="id_div" style="height:50px;width:300px;padding:10px;margin:3px;border:1px solid red;background-color:lightblue;">
            我们仍未知道那年夏天所见到的花的名字
        </div>
        <button class="class_btn class_btn_green" type="button" >设置或获得各种宽高</button>
        <script type="text/javascript">
            $(document).ready(
                function () {
                    // 绑定事件
                    $(".class_btn_green").click(
                        function() {
                            NSLog("width:300,padding:10,border:1,margin:3px;");
                            // 同时移除多个类,用空格分隔
                            NSLog("width: " + $("#id_div").width());
                            NSLog("innerWidth: " + $("#id_div").innerWidth());
                            NSLog("outerWidth: " + $("#id_div").outerWidth());
                            NSLog("outerWidth(true): " + $("#id_div").outerWidth(true));
                            }

                    );
                }
            );
        </script>
        <p class="sgcenter">
            <b>注意:</b>
            width()   单纯的content width <br/>

innerWidth()   盒子内部的空间(content + padding)<br/>

outerWidth()   盒子的大小(content + padding + border)<br/>

outerWidth(true)  盒子的大小 + margin<br/>

        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:


核心代码:

$("button").click(function(){ 
  var txt=""; 
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; 
  txt+="Outer height: " + $("#div1").outerHeight(); 
  $("#div1").html(txt); 
});

提示：

outerWidth(true) 方法返回:  元素的宽度（包括内边距、边框和外边距）；

outerHeight(true) 方法返回: 元素的高度（包括内边距、边框和外边距）。

 






附录:

DOM 操作方法

下表是用来操作 DOM 元素的全部方法 ——

序号方法 & 描述
1after( content )

在每一个匹配元素之后插入内容

2append( content )

在每一个匹配元素内部添加内容。

3appendTo( selector )

将所有匹配元素添加到另一个指定的元素组中。

4before( content )

在每个匹配的元素之前插入内容。

5clone( bool )

克隆匹配的 DOM 元素以及所有的事件处理程序，并选择克隆项。

6clone( )

克隆匹配的 DOM 元素并选择克隆项。

7empty( )

从匹配的元素集合中删除所有的孩子节点。

8html( val )

设置每个匹配元素的 html 内容。

9html( )

获取第一个匹配元素的 html 内容(内部 HTML)。

10insertAfter( selector )

将所有的匹配元素插入到另一个指定的元素集合之后。

11insertBefore( selector )

将所有匹配的元素插入到另一个指定的元素集合之前。

12prepend( content )

将内容前置到每个匹配元素的内部。

13prependTo( selector )

将所有匹配元素前置到另一个指定的元素集合中。

14remove( expr )

从 DOM 中删除所有的匹配元素。

15replaceAll( selector )

用匹配的元素替换与指定的选择器相匹配的元素。

16replaceWith( content )

用指定的 HTML 或 DOM 元素代替所有的匹配元素。

17text( val )

设置所有匹配元素的文本内容。

18text( )

获取所有匹配元素的组合的文本内容。

19wrap( elem )

用指定的元素包装每个匹配的元素。

20wrap( html )

用指定的 HTML 内容包装每个匹配的元素。

21wrapAll( elem )

将匹配的集合中的全部元素包装到一个单独的元素中。

22wrapAll( html )

将匹配的集合中的全部元素包装到一个单独的元素中。

23wrapInner( elem )

用 DOM 元素包装每个匹配元素(包括文本节点)的内部孩子内容。

24wrapInner( html )

用 HTML 结构包装每个匹配元素(包括文本节点)的内部孩子内容。


jQuery HTML / CSS 方法

下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。

下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

方法描述
addClass()向被选元素添加一个或多个类名
after()在被选元素后插入内容
append()在被选元素的结尾插入内容
appendTo()在被选元素的结尾插入 HTML 元素
attr()设置或返回被选元素的属性/值
before()在被选元素前插入内容
clone()生成被选元素的副本
css()为被选元素设置或返回一个或多个样式属性
detach()移除被选元素（保留数据和事件）
empty()从被选元素移除所有子节点和内容
hasClass()检查被选元素是否包含指定的 class 名称
height()设置或返回被选元素的高度
html()设置或返回被选元素的内容
innerHeight()返回元素的高度（包含 padding，不包含 border）
innerWidth()返回元素的宽度（包含 padding，不包含 border）
insertAfter()在被选元素后插入 HTML 元素
insertBefore()在被选元素前插入 HTML 元素
offset()设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()返回第一个定位的祖先元素
outerHeight()返回元素的高度（包含 padding 和 border）
outerWidth()返回元素的宽度（包含 padding 和 border）
position()返回元素的位置（相对于父元素）
prepend()在被选元素的开头插入内容
prependTo()在被选元素的开头插入 HTML 元素
prop()设置或返回被选元素的属性/值
remove()移除被选元素（包含数据和事件）
removeAttr()从被选元素移除一个或多个属性
removeClass()从被选元素移除一个或多个类
removeProp()移除通过 prop() 方法设置的属性
replaceAll()把被选元素替换为新的 HTML 元素
replaceWith()把被选元素替换为新的内容
scrollLeft()设置或返回被选元素的水平滚动条位置
scrollTop()设置或返回被选元素的垂直滚动条位置
text()设置或返回被选元素的文本内容
toggleClass()在被选元素中添加/移除一个或多个类之间切换
unwrap()移除被选元素的父元素
val()设置或返回被选元素的属性值（针对表单元素）
width()设置或返回被选元素的宽度
wrap()在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()在每个被选元素的内容周围用 HTML 元素包裹起来





jQuery 属性操作方法

下面列出的这些方法获得或设置元素的 DOM 属性。

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法描述
addClass()向匹配的元素添加指定的类名。
attr()设置或返回匹配元素的属性和值。
hasClass()检查匹配的元素是否拥有指定的类。
html()设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()从所有匹配的元素中移除指定的属性。
removeClass()从所有匹配的元素中删除全部或者指定的类。
toggleClass()从匹配的元素中添加或删除一个类。
val()设置或返回匹配元素的值。

注释：jQuery 文档操作参考手册中也列出了以上方法。本参考页的作用是方便用户单独查阅有关属性操作方面的方法。


jQuery CSS 操作函数

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性描述
css()设置或返回匹配元素的样式属性。
height()设置或返回匹配元素的高度。
offset()返回第一个匹配元素相对于文档的位置。
offsetParent()返回最近的定位祖先元素。
position()返回第一个匹配元素相对于父元素的位置。
scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。
width()设置或返回匹配元素的宽度。




未完待续,下一章节,つづく

pre_eminent
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery--操作html、css
zxn200125的博客
12-09 222
jQuery操作html和css的属性方法介绍，以及jQuery尺寸方法介绍
JQuery1：动态操作HTML和CSS
尹成的技术博客
11-14 576
#jquery选择器 ###jquery用法思想一 选择某个网页元素，然后对它进行某种操作 ###jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。 $(document) //选择整个文档对象 $('li') //选择所有的li元素 $('#myId') //选择id为myId的网页元素 $('.myClass') // 选...
jQuery HTML操作
博客标题不能为空我也没办法
02-18 626
这一节主要是jQuery对html文件的一些操作，当初学html的时候就涉及过这一部分的知识，当然是用jsp来实现的，个人感觉这种对html文件的操作实在是意义不大，这类操作是对文档直接操作，尤其是那种添加或者删除某一段文档的效果，既然要修改，当初设计网页的时候直接改好了再放上去不就好了么，实在是有些鸡肋。 jQuery一个很强大的功能就是对DOM的操作，最常用的有三个： ①text() 设置或者返回所选元素的文本内容，如果只需要返回所选元素的文本内容，不需要填写任何参数，使用这个方法，返回的一定是文本内容
jQuery操作HTML元素
农夫阿才
12-23 1307
上一篇写了jQuery的选择器和过滤器，已经能够选中元素了。接下来要做的是，操作元素，为了便于记忆，我按照查询、增加、删除、修改四种操作来写，下面进入正题。 一、查询元素操作 解释一下：其实jQuery的选择器就属于查询操作，这里的查询操作指的是遍历。我们获取到的 jQuery 对象是个集合，里面可能包含很多个dom对象，往往需要将它们遍历，进而再操作。 1.each(回调函数) &amp;amp;lt;ht...
Jquery增加和删除HTML元素
gy1030472166的博客
06-05 1551
1.   js function add(){                         var html=$("#jbxx")[0].innerHTML; var ht=$("#fjxx")[0].innerHTML; $("#jbxx").html(html+ht); } function remove(r){ var i=r.parentNode...
html jq 操作
atares0223的博客
07-27 351
$("#mySelect option:first").prop("selected", 'selected');  选中第一个
使用jQuery操作HTML元素（一）
青柠晶晶的博客
11-27 1390
一.使用jQuery获取HTML元素对应的jquery对象 在标准javascript中，可以使用document.getElementById()方法根据ID获取HTML元素对应的DOM对象。 语法：var DOM对象=document.getElementById(对象id) 然后通过DOM对象中的innerText属性可以获取和设置HTML元素的显示文本。 1.在javascript...
CSS_AJAX.rar_ajax css_ajax 网页_html+css+jquery_jquery
09-20
在网页设计领域，CSS、AJAX 和 jQuery 是三个不可或缺的技术元素，它们共同为现代网页带来了交互性和动态性。本文将详细探讨这些技术及其在网页设计中的应用。 首先，CSS（层叠样式表）是用于控制网页外观和布局的...
jquery_api.rar_API开发_html api_jquery
09-20
2. **DOM操作（DOM Manipulation）**：jQuery 提供了丰富的函数来操作文档对象模型（DOM），如 `append()` 在元素末尾添加内容，`prepend()` 在元素开头添加内容，`html()` 和 `text()` 用于设置或获取元素的HTML...
前端手册包括html_CSS_Jquery_php_mysql.zip
01-30
jQuery，作为JavaScript库，简化了DOM操作、事件处理和动画制作。jQuery手册提供了丰富的示例，让开发者快速上手，实现高效、流畅的交互效果。"3c_js.chm"和"jqueryeasyui.chm"则进一步扩展了JavaScript和jQuery的...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅...
Test_html_javascript_jquery_
10-04
在这个登录模板中，jQuery可能被用来更方便地选择和操作HTML元素，如找到表单、按钮或Canvas，同时它也可能用于实现平滑的动画过渡，提高用户界面的流畅性。 【Canvas】是HTML5中的一个标签，提供了在浏览器中进行...
jQuery--HTML【删除元素】
张默的博客
09-11 203
jQuery - 删除元素 删除元素/内容 如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 remove() 方法 remove() 方法删除被选元素及其子元素。 $("#div1").remove(); empty() 方法 jQuery empty() 方法删除被选...
强大的JQuery（三）--操作html与遍历
weixin_30872671的博客
08-15 95
前两篇博客讲到了JQuery的基础知识以及其动画效果，本篇将为大家介绍jquery操纵html以及jquery的遍历。 一、jquery操作html 1.获取内容和属性 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 attr()- 方法用于获取属性值。 实...
jQuery操作Html记录
看山 看水 看世界
12-10 445
做web开发前端通常都会使用jQuery这个js库的，通过jQuery来对html元素进行操作是一件很方便的事情，但是不可能将这些操作的方式都记住的包括鄙人，所以一直就想整理一下在日常开发中使用jQuery操作html的文章 免责声明：以下内容均来自于互联网收集整理，如有疑问就有疑问吧! _，对了本篇文章将持续更新 ##jQuery对html元素属性操作 jQuery对元素设置属性主要有2个方法p...
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
最新发布
08-14
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
深度探索：神经网络在图像识别中的革命性应用
08-14
神经网络是一种受人脑结构启发的数学模型，它由大量的节点（或称为“神经元”）相互连接构成。这些节点通常组织成层，包括输入层、隐藏层和输出层。每个神经元可以接收来自前一层的输入，通过某种激活函数处理这些输入，然后将结果传递给下一层的神经元。 神经网络能够通过学习大量的数据来识别模式和特征，这使得它们在图像识别、语音识别、自然语言处理等领域有着广泛的应用。它们也可以用于预测、分类和回归等任务。 训练神经网络通常涉及到一个称为“反向传播”的过程，通过这个过程，网络可以调整其内部参数（权重和偏置），以便更好地完成特定的任务。这个过程通常需要大量的计算资源，并且伴随着梯度下降或其他优化算法来最小化损失函数，从而提高模型的性能。 随着深度学习技术的发展，神经网络变得更加复杂和强大，出现了各种类型的网络结构，比如卷积神经网络（CNNs）用于图像处理，循环神经网络（RNNs）用于序列数据，以及长短期记忆网络（LSTMs）等。
基础会计教学课件第十一章财务会计报告.pptx
08-14
基础会计教学课件第十一章财务会计报告.pptx
基于Android网络聊天软件APP设计与实现.docx
08-14
基于Android网络聊天软件APP设计与实现.docx
jQuery Mobile与HTML5/CSS3技术精华资料整理
本资源是一份关于CSS技术与jQuery Mobile开发的详细指南，主要...这份资源是开发人员学习和提升jQuery Mobile和HTML5/CSS3技能的宝贵参考资料，无论是对于初学者还是进阶开发者，都能从中获得有价值的知识和实践指导。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值