张利源 blog

JQuery笔记

概念：一个JavaScript框架，简化JS开发
使用步骤：
    1.下载JQuery
    2.导入JQuery的js文件  导入min.js
    3.使用
JQuery对象和JS对象的区别
    方法不互通
    转换：
        jq -> js  : jq对象[索引] 或者 jp对象.get(索引)
        js -> jq  : $(js对象)

选择器：筛选具有相似特征的元素(标签)

1.基本选择器

  • 1.标签选择器(元素选择器)

    `$("html标签名")`  获得所有匹配标签名称的元素

  • 2.id选择器

    `$("#id的属性值")`  获得与指定id值匹配的元素

  • 3.类选择器

    `$(".class的属性")`   获得与指定的class属性值相匹配的元素

    2.层级选择器

  • 1.后代选择器：

    `$("A B")`  选择A元素所有内部的B元素

  • 2.子选择器

    `$("A > B")` 选择A元素内部的所有B子元素

  • 3.属性选择器

    1.属性名称选择器
$("A[属性名]")    包含指定属性的选择器
2.属性选择器
$("A[属性名='值']")   包含指定属性等于指定值的选择器
3.符合属性选择器
$("A[属性名='值'][ ]...")   包含多个属性条件的选择器

  • 4.过滤选择器

    1.首元素选择器
    :first  获得选择的元素中第一个元素
2.尾元素选择器
    :last  获得选择的元素中最后一个元素
3.非元素选择器
    not(.selector)   不包括指定内容的元素
4.偶数选择器
    even   偶数，从0开始计数
5.奇数选择器
    odd  奇数 ，从0开始
6.等于索引选择器
    eq(index)  指定索引元素
7.大于索引选择器
    gt(index)  大于指定索引选择器
8.小于索引选择器
    lt(index)  小于指定索引选择器
9.标题选择器
    header  获得标题(h1-h6)元素，固定写法

  • 5.表单过滤选择器

    1.可用元素选择器
    :enabled  获得可用元素
2.不可以用元素选择器
    :disabled  获得不可用元素
3.选中选择器
    :checked  获得单选，复选框中的元素
4.选中选择器
    :selected   获得下拉框中选中的元素

DOM操作

1.内容操作

  • 1.html() ： 获取/设置元素的标签体内容， 内容 –> 内容

  • 2.text() ： 获取/设置元素标签体纯文本内容 内容 –> 内容

  • 3.val() : 获取/设置元素的属性值

    2.属性操作

  • 1.通用属性操作

    1.attr()                  获取/设置元素的属性
2.removeAttr()     删除属性
3.prop()                获取/设置元素的属性
4.removeProp()    删除属性
*attr和prop的区别
    如果操作的是元素的固有属性，则建议使用prop
    如果操作的是元素的自定义属性，则建议是attr

  • 2.对class属性操作 

        1.addClass()      添加class属性值
    2.removeClass() 删除class属性值
    3.toggleClass()   切换class属性值
3.CRUD操作
    1.append(): 父元素将子元素追加到末尾
            - 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
    2.prepend():父元素将子元素追加到开头
            -对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
    3.appendto():
    4.prependto():

    5.after():添加元素到元素后边
    6.before()：将元素添加到元素前边
    7.insertAfter():
    8.insertBrfore():
    9.remove()：删除元素
    10.empty()：清空元素的所有后代元素

    JQuery高级

    1.动画

  • 1.三种方式显示和隐藏元素

    1.show([speed,[easing],[fn]])
2.hide([speed,[easing],[fn]])
3.toggle([speed],[easing],[fn])

  • 2.滑动显示和隐藏方式

    1.slideDown([speed],[easing],[fn])
2.slideUp([speed,[easing],[fn]])
3.slieToggle([speed],[easing],[fn])

  • 3.淡入淡出的显示和隐藏方式

    1.fadeIn([speed],[easing],[fn])
2.fadeOut([speed],[easing],[fn])
3.fadeToggle([speed,[easing],[fn]])

    2.遍历

  • 1.jq对象.each(callback)

  • 2.$.each(object,[callback])

  • 3.for..of:

    3.事件绑定

     1.jquery标准的绑定方式
     jq对象.事件方法(回调函数)
 2.on绑定事件/off绑定事件
     jq对象.on("事件名称",回调函数)
     jq对象.off("事件名称")
3.事件切换
     jq对象.toggle(fn1,fn2...)

案例

需求：

1.当页面加载完后。3秒后，自动显示广告
2.当广告显示5秒后自动消失

代码：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <script>
        /*需求：
         1.当页面加载完后。3秒后，自动显示广告
         2.当广告显示5秒后自动消失
         分析：
         1.使用定时器来完成。setTimeout(执行一次)
         2.JQuery的动画效果就是控制display属性
        */
        //入口函数，在页面加载完成后定义定时器，调用这两个方法
        $(function () {
            //定时器 调用adShow()方法
            setTimeout(adShow,3000);

            setTimeout(adHide,8000);
        })
        //显示广告方法
        function adShow() {
            //获取广告div 调用show方法
            $("#ad").show("slow");
        }
        //隐藏广告方法
        function adHide() {
            $("#ad").hide("slow");
        }
    </script>
</head>
<body>
<div>
    <div id="ad" style="display: none;">
        <img src="../img/广告.jpg">
    </div>

    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

需求：

抽奖案例

代码实现

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <script>
        /*
        分析：
        1.给开始按钮绑定单击事件
            1.1定义循环定时器
            1.2切换小相框的src属性
                定义一个数组，存放图片资源的路径
                生成随机数 数组索引
        2.给结束按钮绑定单击事件
            2.1停止定时器
            2.2给大相框设置src属性
         */
        var imgs = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg","../img/6.jpg","../img/0.jpg"]
        var startId;//开始定时器的一个Id
        var index;
        $(function () {
            //开始按钮
            $("#startID").click(function () {
                startId = setInterval(function () {
                    //生成随机角标
                    index = Math.floor(Math.random() * 7)
                    //设置小相框的src属性
                    $("#img1ID").prop("src",imgs[index]);
                },20)
            })
            //结束按钮
            $("#stopID").click(function () {
                $("#stopID").click(function () {
                    //停止定时器
                    clearInterval(startId)
                    $("#img2ID").prop("src",imgs[index]);
                })
            })
        })
    </script>
</head>
<body>
<!--小相框-->
<div style="border-style: dotted;width: 160px;height: 100px;">
    <img id="img1ID" style="width: 160px;height: 100px" src="../img/1.jpg">
</div>

<!--大相框-->
<div style="border-style: dotted;height: 500px;position: absolute;left: 500px;top: 10px">
    <img src="../img/1.jpg" id="img2ID" width="800px"height="600px">
</div>

<!--开始按钮-->
<input id="startID" type="button" value="点击开始" style="width: 150px;height: 50px;font-size: 22px">

<!--停止按钮-->
<input id="stopID" type="button" value="点击停止" style="width: 150px;height: 50px;font-size: 22px">
</body>
</html>

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

评论