JQuery入门_itjq-CSDN博客

本文链接：https://blog.csdn.net/weixin_45477086/article/details/121776364

`JQuery：`

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

`快速入门：`

<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>

`JS对象和JQuery对象转换：`

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

JQuery 对象 [索引];
JQuery 对象.get(索引);

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);

`事件的基本使用：`

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

常用的事件
在这里插入图片描述
代码实现：

<body>
<input type="button" id="btn" value="点我">
<br/>
<input type="text" id="input">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 单击事件
    $("#btn").click(function () {
        alert("点我弄啥啊")
    });

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

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

`时间的绑定和解绑：`

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

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

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

<body>
<input type="button" id="btn1" value="点我">
<input type="button" id="btn2" value="解绑">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // btn1绑定单击事件
    $("#btn1").on("click", function () {
        alert("弄啥啊")
    });

    // 通过btn2解绑btn1的事件
    $("#btn2").on("click", function () {
        $("#btn1").off("click");
    });
</script>

`时间的切换：`

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

方式一：单独定义

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

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

<script>
    // 方式一：单独定义
    $("#div").mousemove(function () {
        // 添加背景色  黑色
        // $("div").css("background", "black")
        $(this).css("background", "black")   //简写
    });
    $("#div").mouseout(function () {
        // 背景色 蓝色
        // $("#div").css("background", "blue");
        $(this).css("background", "blue")  
    });
</script>

方式二：链式定义

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

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

    //方式二 链式定义   也就是在第一个事件没结束可以直接在后面使用
    $("#div").mouseover(function () {
        $(this).css("background", "red");
    }).mouseout(function () {
        $(this).css("background", "blue");
    });

`遍历操作：`

方式一：传统方式

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

<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //方式一：传统方式
    $("#btn").click(function () {
        let lis = $("li");
        for (let i = 0; i < lis.length; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });
</script>

方式二：对象.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);
        }
    });