JQuery的第一天

JQuery的第一天

认识 jQuery

jQuery是一个 Javascript 专注于 DOM 操作的类库，通过一系列的封装，不仅简化了 DOM 操作，还处理了不同浏览器之间的兼容，极大的提升了编码的效率，其口号是 Write Less Do More!

基础概念

jQuery 是基于 Javascript 构造函数的原型对象实现的，通过为原型对象添加属性或方法的方式实现对DOM 操作的封装

总结：
网页中引入 jQuery 后会得到一个全局的函数 jQuery 或 $
$ 是 jQuery 函数的别名，使用 $ 比使用jQuery 更方便 每次调用 jQuery 或 $ 函数都会得到一个新的实例
原型对象中存在许多的方法，调用这些方法实现 DOM的各种操作

选择器

jQuery 中的选择器是用来获取 DOM 节点的，其功能类似于原生的 querySelectorAll 方法，
jQuery 中所支持的选择器与 CSS 的选择器几乎一致。

选择器：jQuery通过元素的选择器获取元素、注意jQuery获取的是伪数组形式的，称为jQuery的对象
标签选择器 类选择器 id选择器 后代选择器

总结：
将 CSS 的选择器以参数形式传给 jQuery 函数后便可以获取相应的 DOM 节点
通过 jQuery 选择器获取 DOM节点的同时也得到了一个 jQuery 实例
调用实例方法完成相应的 DOM 操作
注：几乎所有 CSS 选择器都可以被 jQuery支持

对象

虽然在 jQuery 中利用选择器能获取到相应的 DOM 节点，但此时的 DOM 节点并非是原生的DOM 对象，因此也就无法直接调用原生的 DOM 方法

在 jQuery 中利用选择器获取的 DOM 节点 jQuery 构造函数的实例对象，只能调用实例的方法才能完 成 DOM 操作
我们将jQuery 获取的 DOM 节点对象称为 jQuery 对象，css 方法是 jQuery 对象的方法，而 style 是 原生 DOM对象中的一个属性。
在 jQuery 中并非只能通过选择器获取 jQuery 对象，它还可以将任意原生 DOM 对象转换成 jQuery对 象

JQuery对象---------> 原生对象

<p>11111111111</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

1.1找下标

//1.1找下标
        $('p')[0].style.color = 'blue'
        $('p')[0].innerHTML = '128'

运行结果

1.2方式 JQuery对象.get(下标)

// 1.2方式  JQuery对象.get(下标)
        $('li').get(2).style.backgroundColor = 'pink'

运行结果

原生对象---------> JQuery对象

 let abc = document.querySelector('p')
        //需要转换
        // abc.css('color', 'pink')//报错
        $(abc).css('color', 'pink')

快捷方法

我们将以原生事件类型名称做为方法名为 DOM 添加事件的方式称为快捷方法，

总结： 语法简洁，接收回调函数做为参数，事件触发时该回调函数被执行
事件触发后回调函数中的 this 指向添加事件的原生 DOM
$(this) 是将原生 DOM 对象转换为 jQuery 对象

 $('.box').click(function () {
            $('.box').css('backgroundColor', 'blue')
        })
        $('.box').mouseover(function () {
            $('.box').css('width', '400px')
        })
        $('.box').mouseout(function () {
            $('.box').css('width', '200px')
        })

案例 抽奖活动
css样式

<style>
        .box {
            width: 500px;
            height: 500px;
            background: url(./img/1.jpg) no-repeat;
            background-size: contain;
            transition: all 5s;
            /* transform: rotate(188deg); */
        }

        span {
            width: 10px;
            height: 200px;
            display: block;
            background-color: #222;
            position: absolute;
            top: 82px;
            left: 255px;
            /* transform: translate(-50%, -100%); */
        }
    </style>

<button>开始抽奖</button>
    <div class="box">
    </div>
    <span></span>
    <script src="./jQuery/jquery-3.5.1.js"></script>
    <script>
    //每次旋转，从原来的基础上往上加，不然会逆时针回到原来的位置
        let num = 0
        $('button').click(function () {
        //随机函数
            num += Math.random() * 360 + 1000
            $('.box').css('transform', `rotate(${num}deg)`)
        })
    </script>

基础方法

在 jQuery 中使用快捷方法能够快速为 DOM 节点添加事件监听，然而灵活性方面略显不足，因此 jQuery 又提供了较为灵活的 on/off、bind/unbind、one 方法处理 DOM 事件

总结： on、bind、one 语法结构与 addEventListener 类似，分别接受事件类型和回调函数做为参数
on 和bind 含义基本一致推荐使用 on 添加事件监听，one 添加的事件监听只生效 1 次 off 和 unbind 用来移动 DOM的事件，无论以何种方式添加的事件均可被移除，推荐使用 off 方法
事件回调函数中的 this 仍然指向的是事添加事件监听的原生 DOM

 <button>开始抽奖</button>
    <div class="box">
    </div>
    <span></span>
    <script src="./jQuery/jquery-3.5.1.js"></script>
    <script>
        //  需求：点击后，转一次，再次点击没有反应
        $('button').on('click', function () {
            //1.内部计算一次
            let num = Math.random() * 360 + 1000
            // 2.设置box
            $('.box').css('transform', `rotate(${num}deg)`)
            // 3.移除事件
            $('button').off('click')
        })
    </script>

自定义事件

自定义事件类型语法与原生事件类型一致
自定义事件只能通过 trigger 方法才能被触发
trigger 方法也能用来触发原生事件类型
注：自定义事件是一种高级的用法，不必深入理解只需要了解其基本用法即可。

样式

行内样式

1.设置单个样式 行内

 $('.btn').click(function () {
            $('.demo').css('color', 'blue')
        })

运行结果

2.获取样式 (行内外)只要是个样式，进行获取

 $('.btn').click(function () {
 //jquery样式可以获取行外的样式
            let res = $('.demo').css('width')
            console.log(res);
//原生(webapi)方式获取只能获取行内样式
            let box = document.querySelector('.demo')
            console.log(box.style.width);
        })

设置多个样式

 // 1.设置多个样式  行内
        $('.btn').click(function () {
            // webapi 
            // let box = document.querySelector('.demo')
            // box.style.cssText = 'color:red;width:400px'
            $('.demo').css({
                color: 'red',
                backgroundColor: '#333',
                width: '400px'
            })
        })

总结：
接受两个参数（分别为样式属性和值）时，逐一改变网页元素单个的样式属性 接受一个参数时（对象类型），同时修改网页元素的多个样式属性
样式属性值为长度时，省略长度单位 px 接受单个样式属性做为参数时，能够获取该属性对应的值
注：css 方法对应原生 DOM 操作中的style 属性

类名操作

<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

        .active {
            width: 500px;
            height: 100px;
            background-color: aqua;
            border-radius: 25px;
        }
    </style>
    <div class="box">111</div>
    <button class="add">添加类名</button>
    <button class="remove">移除类名</button>
    <button class="toggle">切换类名</button>
    <button class="has">检测类名</button>
    <script src="./jQuery/jquery-3.5.1.js"></script>

运行结果

1.添加类名

 $('.add').on('click', function () {
            $('.box').addClass('active')
        })

运行结果

2.移除类名

 $('.remove').on('click', function () {
            $('.box').removeClass('active')
        })

运行结果

3.切换类名

$('.toggle').on('click', function () {
            $('.box').toggleClass('active')
        })

运行结果

4.检测类名

$('.has').on('click', function () {
            let res = $('.box').hasClass('active')
            console.log(res);
        })

运行结果

隐式迭代

1.方法更加简短
2.隐式迭代：看不见 迭代(循环)
2.1理解为$(‘li’)内部帮助大家做循环遍历
2.2不光css 几乎99% JQ方法都有隐式迭代
3.特点：如果获取JQ对象(伪数组)里面所有成员是同一个设置时，默认隐式迭代

<style>
        .ac {
            font-size: 30px;
        }
    </style>
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script src="./jQuery/jquery-3.5.1.js"></script>
 <script>
        // 1.方法更加简短
        // 2.隐式迭代：看不见  迭代(循环)
        //     2.1理解为$('li')内部帮助大家做循环遍历
        //     2.2不光css  几乎99%  JQ方法都有隐式迭代
        //3.特点：如果获取JQ对象(伪数组)里面所有成员是同一个设置时，默认隐式迭代
        $('li').css('backgroundColor', 'pink')
        $('li').addClass('ac')
    </script>

运行结果

函数内部this和e

<style>
        .aa {
            font-size: 30px;
            background-color: pink;
        }
    </style>
     <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>10</button>
    <script src="./jQuery/jquery-3.5.1.js"></script>
    <script>
        $('button').click(function () {
            //全部移除类
            $('button').removeClass('aa')
            //当前变化
            $(this).addClass('aa')

        })
    </script>

运行结果

链式

链式也叫链式操作，它是 jQuery 中提供的一种简便的语法结构，可以在一定程度上精简代码、增强代码的可读性

//jq对象调用方法后，返回值

        let btns = $('button')
        let res = btns.on('click', function () {
            console.log(res == btns);
        })

运行结果 所以res与btns是相同的

 $('button').css('background', 'pink').on('click', function () {
            console.log(1);
        }).addClass('aa')

运行结果

总结：
链式操作只是一种简便的语法结构
链式操作时实例方法自左向右依次被执行

查找

父子关系

Find、children、parent、parents

find 方法，参照某父元素查找其后代元素，该方法以选择器做为参数，在其后代元素查找符合选择器条件的网页元素
children方法，参照某父元素查找其子元素、注: children 方法还允许传入选择器获取指定的子元素。
parent方法，参照某个子元素查找其父元素
parents 方法，参照某个子元素查找其祖先元素、注: parents方法还允许传入选择器获取指定的祖先元素。

兄弟关系

siblings、 prev、 next

siblings 方法，查找所有同级结构关系的元素、注: siblings 方法还允许传入选择器获取指定的兄弟元素。
prev方法，查找当前元素之前的同级结构元素
next 方法，查找当前元素之后的同级结构元素

筛选

first 方法，筛选出集合中的第一个元素
last 方法，筛选出集合中的最后一个元素
eq 方法，以索引为依据筛选集合中的元素

属性

attr 接受属性名为参数时用于获取该属性对应的值
attr 接受属性和值两个参数时用于设置该属性且赋值
注：针对自定义属性可以使用 data 方法。

文本

text 相当于原生的 innerText ，它无法解析 html 标签
html 相当于原生的 innerHTML，能够解析文本中的html 标签
html 和 text 方法不传入参数时用于读取文本内容