JQuery快速入门

最新推荐文章于 2024-06-24 20:52:55 发布

魏帅坤

最新推荐文章于 2024-06-24 20:52:55 发布

阅读量353

点赞数 2

分类专栏： JQuery 文章标签： css html js jquery javascript

本文链接：https://blog.csdn.net/qq_45181415/article/details/113922452

版权

本文是JQuery的快速入门教程，介绍了JQuery的基本概念、基本语法、选择器、DOM操作及综合案例，包括事件绑定、解绑、切换，以及如何通过JQuery操作文本、对象、样式和属性。

摘要由CSDN通过智能技术生成

1.1、JQuery介绍

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

在这里插入图片描述

1.2、JQuery快速入门

开发思路

编写 HTML 文档。
引入 jQuery 文件。
使用 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 id="div">我是div</div>
</body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // JS方式，通过id属性值来获取div元素
    let jsDiv = document.getElementById("div");
    //alert(jsDiv);
    //alert(jsDiv.innerHTML);

    // jQuery方式，通过id属性值来获取div元素
    let jqDiv = $("#div");
    alert(jqDiv);
    alert(jqDiv.html());
</script>
</html>

1.3、小结

jQuery 是一个 JavaScript 库。
说白了就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。
jQuery 官网：https://www.jquery.com。
要想使用，必须要引入该文件。
jQuery 的核心语法 $();

2、JQuery基本语法

2.1、JS对象和JQuery对象转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。

JS 的 DOM 对象转换成 jQuery 对象

//$(JS 的 DOM 对象);

// JS方式，通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);
//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能

// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());

jQuery 对象转换成 JS 对象

/*jQuery 对象[索引];
jQuery 对象.get(索引);*/

// jQuery方式，通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能

// 将 jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);

2.2、事件的基本使用

常用的事件

在这里插入图片描述

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

代码实现

<!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>
    <input type="button" id="btn" value="点我">
    <br>
    <input type="text" id="input">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //单击事件
    $("#btn").click(function(){
      
        alert("点我干嘛?");
    });

    //获取焦点事件
    // $("#input").focus(function(){
      
    //     alert("你要输入数据啦...");
    // });

    //失去焦点事件
    $("#input").blur(function(){
      
        alert("你输入完成啦...");
    });
</script>
</html>

2.3、事件的绑定和解绑

绑定事件

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

//给btn1按钮绑定单击事件
$("#btn1").on("click",function(){
     
alert("点我干嘛?");
});

解绑事件

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

//jQuery 对象.off(事件名称);
```
//通过btn2解绑btn1的单击事件
$("#btn2").on("click",function(){
     
$("#btn1").off("click");
});
```

2.4、事件的切换

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

方式一：单独定义

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

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

//方式一 单独定义
$("#div").mouseover(function(){
     
    //背景色：红色
    //$("#div").css("background","red");
    $(this).css("background","red");
    });
$("#div").mouseout(function(){
     
    //背景色：蓝色
    //$("#div").css("background","blue");
    $(this).css("background","blue");
});

方式二：链式定义

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

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

//方式二 链式定义
$("#div").mouseover(function(){
     
   $(this).css("background","red");
}).mouseout(function(){
     
   $(this).css("background","blue");
});

2.5、遍历操作

方式一：传统方式

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

//方式一：传统方式
$("#btn").click(function(){
     
    let lis = $("li");
    for(let i = 0 ; i < lis.length; i++) {
     
        alert(i + ":" + lis[i].innerHTML);
    }
});

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

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

//方式二：对象.each()方法
$("#btn").click(function(){
     
    let lis = $("li");
    lis.each(function(index,ele){
     
        alert(index + ":" + ele.innerHTML);
    });
});

方式三：$.each()方法

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

//方式三：$.each()方法
$("#btn").click(function(){
     
    let lis = $("li");
    $.each(lis,function(index,ele){
     
        alert(index + ":" + ele.innerHTML);
    });
});

方式四：for of语句

for(ele of 容器对象){
	执行功能;
}

//方式四：for of 语句遍历
$("#btn").click(function(){
     
    let lis = $("li");
    for(ele of lis){
     
        alert(ele.innerHTML);
    }
});

2.6、小结

JS 对象和 jQuery 对象相互转换
- $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。
- jQuery 对象[索引] jQuery
- 对象.get(索引)：将 jQuery 对象转为 JS 对象。
事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
- on(事件名称,执行的功能)：绑定事件。
- off(事件名称)：解绑事件。
遍历
- 传统方式。
- 对象.each() 方法。
- $.each() 方法。
- for of 语句。

3、JQuery选择器

3.1、基本选择器

选择器：类似于 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 id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.元素选择器   $("元素的名称")
    let divs = $("div");
    //alert(divs.length);

    //2.id选择器    $("#id的属性值")
    let div1 = $("#div1");
    //alert(div1);

    //3.类选择器     $(".class的属性值")
    let cls =<

最低0.47元/天解锁文章

魏帅坤

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JQuery快速入门

1.1、JQuery介绍jQuery 是一个 JavaScript 库。所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。jQuery 官网：https://www.jquery.com1.2、JQuery快速入门开发思路编写 HTML 文档。引入 jQuery 文件。使用 jQuery 获取元素。使用浏览器测试。代码实现<
复制链接

扫一扫

专栏目录