一、引入 JQ
本地
<script src = "js/jquery-3.3.1.js"></script>
CDN
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
二、JQ对象
// jQuery: 具有jq框架规定的所有功能的调用者，也就是框架产生的唯一对象
// $本质上就是jQuery对象，开源通过 var JQ = jQuery.noConflict(); 来自定义jQuery对象
三、延迟加载
// jq的延迟加载：文档树加载完毕，即回调
$(document).ready(function() {})
// 1.早于window.onload
// 2.可以多次绑定事件
// 3.可以简写为$(function() {})
四、jq操作
选择器
// $(css选择器语法)
// eg： $('.box') 得到的是一个存放原生js对象的数组，就是jq对象，页面中有多少个.box, 该jq对象就承载着多少个对象，.可以作为一个整体来使用
对象间转换
// js对象： box jq对象： $box
// 将js对象转换为jq对象： $(box)
// 将jq对象转换为js对象： $box[index]
文本操作
// 获取原有文本
$box.text() | $box.html()
// 设置新文本
$box.text('newData') | $box.html('<b>newData</b>')
事件绑定
// $box为jq对象
$box.click(function(ev) {
})
// 注：jq对象如果包含多个页面元素对象，可以一次性对所有对象绑定该事件
// ev事件为jq事件，兼容js事件
// this为js对象，$(this)就转换为jq对象
// 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
类名操作
$box.addClass("newClass") // 添加一个新类名
$box.removeClass('oldClass') // 删除一个已有的类名
// 多类名时，jq操作类名将每个类名最为单一考虑对象，不会影响其他类名
样式操作
$box.css("background-color") //获取背景颜色
$box.css("background-color","red") //设置背景颜色
$box.css("background-color", function() {return "yellow" } //通过函数返回值设置背景颜色
文档结构关系
// 父
$sup.parent()
// 父，父的父...
$sup.parents()
// 子们
$sup.children()
// 上兄弟
$sup.prev()
// 下兄弟
$sup.next()
// 下兄弟们
$sup.nextAll()
// 同级别的兄弟们
$sup.siblings()
// 在sup下查找类名为inner的子级
$sup.children('.inner')
// 获得的结果都是jq对象,还可以接着使用jq方法