jQuery入门学习一

感谢一纸荒凉

如何引用jQuery

1.官网下载通过script引入
注意：我们这里学习中下载未压缩版本即可，实际项目上线中才引入压缩过后的min.js版本

<script src="./jquery-3.6.0.js"></script>

2.从CDN引入

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

原生与jQuery比对

    <input type="button" value="显示效果" id="btn">
    <div><div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        // 原生JavaScript
        document.querySelector('#btn').addEventListener("click", function() {
            let divObj = document.querySelector('div');
            divObj.style.width = "200px";
            divObj.style.height = "200px";
            divObj.style.backgroundColor = "red";
        })
        // jQuery
        $('#btn').click(() => {
            $('div').css({
                'width': "200px",
                'height': "200px",
                'backgroundColor': "pink"
            })
        })
    </script>

jQuery四种类型

• DOM中的顶级对象：document——页面中的顶级对象
• BOM中的顶级对象：window——-浏览器中的顶级对象
• Query中的顶级对象：jQuery——$

$是jQuery的顶级对象，相当于原生JavaScript中的window。把元索利用$包装成Query对象,就可以调用jQuery的方法。
$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。

使用jQuery获取元素选择器为div的对象并隐藏

$('div').hide(); //通过元素选择器获取div
jQuery('div').hide();//通过元素选择器获取div

jQuery工厂函数$()的四种使用方式

1.$(选择器，上下文) DOM选择，可以指定上下文；

$('li').css('color','blue');
$('li','#first').css('color','blue');
// $('li','#first') === $('#first li')
$('#first li').css('color','red');

2.$(JS对象) jQuery包装器，将原生的js对象转为jQuery对象
为什么要转换为jQuery对象，因为想使用jQuery对象上的非常丰富的方法和属性

$(document.body).css('backgroundColor','lightgreen');
console.log($(document.querySelectorAll('li')));

3.$(html文本) 生成创建DOm元素
用jQuery来创建DOM也是常见操作，例如在ul下创建一个li：

$('<li>').appendTo($ul);

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

4.$(callback) DOM加载完成
通常JavaScript需要在DOM加载完成后执行，否则DOM操作可能会失效。jQuery提供了一个方便的方法来监听DOM加载完成

$(function(){
 // DOM载入后执行
});
// $(callback)的作用完全相当于$(document).ready(callback)

总结$()的参数的四种类型：
1.选择器
2.原生JS对象（包装器功能）
3.html字符串（创建dom元素）
4.回调函数（DOM加载完成自动调用）

jQuery对象和js对象

细说为什么要将jQuery对象和DOM对象进行互相转换，要想使用jQuery的方法和属性，就需要将其转换为jQuery的对象才能使用，但jQuery只是封装了一些好用的属性和方法，并不能完全代替JavaScript，这时候就可以将jQuery对象转换为原生的DOM对象，从而来完成一些特定的问题。

jquery对象转成DOM对象

DOM对象才能使用DOM方法，jquery对象不能使用DOM中的方法，但jquery对象提供了一套更加完善的工具用于操作DOM。
jQuery提供了两种方法：[index]和get(index)

// 使用索引
let div = $("div");  //jQuery对象
console.log(div[0]); //DOM对象
// 使用get(index)
let div = $("div"); //jQuery对象
console.log(div.get[0]); //DOM对象
// 使用...rest
console.log([...$('li')]); // jQuery对象转DOM对象

DOM对象转换为jquery对象

对于一个DOM对象,只需要用$()把DOM对象给包装起来，就可以获得一个jquery对象了，方式为

$(DOM对象).$(document.querySelector('div'))

let btnObj = document.getElementById('btn');
btnObj.onclick = function(){
    this.style.backgroundColor = 'red';
}
// DOM对象转JQuery对象
$(btnObj).click(function(){
    $(this).css('backgroundColor','red');
})