JQuery-01-笔记

Posted 寻7

tags:

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

JQuery基本语法

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、事件的基本使用

  • 常用的事件
    在这里插入图片描述

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

3、事件的绑定和解绑

  • 绑定事件

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

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

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

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

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

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

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

6、小结

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

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

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

sh bash片段 - 这些片段大多只是我自己的笔记;我找到了一些,有些我已经找到了

需要一种有效的方法来避免使用 Laravel 5 重复代码片段

Oracle-常用数据库对象笔记(片段)

如何使用导航组件处理片段内的向上按钮

JSP笔记