JQuery

最新推荐文章于 2023-09-28 10:22:22 发布

MG_AH

最新推荐文章于 2023-09-28 10:22:22 发布

阅读量291

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/MG_AH/article/details/107001785

版权

JQuery快速入门

jQuery 是一个 JavaScript 库
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程
jQuery 官网：https://www.jquery.com
要想使用，必须要引入JQuery文件
JQuery的核心语法 $();

JS对象和JQuery对象转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换
JS 的 DOM 对象转换成 jQuery 对象
- $(JS 的 DOM 对象);
jQuery 对象转换成 JS 对象
- jQuery 对象[索引];
- jQuery 对象.get(索引);

事件的使用

常用的事件

在这里插入图片描述

在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法

事件的绑定和解绑

绑定事件

jQuery 对象.on(事件名称,执行的功能);
解绑事件

jQuery 对象.off(事件名称);

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

事件的切换

事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系
方式一：单独定义

$(元素).事件方法名1(要执行的功能);

$(元素).事件方法名2(要执行的功能)
方式二：链式定义

$(元素).事件方法名1(要执行的功能)

.事件方法名2(要执行的功能);

遍历

方式一：传统方式

for(let i = 0; i < 容器对象长度; i++){
执行功能; }

方式二：对象.each() 方法

容器对象.each(function(index,ele){
		执行功能;
});

方式三：$.each() 方法

$.each(容器对象,function(index,ele){
		执行功能;
});

方式四：for of 语句
```
for(ele of 容器对象){
执
```

基本选择器

选择器：类似于 CSS 的选择器，可以帮助我们获取元素
例如：id 选择器、类选择器、元素选择器、属性选择器等等
jQuery 中选择器的语法：$()
基本选择器
层级选择器

在这里插入图片描述

属性选择器
过滤器选择器
表单属性选择器

操作文本

常用方法

在这里插入图片描述

操作对象

常用方法

操作样式

常用方法

在这里插入图片描述

操作属性

常用方法

在这里插入图片描述

随机图片案例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];
		
    //2.定义计数器变量
    let count = 0;
    
    //3.声明定时器对象
    let time = null;
    
    //4.声明图片路径变量
    let imgSrc = "";
    
    //5.为开始按钮绑定单击事件
    $("#startBtn").click(function(){
        //6.设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);
        
        //7.设置定时器，循环显示图片
        time = setInterval(function(){
            //8.循环获取图片路径
            let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0  
                    
            //9.将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src",imgSrc);
                    
            //10.计数器自增
            count++;
        },10);
    });


    //11.为停止按钮绑定单击事件
    $("#stopBtn").click(function(){
        //12.取消定时器
        clearInterval(time);
        
        //13.设置按钮状态
        //启用开始按钮
        $("#startBtn").prop("disabled",false);
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);
            
        //14.将图片显示到大图片上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 400px; height: 400px;");
    });
    
    
     
</script>
</html>