Front_end/learn_JQuery#2.html at master · Watch-Dogs-HIT/Front_end · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="http://www.runoob.com" id="runoob">菜鸟教程</a>
<button id="btn0">修改 href 值</button>
<br />
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555132066398&di=ee5a354d743381340a22acff75afa475&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F16%2F45%2F68p58PICJZr_1024.png" >
<br><br>
<button onclick="afterText()">之后插入</button>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<!--JQuery HTML-->
<script>
    // 获得内容 - text()、html() 以及 val()
    // text() - 设置或返回所选元素的文本内容 {p标签内的内容}
    // html() - 设置或返回所选元素的内容（包括 HTML 标记） {p标签内的原生文本}
    // val() - 设置或返回表单字段的值 {input/box等标签现在的值}

    // 获取属性 - attr() 获取某一个特点元素的特定属性
    $(function()
    {
        $("#btn0").click(function () {
            alert($("#runoob").attr("href"));
            $("#runoob").text("new_test"); // 修改
            $("#runoob").attr("href", "http://www.runoob.com/jquery"); // 修改其他属性
        });
    });

    // 添加新的 HTML 内容
    // append() - 在被选元素的结尾插入内容
    // prepend() - 在被选元素的开头插入内容
    // after() - 在被选元素之后插入内容
    // before() - 在被选元素之前插入内容
    $(function(){
        $("#btn1").click(function(){
            $("p").prepend(" <b>在前面追加文本</b>。"); // 在元素内最前方追加
        });

        $("#btn2").click(function(){
            $("ol").append("<li>追加列表项</li>"); // 在元素内最后方追加
        });
    });

    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);          // 在图片后添加文本
        $("img").width("100px").height("100px");
    }

    // jQuery remove() 方法 全部删除
    // jQuery empty() 方法 删除元素的全部子元素
    $("p").remove(".italic"); // 删除 class="italic" 的所有 <p> 元素：

    // jQuery 操作 CSS
    // addClass() - 向被选元素添加一个或多个类
    // removeClass() - 从被选元素删除一个或多个类
    // toggleClass() - 对被选元素进行添加/删除类的切换操作
    // css() - 设置或返回样式属性
    $("p").css({"background-color":"yellow","font-size":"200%"}); // 设置多个css属性

    // jQuery 尺寸方法
    // jQuery 提供多个处理尺寸的重要方法：
    //
    // width()
    // height()
    // innerWidth()
    // innerHeight()
    // outerWidth()
    // outerHeight()
</script>

</body>
</html>