jQuery 可以理解为是 js原生封装了很多的好用的方法放在了jquery.js这个文件中。
1.选择器
（1）基础选择器
| 名称 | 用法 | 描述 |
|---|
| 全选选择器 | $('*') | 匹配所有元素 |
| id选择器 | $('#id') | 获取指定id的元素 |
| 标签选择器 | $('div') | 获取同一类标签的所有元素 |
| 类选择器 | $('.class') | 获取同一类class的所有元素 |
| 并集选择器 | $('div,p,li') | 选取多个元素 |
| 交集选择器 | $('li.class') | 同时拥有这些属性的元素 |
（2）层级选择器
| 名称 | 用法 | 描述 |
|---|
| 后代选择器 | $('ul li') | 获取ul下的所有li元素，包括孙子等 |
| 子级选择器 | $('ul>li') | 获取亲儿子层级的元素，不会获取孙子层级的元素 |
| 相邻选择器 | $('p+li') | 选取紧邻目标元素的下一个元素 |
| 同辈选择器 | $('p ~ li') | 选取目标元素之后的所有同辈元素 |
（3）属性选择器
| 符号 | 用法 | 描述 |
|---|
| [] | $('a[href]') | 选取属性有href的a标签 |
| ! | $('li[class!=a]') | 选取属性不是某个特定值的元素 |
| $('a[href^=www]') | 指定属性值以指定值开头的元素 |
| $ | $('a[href$=com]') | 指定属性值以指定值结尾的元素 |
| * | $('a[href*=baidu]') | 指定属性值包含指定值的元素 |
（4）过滤选择器
| 语法 | 用法 | 描述 |
|---|
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $('li:eq(2)') | 获取索引号为2的li元素（索引号从0开始） |
| :odd | $('li:odd') | 获取索引号为奇数的li元素 |
| :even | $('li:even') | 获取索引号为偶数的li元素（0为偶数） |
| :not(selector) | $('li:not(.a)') | 获取class不是a的li元素 |
| :gt(index) | $('li:gt(2)') | 获取索引号大于2的li元素（不包括2） |
| :lt(index) | $('li:lt(2)') | 获取索引号小于2的li元素（不包括2） |
| :header | $(':header') | 获取所有标题元素，h1-h6 |
| :focus | $(':focus') | 获取当前得到焦点的元素 |
| :visible | $('div:visible') | 获取所有可见的div元素 |
| :hidden | $('div:hidden') | 获取所有隐藏的div元素 |
（4）筛选方法
| 语法 | 用法 | 说明 |
|---|
| find(selector) | $('ul').find('li') | 获取ul元素的后代li元素 |
| eq(index) | $('li').eq(2) | 相当于$('li:eq(2)') |
| hasClass(class) | $('li').hasClass(a) | 检查当前元素是否含有某个特定的类，有则返回true |
2.显示隐藏效果
show()显示元素
hide()隐藏元素
<button style="margin:0 auto;display: block;">开关按钮</button>
<div style="display: none;width: 100vw;height: calc(100vh - 22px);"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
let count = 1;
$('button').click(function(){
console.log(count);
console.log( $('div').css('background-color') );
if(count==1){
$('div').css('background-color','red')
$('div').show(1000);
count++
return;
}
if(count==2){
$('div').css('background-color','yellow')
count++
return
}
if(count==3){
$('div').hide(1000);
count=1
}
})
</script>
复制代码
3.基本操作
（1）设置class的方法
①添加
$('div').addClass('a')
②删除
$('div').removeClass('a')
③切换（有则删除，无则添加）
$('div').toggleClass('a')\
（2）节点操作
html()、text()、val()
| 语法格式 | 描述 |
|---|
| html() | 获取匹配的第一个元素的HTML内容 |
| html('内容') | 设置所有匹配元素的HTML内容，可识别标签 |
| text() | 获取所有匹配元素的文本内容 |
| text('内容') | 设置所有匹配元素的文本内容，不可识别标签 |
| val() | 返回表单元素的值 |
| val('内容') | 设置表单元素的值 |
添加节点
| 语法 | 描述 |
|---|
| A.append(B) | 将B添加至A的结尾 |
| A.prepend(B) | 将B添加至A的开头 |
| A.after(B) | 将B添加至A的后面 |
| A.before(B) | 将B添加至A的前面 |
<head>
<style>
.a {
width: 50px;
border-radius: 50%;
margin: 5px;
}
</style>
</head>
<body>
//向前向后随机添加图片
<button>向前添加</button>
<button>向后添加</button>
<div> </div>
<script src="./jquery-1.12.4.js"></script>
<script>
let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg'];
$('button:first').click(function () {
var i = Math.floor(Math.random() * (3))
$('div').prepend("<img src='" + arr[i] + "' class='a'>")
})
$('button:last').click(function () {
var i = Math.floor(Math.random() * (3))
$('div').append("<img src='" + arr[i] + "' class='a'>")
})
</script>
</body>
