1. 使用<script>引用jQuery源码库文件
1). 本地引入
2). 在线远程引入(CDN):
https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js
https://cdn.bootcss.com/jquery/1.9.0/jquery.js
2. 在<script>中调用jQuery核心函数和使用jQuery对象
3.
. jQuery 参数为选择器 ——》DOM对象，function->回调函数，标签——》生成一个DOM元素
. jQuery核心函数
* 简称: jQuery函数($/jQuery)
* jQuery库向外直接暴露的就是$/jQuery
* 引入jQuery库后, 直接使用$即可
* 当函数用: $(xxx)
* 当对象用: $.xxx()
. jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
4：
console.log(typeof jQuery)//function
$("button").each(function () {
console.log(this)//this指向便利的dom元素
})
jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
5
基本选择器
- #id : id选择器
- element : 元素选择器
- .class : 属性选择器
- * : 任意标签
- selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
- selector1selector2selectorN : 取多个选择器的交集(相交选择器)
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
在给定的祖先元素下匹配所有的后代元素
2. parent>child
在给定的父元素下匹配所有的子元素
3. prev+next
匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
匹配 prev 元素之后的所有 siblings 元素 ~* *表示后面所有的兄弟元素
选中ul下的class为box的元素后面的所有兄弟元素
$("ul .box~*").css("color","red")