基本语法-白红宇的个人博客

基本语法

发布日期：2021-05-14 14:50:42 浏览次数：25 分类：原创文章

本文共 3242 字，大约阅读时间需要 10 分钟。

Zookeeper基础

04-基本语法-对象转换

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

05-基本语法-事件的基本使用

常用的事件

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

06-基本语法-事件的绑定和解绑

绑定事件

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

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

解绑事件

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

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

07-基本语法-事件的切换

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

方式一：单独定义

$(元素).事件方法名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");});

08-基本语法-遍历操作01

方式一：传统方式

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

09-基本语法-遍历操作02

10-基本语法-基本语法的小结

JS 对象和 jQuery 对象相互转换
- $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。
- jQuery 对象[索引] jQuery
- 对象.get(索引)：将 jQuery 对象转为 JS 对象。

事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
- on(事件名称,执行的功能)：绑定事件。
- off(事件名称)：解绑事件。

遍历
- 传统方式。
- 对象.each() 方法。
- $.each() 方法。
- for of 语句。

上一篇：Spring Boot入门

下一篇：软件项目进度计划(迭代式生命周期)

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！