day01jQuery节点操作

左手的ㄟ右手 2023-09-29 21:17 10阅读 0赞

## jQuery常用技术 ##

> 1.jQuery获取元素
> 
> 2.jQuery与js对象转换
> 
> 3.jQuery中的遍历方式
> 
> 4.jQuery中的事件绑定

### 1. jQuery介绍 ###

![在这里插入图片描述][d93581b80aa542b1a3995e032db1390f.png_pic_center]

#### 1.1 jQuery概述 ####

在JavaScript的使用过程中，存在很多问题，例如：兼容问题(咱不考虑)，元素获取方式单一(只能用基本的选择器)等等，因此就出现了很多第三方的封装库(将复杂的、麻烦的功能进行封装，提供给用户一种简单的、可直接调用的形式进行使用)，在众多的第三方库中脱颖而出的就是jQuery。

理念：写的少，做的多。（用更少的代码做更多的事情）

注意：jQuery中提供的函数或对象与js中的函数或对象是没有关系的。

### 2. jQuery基本使用 ###

#### 2.1 对象获取 ####

##### 2.1.1 基本选择器 #####

//基本选择器
    //使用js进行获取
    var btns = document.getElementsByTagName("button");
    var btns2 = document.getElementsByClassName("btn");
    //使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素
    //命名的时候为了和js的变量进行区分，通常jQuery的变量前面都会加上一个$
    var $btns = $('button');
    var $btns2 = $('.btn');
    //典型错误：$ is not defined 该错误的出现意味着jQuery的文件未加载成功
    console.log($btns);
    console.log($btns2);

##### 2.1.2 属性及伪类选择器 #####

使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素

//css2/3中提供的选择器
    //获取除了submit按钮之外的其他的input标签
    var $inNodes = $('input:not([type="submit"])');
    console.log($inNodes);
    console.log("--------灵魂分割线----------");
    var $btns3 = $('button:nth-of-type(2n+1)');
    console.log($btns3);
    //jQuery中提供的常用选择器
    console.log($('button:eq(1)'));//=
    console.log($('button:gt(1)'));//>
    console.log($('button:lt(1)'));//<

##### 2.1.3 获取对象-过滤选择器 #####

jQuery中大多数的操作都是以函数的形式存在的，对于元素的获取同样提供了对应的函数

//jQuery中提供的常用过滤器
    console.log($('button').eq(1));
    console.log($('input[type="text"]').next());
    console.log($('button').parent());
    console.log($('button').parent().children('button:eq(0)'));

#### 2.2 获取及修改元素的值 ####

jQuery中获取到的元素都是以组的形式存在的，元素值的三种操作方式结合API详细了解

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Document</title>
        <style>
            div {
        
                height: 100px;width: 100px;
                background-color: chartreuse;
            }
        </style>
        
        <script src="../js/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div id="d1"></div>
        <input type="text" id="i1" value="默认值">
        <input type="text" id="i2">
    </body>
    <script>
        //通过jquery选择器选择对应的jquery对象
        //类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
        //jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
        //jquery为常用属性额外定义的对应的方法 也定义的通用的属性操作方法
        //对innerHTML  与innerTEXT提供的方法
        var $d1 = $("#d1")
        //方法如果传入参数就是修改 没有传入参数就是获取
        $d1.html("修改内容")//等价于innerHTML属性的修改
    
        console.log($d1.html())//没有设置属性就是获取操作
    
    
        //对value属性的操作
        var $i1 = $("#i1");
        //jquery所有方法修改后返回的是当前jquery对象
        var $t = $i1.val("修改后的值")
        console.log($i1 == $t)
    
    
        //通用属性操作 attr方法
        //需要填入操作的属性名
        //如果只填入属性名 就是获取指定属性的值 如果将值也填入就是修改
        var $i2 = $("#i2");
        console.log($i2.attr("type", "text"))
    
    
        var $input = $("input");
        //jquery内置迭代 如果当前jquery对象代表多个dom标签 那么会将所有标签同时操作
        //  $input.val("aaaa")
    
        //由于返回值只能有一个 所以当前jquery对象代表对个标签获取值时 默认返回第一个dom对象的值
        console.log($input.val())
    </script>
    
    </html>

#### 2.3 获取及修改样式 ####

多样式的修改语法与json的使用相同，其复合属性可使用"-"链接也可以首字母大写链接

### 3. jQuery和js对象之间的转换 ###

jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用.

JS对象只能使用JS中提供的函数或属性，同样的JS中的属性或函数只能由JS对象进行调用

#### 3.1 jQuery对象转js对象 ####

jQuery中提供了get(index)函数用于对象的转换，同时可以使用数组下标的形式进行转换

//获取元素使用jquery
    var $btn = $('button');
    //将jQuery对象转换为js对象
    //var btn = $btn[0]; //利用数组本身的特性(下标)
    var btn = $btn.get(0); //jQuery本身提供的一种转换函数
    btn.onclick = function(){
        
        //将js对象转换为jQuery对象 this是js对象 $(js对象)
        //console.log(this.innerHTML);
        console.log($(this).html());
    }

#### 3.2 js对象转jQuery对象 ####

js对象转jQuery对象只需要满足jQuery的格式要求即可，使用$()包裹js对象后就是jQuery对象

//js对象
    var btn = document.getElementsByTagName("button")[0];
    //$()包裹js对象即可转为jQuery对象
    var $btn = $(btn);
    $btn.css('background','red');

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
          
                height: 100px;
                width: 100px;
                position: absolute;
                left: 50px;
                top: 20px;
                background-color: chartreuse;
            }
            img{
          
                position: absolute;
            }
            img:nth-of-type(1) {
          
                height: 500px;
                width: 500px;
                border-radius: 500px;
            }
            img:nth-of-type(2) {
          
                left: 530px;
                top: 150px;
                height: 200px;
                width:200px;
                border-radius: 500px;
            }
        </style>
        
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script src="../js/jquery-rotate.js"></script>
    
    </head>
    
    <body>
        <div id="d1"></div>
        <input type="text" id="i1" value="默认值">
        <input type="text" id="i2">
    
        <img src="/img/cm1.jpg" alt="">
        <img src="/img/cm1.jpg" alt="">
    </body>
    
    
    <script>
        //通过jquery选择器选择对应的jquery对象
        //类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
        //jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
        //虽然样式也是属性的异同也可以通过修改属性方法修改  但是很不方便
        //jquery同样对常用样式额外提供了方法  并且提供了通用样式操作方法
        var $d1 = $("#d1");
    
        //获取对应宽高数值
        console.log($d1.width());
        console.log($d1.height());
    
        //样式通用方法
        $d1.css("left", "100px");
        $d1.css("top", 100);
    
        console.log($d1.css("top"));
        //但是在css样式设置时通常会设置多个样式
    
        //jquery提供的css方法可以解析json格式数据  可以使用json形式填入多个样式修改
        $d1.css({
           "width": "200px", "height": "200px", "background-color": "red" });
        $d1.css({
           "left": 400, "top": 400 });
        var i = 1;
        setInterval(function () {
          
            $("img:nth-of-type(1)").rotate(i += 1)
        }, 1)
    
        var j = 1;
        setInterval(function () {
          
            $("img:nth-of-type(2)").rotate(j -= 1)
        }, 1)
    
    </script>
    
    </html>

### 4. jQuery中的遍历形式 ###

数组、集合或json对象的遍历，jQuery中提供了新的更简洁的遍历形式

#### 4.1 遍历节点 ####

$(‘选择器’).each(function(index,element)\{\})，该写法是用于遍历获取到的元素对象

//目的：输出元素的内容 函数中不带参数
    /* $('button').each(function(){
    		console.log(this.innerHTML);
    	}) */
    //函数中带有一个参数,该参数代表下标
    /* $('button').each(function(index){
    		console.log(index);
    	}) */
    //参数一：下标，参数二：对象
    $('button').each(function(index,element){
        
        console.log(index,element.innerHTML);
    });

#### 4.2 遍历数组或集合 ####

$.each(data,function(key,value)\{\})，主要用于遍历数组或json对象等

//遍历指定的集合数据,参数一：代表要遍历的集合对象，参数二：函数
    var arr = ["张飞","刘备","关羽"];
    /* $.each(arr,function(){
    		console.log(this);
    	}) */
    
    /* $.each(arr,function(index){
    		console.log(index);
    	}) */
    
    $.each(arr,function(index,element){
        
        console.log(index,element);
    })
    var json = {
        "name":'张飞',"age":13};
    $.each(json,function(key,val){
        
        console.log(key,val);
    })

### 5. jQuery事件绑定 ###

js中的所有事件都是以on开头的，在jQuery中是都不加on的

#### 5.1 ready事件 ####

ready事件是jQuery提供的当DOM元素加载完毕后执行的函数

ready和onload的区别：

> 1、onload事件是在页面的DOM结构及图片资源都加载完毕后执行的，而ready事件是在DOM结构加载完后执
> 
> 2、onload事件只能使用一次，ready事件可使用多次

//onload是在页面结构都加载完毕(DOM树结构及图片资源)后才开始执行其中的代码
    window.onload = function(){
        
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function(){
        
            alert(this.innerHTML);
        }
    } 
    window.onload = function(){
          //2个onolad无法同时执行，后面会覆盖前面的；
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function(){
        
            alert("hahaha");
        }
    } 
     $(document).ready(function(){
        
         $('button').click(function(){
        
             alert($(this).html());
         })
     })
    
     $(function(){
        
         $('button').click(function(){
        
             alert($(this).html());
         })
     })

在js中是无法直接给一组元素绑定事件的，但是在jQuery中可以

$('button').click(function(){
        
        alert($(this).html())
    })
    $('button').click(show)
    function show(){
        
        alert($(this).html())
    }

#### 5.2 焦点事件 ####

当元素获取焦点及失去焦点时触发该事件，失去焦点blur，获取焦点focus

//焦点事件，当输入框获取到焦点时改变其背景颜色
    $('input').focus(function(){
        
        $(this).css('background-color','pink')
    })
    //失去焦点事件，当输入框失去焦点时将背景变为白色
    $('input').blur(function(){
        
        $(this).css('background-color','white')
    })

#### 5.3 表单提交事件 ####

submit事件简化了js中的表单提交事件

//该函数的目的是为了验证表单中的数据，并给出验证的结果
    function check(){
        
        return false;
    }
    
     //jQuery中直接在函数返回结果即可
    $('form').submit(function(){
        
        return true;
    })

#### 5.4 on事件绑定 ####

在jQuery中提供了多种事件绑定的函数，根据版本的迭代更新，目前常用的主流的是on事件，其他的事件有：bind/unbind，live/die，delegate/undelegate。在jQuery的3.1.1的版本中，通过源码可以知道，新版本中的bind等事件的底层也是通过on来实现的。

##### 5.4.1 on单事件绑定 #####

通过on给元素绑定单个事件

##### 5.4.2 on绑定多个事件 #####

通过on同时给元素绑定多个事件

$('input').blur(function(){
        
        var phone = $(this).val();
        var $span = $(this).next();
        if(phone.length!=11){
        
    
            $span.html('手机号错误')
            $span.css('color','red')
        }else{
        
            $span.html('')
        }
    })
    $('input').focus(function(){
        
        $(this).next().html('请输入11位手机号');
        $(this).next().css('color','black')
    })
    
    $('input').on({
        
        'blur':function(){
        
            var phone = $(this).val();
            var $span = $(this).next();
            if(phone.length!=11){
        
    
                $span.html('手机号错误')
                $span.css('color','red')
            }else{
        
                $span.html('')
            }
        },
        'focus':function(){
        
            $(this).next().html('请输入11位手机号');
            $(this).next().css('color','black')
        }
    })

##### 5.4.3 on后添加的元素绑定事件 #####

针对通过动态添加到页面中的元素进行事件绑定（此处先做了解，动态增删时演示案例）

> 语法：$(已存在的父元素).on(事件名,子元素选择器,函数)

//给删除标签添加点击事件
    $('table').on('click','.del',function(){
        
        $(this).parent().parent().remove()
    })

#### 5.5 事件冒泡 ####

事件冒泡指事件向上传递-通常存在于具有包裹关系的元素中

$('button').click(function(){
        
        alert('btn up');
    })
    
    $('div').click(function(){
        
        alert('div up')
    })
    
    $('body').click(function(){
        
        alert('body up')
    })

如何阻止事件冒泡？

只要有事件的存在就一定有事件源-event

阻止事件冒泡：event.stopPropagation();

$('button').click(function(event){
        
        event.stopPropagation();
        alert('btn up');
    })

## 本章小结 ##

> 1.jQuery获取到的元素都是以组的形式存在的
> 
> 2.jQuery的对象不能使用js中的属性或函数
> 
> 3.jQuery中的操作基本都是以函数的形式存在的，js中的操作多数以属性的形式存在
> 
> 4.on的单事件绑定与直接对元素进行事件绑定是一样的，灵活选择

\})

### 5.5 事件冒泡
    
    事件冒泡指事件向上传递-通常存在于具有包裹关系的元素中
    
    ```js
    $('button').click(function(){
        alert('btn up');
    })
    
    $('div').click(function(){
        alert('div up')
    })
    
    $('body').click(function(){
        alert('body up')
    })

如何阻止事件冒泡？

只要有事件的存在就一定有事件源-event

阻止事件冒泡：event.stopPropagation();

$('button').click(function(event){
        
        event.stopPropagation();
        alert('btn up');
    })

## 本章小结 ##

> 1.jQuery获取到的元素都是以组的形式存在的
> 
> 2.jQuery的对象不能使用js中的属性或函数
> 
> 3.jQuery中的操作基本都是以函数的形式存在的，js中的操作多数以属性的形式存在
> 
> 4.on的单事件绑定与直接对元素进行事件绑定是一样的，灵活选择  
> ![在这里插入图片描述][f16e28357309443dab459a5dac6bdf14.png_pic_center]

[d93581b80aa542b1a3995e032db1390f.png_pic_center]: https://img-blog.csdnimg.cn/d93581b80aa542b1a3995e032db1390f.png#pic_center
[f16e28357309443dab459a5dac6bdf14.png_pic_center]: https://img-blog.csdnimg.cn/f16e28357309443dab459a5dac6bdf14.png#pic_center