Python24/12jQuery_Basic/day01/basic01.html at master · ysdfxp/Python24 · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 加载jquery的入口函数 $(匿名函数) -->
    <script src="./js/jquery-1.12.4.min.js"></script>
    <!-- 记载自己函数,js的入口函数是window.onload() -->
    <script>

        // jquery的入口函数，,当文档加载完毕后执行ready中的匿名函数
        $(document).ready(function () {
            console.log("jquery入口函数的完整写法...");
        })

        $(function () {
            console.log("jquery入口函数的化简写法...");
        })

        $(function () {

            // jquery控制css,直接使用css()方法,因为是方法所以直接设置参数即可
            function func1() {
                $("#box").css("width","300px")
                $("#box").css("height","300px")

                $("#box").css({
                    "width": "500px",
                    "height": "500px",
                    "background": "red"
                })
                console.log($("#box").css("width"));
            }

            // jquery事件onclick等方法在jquery中都去掉了on
            // 点击按钮,使div的css隐藏,juqery中只要有对立的方法,都会有第三个toggle来状态切换
            // $('选择器')和css的选择器一样, $('button')意思是button标签选择器
            function func2() {
                $('#btn1').click(function () {

                    // $("div").hide(500)           直接隐藏
                    // $("#box").toggle(500)        切换show/hide
                    // $("#box").fadeToggle()       切换fadeiin/faddeout
                    // $("#box").fadeTo(500, 0.6)   500ms变化到0.6的透明度
                    $("#box").slideToggle()

                    // 设置初始的css位置
                    // $("#box").css({"top": "10px", "opacity": 0})
                    // 设置移动到目标css的属性和时间等动画
                    // $("#box").animate({"top": "50%", "opacity": 1})
                })

                $('#btn2').click(function () {
                    // $("div").show(500)
                    $("#box").toggle(500)
                })
            }

            // jquery控制内容html(参数)方法,只需要传递参数即可 js中使用的是innerHTML
            function func3(params) {
                $("#btn1").html("这是被修改之后的文字")
                console.log($("#btn").html());
            }

            // jquery中的选择器
            function func4() {
                $("#id")            // id选择器
                $("li:first")       // 第一个li标签
                $("li:last")        // 最后一个li标签
                $("li:eq(0)")       // index为0的li标签
                $("li").eq(0)

                $(".box").next()    // 选中类名为box的下一个标签
                $(".box").nextAll()
                $(".box").prev()

                $("li[class=box]")  // 选中class等于box的li标签
                $("li[data-xx=jqk]")// data-是自定义选择器,当词穷的时候可以 用

                $('li').not(".box") // 不含有box类名的li标签
                $("li").has(".box") // 目标是有box类名的li标签
                $("li").find(".box")// 目标是li标签里面带有box类名的子标签
            }

            // sibling() 兄弟姐妹
            function func5() {
                $("button").click(function () {
                    // 点击的button变绿色,其他的按钮变红色
                    $(this).css("background","green").siblings().css("background","")
                })
            }

            // parent() 父类
            function func6() {
                $(".box2 button").click(function () {
                    $(this).parent().hide(500);
                })
            }

            // children() 子类，下拉菜单
            // $(".box3 li").hover(鼠标进入func, 鼠标移出func)
            function func7() {
                $(".box3 li").hover(function () {
                    $(this).children("ul").toggle()
                })
            }

            func2()


        })


        // 自己js的入口函数window.onload只能有一个，只执行最后一个window.onload
        // jquery的入口函数$(匿名函数)可以有多个
        window.onload = function () {

            function func1() {
                var btn = document.getElementById("btn1")
                var box = document.getElementById("box")

                btn.onclick = function () {
                    box.style.display = "none"
                }
            }
            // func1()
        }

    </script>

    <style>
        div {
            width: 200px;
            height: 200px;
            background: #666666;
        }

        div.box3 {
            width: 200px;
            height: 40px;
            background: #666666;
            margin: 10px auto;
        }

        div.box3 ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }

        div.box3 ul li{
            background: #666666;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;

            /* li默认是竖着, 此处是找到2个**一级标题**水平显示 */
            float: left;
        }

        div.box3 li ul {
            display: none;
        }

        div.box3 ul li a{
            text-decoration: none;
            color: #333333;
        }


    </style>
</head>
<body>

    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <div id="box"></div>

    <ul>
        <!-- jquery自定义选择器data-  -->
        <li data-xx="jqk"></li>
        <li></li>
        <li></li>
    </ul>

    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>

    <div class="box2">
        <button>点击关闭广告...</button>
    </div>

    <div class="box3">
        <ul>
            <li>
                <a href="#">男星</a>
                <ul>
                    <li> <a href="#">男星1</a></li>
                    <li> <a href="#">男星2</a></li>
                    <li> <a href="#">男星3</a></li>
                </ul>
            </li>

            <li>
                <a href="#">女星</a>
                <ul>
                    <li> <a href="#">女星1</a></li>
                    <li> <a href="#">女星2</a></li>
                    <li> <a href="#">女星3</a></li>
                </ul>
            </li>

        </ul>
    </div>

</body>
</html>