一、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>