一、jQuery介绍
jQuery是什么？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或Javascript框架）。jQuery的涉及宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事；它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互；
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件；jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等；
jQuery的版本：目前在市场上，1.X，2.X、3.X功能的完善在1.X、2.X的时候是属于删除旧代码，去除对于旧的浏览器兼容代码；3.X的时候增加es的新特性以及调整核心代码的结构；
jQuery的引入：根本上，jQuery就是一个写好的js文件，所以想要使用jQuery的语法必须先引入到本地；
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>二、jQuery的选择器
1.jquery与dom的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<body>
<div>123</div>
<div class="c1">123</div>
<div class="c1">345</div>
<p id="i1">234</p>
<p>234</p>
<script>
//jquery的实例化过程就是在选择dom元素的过程
$('.c1').css('color','red')
//jquery对象和dom对象的转换关系
console.log($('.c1')[1].innerHTML)
//将dom对象转换为jquery对象
var ele = document.getElementById('i1')
$(ele).css('color','green')
</script>
</body>
</html>2.jquery的选择器
2.1直接查找
基本选择器
| 实例 | 说明 |
| $('#id') | id选择器 |
| $('.class') | class选择器 |
| $('element') | 标签选择器 |
| $('#id,.class,element') | 逗号或选择器 |
| $('#id .class element') | 空格与选择器 |
组合选择器
| 实例 | 说明 |
| $('.outer div') | ancestor descendant 包含选择器 |
| $('.outer > div') | parent > child 父子选择器 |
| $('.outer + div') | prev + next 下一个兄弟选择器 |
| $('.outer ~ div') | prev ~ siblings 兄弟选择器 |
属性选择器
| 实例 | 说明 |
| [attribute=value] | 获取拥有指定数据attribute，并且值为value的元素 |
| $("[type='checked']") | |
| $("[class='XXX']") |
表单选择器
| 实例 | 说明 |
| $("[type='text']") 可简写为 $(":text") | 指form表单中tupe='text'的标签 |
| :password | |
| :enabled | |
| :disabled | |
| :checked | |
| :selected |
筛选器
| 实例 | 说明 |
| $('ul li:first') | 从已获取的元素集合中提取第一个元素 |
| :last | 从已获取的元素集合中提取最后一个元素 |
| :first-child | 从已获取的元素集合中提取第一个子元素 |
| :last-child | 从已获取的元素集合中提取最后一个子元素 |
| :nth-child | |
| :even | 从已获取的元素集合中提取下标为偶数的元素（下标从0开始） |
| :odd | 从已获取的元素集合中提取下标为奇数的元素 |
| :eq(index) | 从已获取的元素集合中提取指定下标的子元素 |
| :gt(index) | 从已获取的元素集合中提取大于等于指定下标的子元素 |
| :lt(index) | 从已获取的元素集合中提取小于等于指定下标的子元素 |
| 筛选器方法（适用于传参） | |
| $().first() | 从已经获取的元素中提取第一个元素 |
| $().last() | 从已获取的元素集合中提取最后一个元素 |
| $().eq() | 从已获取的元素集合中提取指定下标的子元素 |
2.2导航查找
| 实例 | 说明 |
| $('ul').children('.c1') | 查找子代标签；仅查找子代 |
| $('ul').fild('.c1') | 查找后代标签；会查找子孙后代 |
| $('.c1').next() | 向下查找兄弟标签 |
| $('.c1').nextAll() | |
| $('.c1').nextUntil() | |
| $('.c1').prev() | 向上查找兄弟标签 |
| $('.c1').prevAll() | |
| $('.c1').prevUntil() | |
| $('.c1').siblings() | 查找所有兄弟标签 |
| $('.c1').parent() | 查找父标签 |
| $('.c1').parents() | |
| $('.c1').parentUntil() |
链式操作示例：$('.c1').next().next().css('color', 'red')
3.jQuery的事件绑定
<script>
$('ul li').click(function(){
// 绑定事件
// this在事件函数中指代触发事件的dom标签
// this.style.color='red'
// alert('123')
// $(this).css('color','red')
// $(this).siblings().css('color','black')
// 链式操作
$(this).css('color','red').siblings().css('color','black')
})
</script>4.jQuery的操作标签
1.文本操作
| 实例 | 说明 |
| $(选择符).html() | 读取元素中的内容，如果$()函数获取了多个元素，则提取第一个元素的内容 |
| $(选择符).html(内容) | 修改内容，如果$()函数获取了多个元素，则批量修改内容 |
| $(选择符).text() | 读取元素中的内容，如果$()函数获取了多个元素，则提取第一个元素的内容；获取的内容是存文本，不包含html代码 |
| $(选择符).text(内容) | 修改内容，如果$()函数获取了多个元素，则批量修改内容；若修改的内容中有html文本，则直接转成实体字符，而不是html代码 |
2.value操作
3.属性操作
| 实例 | 说明 |
| $('选择符').attr('属性名') | 获取非表单元素的属性值，只会提取第一个元素的属性值 |
| $('选择符').prop('属性名') | 表单元素的属性，只会提取第一个元素的属性值；prop适用于布尔值类型操作；类似于checkbox选择框的checked属性 |
| $('选择符').attr('属性名','属性值') | 修改非表单元素的属性值，如果有多个元素，则全部修改 |
| $('选择符').prop('属性名','属性值') | 修改表单元素的属性值，如果元素有多个，则全部修改 |
| $('选择符').attr({'属性名1':'属性值1','属性名2':'属性值2'......}) | |
| $('选择符').prop({'属性名1':'属性值1','属性名2':'属性值2'......}) |
4.css样式操作
| 实例 | 说明 |
| $().css(‘样式属性’) | 获取样式 |
| $().css("样式属性","样式值").css("样式属性","样式值"); | 操作样式 |
| $().css({"样式属性1":"样式值1","样式属性2":"样式值2",....}) | 操作样式 |
| $().css("样式属性":function(){ // 其他代码操作 return "样式值"; }); |
5.class属性操作
| 实例 | 说明 |
| $('.c1').addclass('c3') | 给获取到的所有元素添加指定class样式 |
| $('.c1').removeclass('c3') | 给获取到的所有元素删除指定class样式 |
| $('.c1').toggleclass('c3') | 给获取到的所有元素进行判断，如果有指定的class样式则删除，如果没有指定的class样式则添加 |
tab切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 800px;
height: 300px;
/*border: 1px solid rebeccapurple;*/
margin: 200px auto;
}
.tab ul{
list-style: none;
}
.tab ul li{
display: inline-block;
}
.tab_title {
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
}
.tab .tab_title li{
padding: 10px 25px;
font-size: 14px;
}
.tab .tab_title li.current{
background-color: #e4393c;
color: #fff;
cursor: default;
}
.tab_con li.hide{
display: none;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab_title">
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评论</li>
</ul>
<ul class="tab_con">
<li>商品介绍...</li>
<li class="hide">规格与包装...</li>
<li class="hide">售后保障...</li>
<li class="hide">商品评论...</li>
</ul>
</div>
<script>
$('.tab_title').children().click(function(){
$(this).addClass('current').siblings().removeClass('current')
$(".tab_con li").eq($(this).index()).removeClass("hide").siblings().addClass("hide")
})
</script>
</body>
</html>
