前言

在开发中，我们经常会引用很多的.js文件，这些文件都是别人写好的，我们可以直接拿来用

• JQuery.js 使用率10%以下，濒临淘汰，但是很经典。css库，bootstrap，layui，easyui都依赖于JQuery。
• React.js 使用率30%以下
• Angular.js 使用率10%以下，很难
• Vue.js 使用率50%以上，简单，最主流

基础使用

文档就绪函数

$(document).ready(function() {
    alert("文档已就绪");
});

普通函数

$(function() {
    alert(123);
});

选择器

基本选择器

• id选择器，返回值时固定的一个元素
• class选择器，返回值是一堆
• 标签选择器，返回值是一堆
• *号选择器，返回值是页面上的所有标签

$( () => { // 通过id获取 前面需要加#
    let div = $("#div1");
    alert(div);
})

$( () => { // 通过class获取
    let div = $("aaa");
    alert(div);
})

层级选择器

• div p div里面的p
• div>p 直接子元素
• div+p 相邻

过滤选择器

• :first 获取第一个元素
• :last 获取最后一个元素
• :eq(index) 给定位置的元素
• :gt(index) 大于指定位置
• :lt(index) 小于指定位置
• :not(selector) 除了selector以外的所有选择器

内容选择器

• :empty 匹配所有不包含子元素的选择器
• :parent 含有子元素的父元素

属性选择器

• [name] 包含name属性的元素
• [type=text] 文本框

事件

window.onload

如果把script放在html控件的下面，他将会后加载，看起来并没有什么问题，但是如果先加载script来获取对象的话，那么将会获取不到对象，所以我们要使用windows.onload事件

window.onload = function() {
    let div = document.querySelector("div");
    alert(div);
}