JQuery

Posted 2021-02-05 liuxiaolu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery相关的知识，希望对你有一定的参考价值。

一：事件

1.事件（简单概述）
<div class="ele">123</div>
var data = "后台获取的数据";
box.onclick = function(ev) {
    // ev: 系统传入的事件对象
    // a
    // ele.innerText
    if (data) {
        // 逻辑
    } else {
        // 小菊花
    }
}
var a = 10;

二：鼠标事件

var box = document.querySelector(‘.box‘);

// 悬浮
box.onmouseenter = function () {
    box.style.cursor = "pointer";
    console.log("鼠标悬浮了")
}

// 移动
box.onmousemove = function () {
    console.log("鼠标在移动")
}

// 按下
box.onmousedown = function () {
    console.log("鼠标按下")
}

// 抬起
box.onmouseup = function () {
    console.log("鼠标抬起")
}

// 移开
box.onmouseleave = function () {
    console.log("鼠标移开")
}

// 右键: 右键按下抬起为一次右键
box.oncontextmenu = function (ev) {
    console.log("鼠标右键")
}

// 点击点的x坐标: ev.clientX | 点击点的y坐标: ev.clientY

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector(‘.box‘);

    // 悬浮
    box.onmouseenter = function () {
        box.style.cursor = "pointer";
        console.log("鼠标悬浮了")
    }

    // 移动
    box.onmousemove = function () {
        console.log("鼠标在移动")
    }

    // 按下
    box.onmousedown = function (ev) {
        console.log(ev);
        // 鼠标的点击点
        // ev.clientX | ev.clientY
        console.log(ev.clientX, ev.clientY);
        console.log("鼠标按下")
    }

    // 抬起
    box.onmouseup = function () {
        console.log("鼠标抬起")
    }

    // 移开
    box.onmouseleave = function () {
        console.log("鼠标移开")
    }

    // 右键: 右键按下抬起为一次右键
    box.oncontextmenu = function () {
        console.log("鼠标右键")
    }

</script>
</html>

鼠标事件

三：键盘事件

// 具体按下的是那个按键
document.onkeydown = function () {
    // console.log("键盘按下了")
}

// ev: 系统回调事件函数,传递的事件对象
// 键盘事件中,ev中有keyCode来唯一标识具体的按键
// 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态
document.onkeyup = function (ev) {
    console.log(ev);
    console.log(ev.keyCode, ev.altKey);
    console.log("键盘抬起了")
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>键盘事件</title>
</head>
<body>

</body>
<script>
    // 具体按下的是那个按键
    document.onkeydown = function () {
        // console.log("键盘按下了")
    };

    // ev: 系统回调事件函数,传递的事件对象
    // 键盘事件中,ev中有keyCode来唯一标识具体的按键
    // 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态
    document.onkeyup = function (ev) {
        console.log(ev);
        console.log(ev.keyCode, ev.altKey);
        console.log("键盘抬起了")
    }

</script>
</html>

鼠标事件

四：定时器

一次性定时器：
1.r1是定时器返回值，就是定时器创建先后的数字编号
2.值在创建定时器1s后执行一次
var r1 = setTimeout(function () {
    console.log("一次性定时器响了!1111");
}, 1000);

持续性定时器：
1.r2是定时器返回值，就是定时器创建先后的数字编号
2.第一次触发在1s后，然后每1s触发一次
var num = 0;
var r2 = setInterval(function () {
    console.log("持续性性定时器响了%d次!", ++num);
}, 1000);

清除一个定时器（清除定时器本质就是对定时器创建的数字编号进行清除操作）：
1.通过定时器数字编号来清除
2.清除定时器不分种类可以混用
clearTimeout(r1)  == clearInterval(1)

清除页面所有定时器（也就是创建一个新的定时器，使其是最后一个，然后循环遍历所欲的定时器，一个一个清除掉，这样就会清除掉所有的定时器）
var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号
for (var i = 0; i < n; i++)  { // 将1~n之间所有定时器再清一遍
    clearTimeout(i)
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定时器</title>
</head>
<body>

</body>
<script>
    // 一次性定时器
    var r1 = setTimeout(function () {
        console.log("一次性定时器响了!1111");
    }, 1000);

    var r2 = setTimeout(function () {
        console.log("一次性定时器响了!2222");
    }, 1000);

    var num = 0;
    var r3 = setInterval(function () {
        console.log("持续性性定时器响了%d次!", ++num);
    }, 1000);
    
    console.log("代码向下执行了!");
    console.log(r1, r2, r3);

    // 如何取消定时器 => 通过定时器数字编号(该定时器是第几个创建的)
    clearInterval(2);

    var r4 = setTimeout(function () {
        console.log("一次性定时器响了!4444");
    }, 1000);
    console.log(r4);

    // 将页面中所有定时器清除
    // 注: 清除定时器不分种类可以混用
    var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号
    for (var i = 0; i < n; i++)  { // 将1~n之间所有定时器再清一遍
        clearTimeout(i)
    }

</script>
</html>

定时器

五：JQ导入

什么是JQuery？
JQuery是一个简洁高效的且功能丰富的javascript工具库，是对原生JavaScript二次分装的工具函数集合

优点：
开源，简洁的选择器，简化的Ajax操作，良好的浏览器兼容，强大的链式操作

六：JQ选择器

// 获取满足条件的所有页面元素jq对象
$(‘css3选择器语法‘);

// 拿到指定索引的页面元素jq对象
$(‘css3选择器语法‘).eq(index);

// 拿到指定索引的页面元素js对象 (jq对象转js对象)
$(‘css3选择器语法‘).get(index);

// js对象转jq对象
$(js对象);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq选择器</title>
    <style>
        body .box:first-child {}
    </style>
</head>
<body>
<div class="box">123</div>
<div class="box">456</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 使用jq => 该html页面有jq环境 => 引入jq => 依赖jq,所以jq要提前引入

    console.log(jQuery);
    console.log($);

    // jq选择器
    // $("css3选择器位")

    // 命名小规范, jq变量一般以$开头
    var $boxs = $(‘.box‘);
    console.log($boxs);

    // 拿到123

    // js与jq对象的相互转化

    // jq拿到文本
    console.log($boxs.text());

    // 只获取第一个box
    var $box = $(‘.box:nth-child(1)‘);
    console.log($box);
    console.log($box.text());

    console.log($box[0].innerText);

    // 总结: jq对象就是用数组包裹的js对象, 可以包裹0个到多个

    // jq转js => 使用js语法
    var box1 = $boxs[0];
    console.log(box1);
    var box2 = $boxs.get(1);
    console.log(box2);

    // js转jq => 使用jq语法
    var $box1 = $(box1);
    console.log($box1);
    
</script>
</html>

jq选择器

七：文档加载

JS:
JS中window提供了一个window.onload = fn， 页面结构及页面所需资源全部加载完毕，只能绑定一个事件方法
window.onload = function() {
}

JQ：
页面结构加载完毕，能绑定多个事件方法，可以简写
一：可以保证页面结构一定加载完毕
二:可以保证数据的局部化（不会被外界直接读写）
$(function(){
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面加载</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--在页面加载前的脚步语句中,如何获取页面对象 => 主动睡觉,页面一加载完毕,就醒 -->
    <!--js中window提供了一个 window.onload = fn 事件: 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法-->
    <!--jq中document提供了一个 $(document).ready(fn) 事件: 页面结构加载完毕, 能绑定多个事件方法, 可以简写-->
    <script>
        // 时间得当就可以处理, 问题多多
        // setTimeout(function () {
        //     var $box = $(‘#box‘);
        //
        //     console.log($box);
        // }, 1)

    </script>

    <script>
        window.onload = function() {
            console.log("window load 1");
        };
        window.onload = function() {
            console.log("window load 2");
        };
        $(document).ready(function() {
            console.log("document load 1");
        });
        $(function() {
            console.log("document load 3");
        });

        // 简写: $(fn)
    </script>
    <script>
        $(function () {  // 页面结构加载完毕
            $(‘.box‘).eq(1).text("000");
        });
    </script>
</head>
<body>
    <div id="box" class="box">123</div>
    <div class="box">456</div>
    <img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
<script>
// 一,可以保证页面结构一定加载完毕, 二,可以保证数据的局部化(不会被外界直接读写)
$(function () {
    var $box;
});
</script>
<script>

</script>
</html>

页面加载

八：JQ操作元素对象

链式操作：（几乎）每一个方法都具有返回值（元素对象）

// 1.文本内容
var res = $(‘.box:first-child‘).text("100").html("<b>888</b>");

// console.log(res);

// 2.样式
res = $(‘.box‘).eq(1)
    .css("color", "pink")
    .css("font-size", "30px")
    .css({
    backgroundColor: "orange",
    "height": "80px"
})
    .css("width", function (index,oldVal) {
    console.log(this); // js对象 转化为jq对象来使用
    console.log($(this).height());
    // 宽度为自身高度的2倍
    return $(this).height() * 2;
})
    .css("border-radius"); // 能获取计算后样式

// console.log(res);

// 3.类名
res = $(‘.box:nth-child(3)‘).addClass("abc").removeClass("abc");

console.log(res);

// 4.全局属性
$(‘img‘).attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg")
    .removeAttr("src");
console.log($(‘img‘).attr("ooo"));

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq控制元素对象</title>

    <style>
        .abc {
            background-color: red;
            /*...*/
        }
        .box {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="box">001</div>
<div class="box">002</div>
<div class="box">003</div>

<img src=""  ooo="100w">
</body>

<script src="js/jquery-3.3.1.js"></script>


<script>
    $(function () {
        // 链式操作: (几乎)每一个方法都具有返回值(元素对象)

        // 1.文本内容
        var res = $(‘.box:first-child‘).text("100").html("<b>888</b>");

        // console.log(res);


        // 2.样式
        res = $(‘.box‘).eq(1)
            .css("color", "pink")
            .css("font-size", "30px")
            .css({
                backgroundColor: "orange",
                "height": "80px"
            })
            .css("width", function (index,oldVal) {
                console.log(this); // js对象 转化为jq对象来使用
                console.log($(this).height());
                // 宽度为自身高度的2倍
                return $(this).height() * 2;
            })
            .css("border-radius"); // 能获取计算后样式

        // console.log(res);

        // 3.类名
        res = $(‘.box:nth-child(3)‘).addClass("abc").removeClass("abc");

        console.log(res);

        // 4.全局属性
        $(‘img‘).attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg")
            .removeAttr("src");
        console.log($(‘img‘).attr("ooo"));
    })
</script>
</html>

jq控制元素对象

九：JQ获取盒子信息

　　9.1显示信息

盒子信息：
宽高，内边距，宽边，外边距
var res = $(‘.box‘).css("padding");
console.log(res);

宽高
res = $(‘.box‘).width();
console.log(res);

宽高+内边距
res = $(‘.box‘).innerWidth();
console.log(res);

宽高+内边距+边框
res = $(‘.box‘).outerWidth();
console.log(res);

宽高+内边距+边框+外边距
res = $(‘.box‘).outerWidth(true);
console.log(res);

　　9.2位置信息

相对窗口偏移：算margin产生的主题
console.log($(‘.box‘).offset().top, $(‘.box‘).offset().left);

绝对定位偏移（top，left），不算margin产生的距离
console.log($(‘.box‘).position().top, $(‘.box‘).position().left);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq获取盒子信息</title>
    <style>
        body {
            margin: 0;
        }
        .sup {
            width: 350px;
            height: 350px;
            background-color: pink;
            position: relative;
            margin: 10px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            padding: 10px;
            border: 20px solid black;
            margin: 50px;
            position: absolute;
            top: 5px;
            left: 5px;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="box"></div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 盒子信息:
    // 宽高 | 内边距 | 宽边 | 外边距

    var res = $(‘.box‘).css("padding");
    console.log(res);

    // 宽高
    res = $(‘.box‘).width();
    console.log(res);

    // 宽高+内边距
    res = $(‘.box‘).innerWidth();
    console.log(res);

    // 宽高+内边距+边框
    res = $(‘.box‘).outerWidth();
    console.log(res);

    // 宽高+内边距+边框+外边距
    res = $(‘.box‘).outerWidth(true);
    console.log(res);


</script>
<script>
    // 相对窗口偏移
    console.log($(‘.box‘).offset().top, $(‘.box‘).offset().left);

    // 绝对定位偏移(top,left)
    console.log($(‘.box‘).position().top, $(‘.box‘).position().left);

</script>
</html>

jq获取盒子信息

十：事件

事件名，函数
$(‘.box‘).on(‘click‘, function (ev) {
    // jq事件对象对js事件对象 兼容
    console.log(ev);
})

取消默认事件：取消系统自带的功能，a标签点击的href转跳
ev.preventDefault(); | 事件方法 return false;

阻止事件的传播（阻止事件的冒泡）：父子有同样事件，子响应了事件，会将事件传递给父，父级也会响应同样的事件。
只让子点击子响应，只点击到父，父响应，子级需要阻止事件的传播
ev.stopPropagation();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq事件</title>
    <style>
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="sss">123</span>
        <i>456</i>
    </div>

    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // $(‘.box‘).on(‘click‘, function () {
    //     // alert(this.innerText);
    //     alert($(this).text())
    // })
    
    // $(‘.box‘).click(function () {
    //     alert($(this).text())
    // })

    var d = "AAA";
    // 事件名, 委派的子类(可选,了解), 参数(可选,了解), 函数
    $(‘.box‘).on(‘click‘, ‘span‘, {aaa: d}, function (ev) {
        // jq事件对象对js事件对象 兼容
        console.log(ev);
        console.log(ev.data.aaa) // 拿到传入的参数
    })

    // sup右键,弹出自身背景颜色
    // 右键有系统自带的功能, 取消掉 => 取消默认事件
    $(‘.sup‘).on(‘contextmenu‘, function (ev) {
        // 取消默认事件
        ev.preventDefault();
        var bgColor = $(this).css(‘background-color‘);
        alert(bgColor);
        // return false;
    })


    // sup和sub都具有单击事件
    $(‘.sup‘).click(function () {
        console.log("父点击")
    })

    // 子父拥有同样事件时,子响应了事件,会将事件传递给父,父级也会响应同样的事件
    $(‘.sub‘).click(function (ev) {
        // 阻止事件的传播 => 阻止事件的冒泡
        ev.stopPropagation();
        console.log("子点击")
    })

</script>
</html>

jq事件

以上是关于JQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段