jQuery-HTML-CSDN博客

本文链接：https://blog.csdn.net/Shreck66/article/details/51589746

jQuery-获得内容和属性

(1)jQuery中非常重要的部分，就是操作DOM的能力
jQuery提供了一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易

DOM = Document Object Model(文档对象模型)
DOM定义访问HTML和XML文档的标准

(2)获得内容-text()、html()以及val()
三个简单实用的用于DOM操作的jQuery方法

.text() - 设置或返回所选元素的文本内容
.html() - 设置或返回所选元素的额内容(包括html标记)
.val() - 设置或返回表单字段的值

text()和html()实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.bnt1').click(function () {
                alert('文本: ' + $('.test').text())
            });
            $('.bnt2').click(function () {
                alert('html: '+ $('.test').html())
            });
        });
    </script>
</head>
<body>

    <p class="test">这是段落中的<b>粗体</b>文本</p>
    <button type="button" class="bnt1">显示文本</button>
    <button type="button" class="bnt2">显示HTML</button>
</body>
</html>

val()方法实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.btn').click(function () {
                alert('Value: ' + $('.test').val());
            });
        });
    </script>
</head>
<body>

    <p>姓名:<input type="text" class="test" value="苗帅"></p>
    <button type="button" class="btn">显示值</button>
</body>
</html>

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

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.btn').click(function () {
                alert($('.test').attr('href'));
            });
        });
    </script>
</head>
<body>

    <p><a href="https://www.baidu.com" class="test">点我</a></p>
    <button type="button" class="btn">显示href</button>
</body>
</html>

2.jQuery-设置内容和属性

(1)设置内容-text()，html()以及val()
我们仍然可以用前面的三个函数来完成设置内容的工作

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.btn1').click(function () {
                $('.test1').text('我已不是文本了');
            });
            $('.btn2').click(function () {
                $('.test2').html('我已不是html了');
            });
            $('.btn3').click(function () {
                $('.test3').val('jesse');
            });
        });
    </script>
</head>
<body>

    <p class="test1">我是文本</p>
    <p class="test2">我是HTML</p>
    <p>Input field: <input type="text" class="test3" value="shreck"></p>
    <button type="button" class="btn1">设置文本</button>
    <button type="button" class="btn2">设置HTML</button>
    <button type="button" class="btn3">设置值</button>
</body>
</html>

3.jQuery-添加元素

添加新的HTML元素

.append() - 在被选元素的结尾插入内容
.prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
.before() - 在被选元素之前插入内容

(1)append方法实例
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.btn1').click(function () {
                $('p').append('<b>新增文本</b>');
            });
            $('.btn2').click(function () {
                $('ol').append('<li>New item n</li>');
            });
        });
    </script>
</head>
<body>

    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button type="button" class="btn1">追加文本</button>
    <button type="button" class="btn2">追加列表项</button>
</body>
</html>

4.jQuery-删除元素

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

.remove()-删除被选元素
.empty()-从被选元素中删除子元素

remove方法实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').remove();
            });
        });
    </script>
</head>
<body>

    <div class="div1" style="height: 100px;width: 300px;border: 1px;background-color: yellow;">
        <p>This is a div</p>
        <p>This is a paragraph</p>
        <p>This is anothor paragraph</p>
    </div>
    <br>
    <button type="button">删除元素div</button>
</body>
</html>

5.jQuery-获取并设置CSS类

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

.addClass() - 向被选元素添加一个或多个类
.removeClass() - 从被选元素删除一个或多个类
.toggleClass() - 对被选元素进行添加/删除类的切换操作
.css() - 设置或返回样式属性

toggleClass实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('h1,h2,p').toggleClass('blue');
            });
        });
    </script>
    <style type="text/css">
        .blue
        {
            color: blue;
        }
    </style>
</head>
<body>

    <h1>标题１</h1>
    <h2>标题２</h2>
    <p>段落１</p>
    <p>段落２</p>
    <button type="button">切换CSS</button>
</body>
</html>

6.jQuery-css()方法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                alert('颜色为: ' + $('p').css('background-color'));
            });
        });
    </script>

</head>
<body>

    <p style="background-color: red">我的背景颜色</p>
    <button type="button">返回颜色</button>
</body>
</html>

设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('p').css('background-color','yellow');
            });
        });
    </script>

</head>
<body>

    <p style="background-color: red">我的背景颜色</p>
    <button type="button">返回颜色</button>
</body>
</html>