JQ学习

　　一、引入  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方法