1.引入JQ
- 本地
<!-- 下载jq到本地 -->
<script src="js/jquery-3.3.1.js"></script>- CDN
<!-- jq CDN 地址 --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
2.JQ对象
// jQuery: 具有jq框架规定的所有功能的调用者, 也就是框架产生的唯一对象 // $本质上就是jQuery对象, 开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象
3.延迟加载
// jq的延迟加载: 文档树加载完毕, 即回调 $(document).ready(function() {}) // 1. 早于window.onload // 2. 可以多次绑定事件 // 3. 可以简写为$(function() {})
4.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.prevAll() // 下兄弟 $sup.next() *** // 下兄弟们 $sup.nextAll() // 同级别的兄弟们 $sup.siblings() *** // 在sup下查找类名为inner的子级 $sup.children('.inner') // 获得的结果都是jq对象, 还可以接着使用jq方法