jQuery框架

jQuery是开源软件，使用MIT许可证授权。 jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。

简单演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
    //通过JS的方式获取所有div标签
    var divs=document.getElementsByTagName("div");
    //遍历标签集合，修改标签内容
    for(var i=0;i<divs.length;i++){
        divs[i].innerHTML="hello div!";
    }
    //通过Jquery方式获取所有div标签
    var $divs=$("div");
    //通过Jquery方式遍历标签集合并修改内容
    $divs.html("hi div!");
</script>
</body>
</html>

JS与Jquery对象之间的转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
    //通过JS的方式获取所有div标签
    var divs=document.getElementsByTagName("div");
    //通过Jquery方式获取所有div标签
    var $divs=$("div");

    //JS对象转化为Jquery对象,直接在变量名前加$()即可
    $(divs)
    //Jquery对象转化为JS对象，可以利用索引值，也可以利用get方法
    var div1=$divs.get(0);
    var div2=$divs[1];
</script>
</body>
</html>

Jquery选择器

用于筛选具有相似特征的元素

基本语法

1. 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="button" value="click" id="b1">

<script>
    //获取按钮
    $("#b1").click(function () {
        alert("hello");
    })
</script>
</body>
</html>

2. 入口函数

入口函数即指首先加载的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
    //入口函数，始终先于其他内容执行
    $(function () {
        alert("执行页面加载前的准备工作")
    })
</script>

<input type="button" value="click" id="b1">


</body>
</html>

3. CSS样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
    $(function () {
        //进行CSS样式控制
        $("#div1").css("background-color","red");
    })
</script>

<div id="div1">hello world</div>


</body>
</html>