正文

基础知识

是一个JS框架

优化DOM操作

JQuery对象和JS对象方法不通用

需要相互转换：

jq -- > js : jq对象[索引] 或者 jq对象.get(索引)

js -- > jq : $(js对象)

// JS转JQ
        var div22 = document.getElementById("div2");
        alert(div22);
        var $div22 = $("div22");
        alert($div22)

// JQ转JS
        var div1 = $("#div1");
        div1[0].innerHTML = "ddd";
        // alert(div1.html());

        var div2 = $("#div2");
        alert(div2.html());
        var $div = $("div");
        // $div[0].innerHTML = "eee";
        $div.get(0).innerHTML = "eee"

选择器

筛选具有相似特征的元素(标签)

入口函数

JQ写法：

$(document).ready(function(){     
    // 执行代码 
}); 
//或者 
$(function () {     
    // 执行代码 
});

JS写法：

window.onload = function () {     
// 执行代码 
}

区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

注意：

window.onload = function(){} 用于整个网页（包括图片等）加载完毕后执行方法内代码块。

$(document).ready(function(){}) 用于 DOM 结构加载完毕后就可以执行方法内代码块，由此得出，onload 是在 ready 后执行

DOM操作

通用属性操作

attr(): 获取/设置元素的属性
removeAttr():删除属性

prop():获取/设置元素的属性
removeProp():删除属性

attr和prop区别？

如果操作的是元素的固有属性，则建议使用 prop
如果操作的是元素自定义的属性，则建议使用 attr

拓展

注意：JQuery需要导包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>//JQuery包
</head>

总结

今天学习了JQuery的基础知识，包括基础语法，选择器，DOM操作，在基础操作中对比了JS语法，其中重点是事件绑定的不同，JS的事件绑定window.onload =function{} 只能定义一次，如果定义多次，后边的会将前边的覆盖掉，JQ的入口函数不会对前面的内容有任何影响，之后在选择器和DOM操作中的知识是JQuery特有方法，简化代码，内容很多，记忆量大，但好理解；JQuery极大地所见了相同操作下的代码量，要时刻明确操作的对象是JS对象还是JQ对象，之后直接根据需求调用对应的方法即可

JQuery基础

正文

基础知识

选择器

入口函数

DOM操作

拓展

总结