jQuery
jQuery=JavaScript+Query，是一个JavaScript函数库，为编写JavaScript提供了更高效便捷的接口。
jQuery安装
去官网下载jQuery，1.x版本练习就够用
jQuery引用
<script src="lib/jquery-1.11.2.min.js"></script>语法
基础语法
jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
- 美元符号定义jQuery
- 选择符（selector）”查询“和”查找“HTML元素
- jQuery的action()执行对元素的操作
$(document).ready()页面加载
$(document).ready()与window.onload类似，但也有区别
- js和jq的区别：jq在页面没加载完成的时候就可以执行
- js的页面加载事件：在一个页面中只能有一个，如果有多个，执行最后一个
- jq的页面加载事件：在一个页面中只能有多个，按照顺序执行
| window.onload | $(document).ready() | |
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一个页面不能同时编写多个 | 同一个页面能同时编写多个 |
| 简化写法 | 无 | $(function(){// 执行代码}) |
获取和设置节点内容
js与jQuery写法对比
js
document.getElementById('btn1').onclick=function(){
// 获取p标签的html
alert(document.getElementById('p1').innerHTML)
}jQuery
$('#btn1').click(function(){
alert($('#p1').html())
})练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取和设置节点内容</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
// js
// document.getElementById('btn1').onclick=function(){
// // 获取p标签的html
// alert(document.getElementById('p1').innerHTML)
// }
// jQuery
$('#btn1').click(function(){
alert($('#p1').html())
})
$('#btn2').click(function(){
$('#p1').html('hhhh')
})
})
</script>
</head>
<body>
<p id="p1">这是一个p标签</p>
<button id="btn1">获取节点的html</button>
<button id="btn2">设置节点的html</button>
</body>
</html>CSS样式
| 语法 | 说明 |
| css('属性', '属性值') | 为元素设置CSS样式的值 |
| addClass() | 为元素添加类样式 |
| next() | 获得元素其后紧邻的同辈元素 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置css</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
// 设置某个属性的样式
$('#div1').css({'background' : 'red',
'width' : '100px',
'height' : '100px'})
// CSS里面只有一个属性的时候用逗号隔开，多个用冒号隔开
$('#div1').next().css('color', 'blue')
})
$("#btn2").click(function(){
//添加类样式
// 优先级没有上面设置的高，所以不会有变化
$("#div1").addClass("aa");
})
})
</script>
<style>
.aa {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="div1">div</div>
<p>紧邻div后的同辈元素</p>
<button id="btn1">设置css样式的值</button>
<button id="btn2">设置标签的类样式</button>
</body>
</html>选择器
基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 标签选择器 | element | 根据给定的标签名匹配元素 | $('h2')选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $('.title')选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $('#title')选取id为title的元素 |
| 并集选择器 | selector1, selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $('div,p,.title')选取所有div、p和拥有class为title的元素 |
| 交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $('h2.title')选取所有拥有class为title的h2元素 |
| 全局选择器 | * | 匹配所有元素 | $('*')选取所有元素 |
基本选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
// id选择器
$('#box').click(function(){
// 标签选择器
$('h2').css('background', 'aqua')
// 类选择器
$('.title').css('color', 'dodgerblue')
// 并集选择器 和的关系 h3和title
$('h3, .title').css('background', 'yellow')
// 交集选择器 并且的关系 dd并且还是title
$('dd.title').css('background', 'red')
// 通用选择器
$('*').css('margin', '0px')
})
})
</script>
</head>
<body>
<div id="box">id为box的div
<h2 class="title">class为title的h2</h2>
<h3 class="title">class为title的h3</h3>
<h3>热门排行</h3>
<dl>
<dt><img src="images/03.jpg" width="93" height="99" alt="斗地主"></dt>
<dd class="title">斗地主</dd>
<dd>休闲游戏</dd>
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
</dl>
</div>
</body>
</html>层次选择器
层次选择器通过DOM元素之间的层次关系来获取元素
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $('#menu span')选取#menu下的<span>元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $('#menu>span')选取#menu的子元素<span> |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $('h2+dl')选取紧邻<h2>元素之后的同辈元素<dl> |
| 同辈元素选择器 | prev~siblings | 选取prev元素之后的所有siblings元素 | $('h2~dl')选取<h2>元素之后所有的同辈元素<dl> |
层次选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层次选择器</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$('h2').click(function(){
// 后代选择器
$('#menu span').css('color', 'red')
// 子元素选择器
$('div>span').css('background', 'yellowgreen')
// 相邻元素选择器
$('h2+dl').css('font-size', '30px')
// 同辈元素选择器
$('h2~dl').css('background', 'aqua')
})
})
</script>
</head>
<body>
<div id="menu">
<h2>全部旅游产品分类</h2>
<dl>
<dt>北京周边游<span>特价</span></dt>
<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
</dl>
<dl>
<dt>景点门票</dt>
<dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd>
<dd><a href="#">山水</a> <a href="#">双休</a></dd>
</dl>
<span>更多分类</span>
</div>
</body>
</html>属性选择器
属性选择器通过HTML元素的属性来选择元素
| 名称 | 语法构成 | 描述 | 示例 |
| 属性选择器 | [attribute] | 选取包含给定属性的元素 | $("[href]")选取含有href属性的元素 |
| [attribute=value] | 选取等于给定属性是某个特定值的元素 | $("[href='#']")选取href属性值为'#'的元素 | |
| [attribute!=value] | 选取不等于给定属性是某个特定值的元素 | $("[href!='#']")选取href属性值不为'#'的元素 | |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $("[href^='en']")选取href属性值以en开头的元素 | |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $("[href$='.jpg']")选取href属性值以.jpg结尾的元素 | |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $("[href*='txt']")选取href属性值中含有txt的元素 | |
| [selector] [selector2] [selectorN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻要点]")选取含有id属性和title属性为新闻要点的<li>元素 |
属性选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$('h2').click(function(){
$("[title]").css('color', 'red')
$("[title=kn_jp]").css('color', 'blue')
$("[title$='jp']").css('background', 'yellow')
$("[class=odds][title*='y']").css('background', 'green')
})
})
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">银魂</li>
<li class="evens" title="hm_da">黑猫警长</li>
<li class="odds" title="xl_ds">仙履奇缘</li>
</ul>
</div>
</body>
</html>
基本过滤选择器
基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或者奇数的元素
| 语法构成 | 描述 | 示例 |
| :first | 选取第一个元素 | $("li:first")选取所有<li>元素的第一个<li>元素 |
| :last | 选取最后一个元素 | $("li:last")选取所有<li>元素中的最后一个<li>元素 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $("li:even")选取索引是偶数的所有<li>元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $("li:odd")选取索引是奇数的所有<li>元素 |
基本过滤选择器可以根据索引的值选取元素
| 语法构成 | 描述 | 示例 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)")选取索引等于1的<li>元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $("li:gt(1)")选取索引大于1的<li>元素（注：大于1，不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $("li:lt(1)")选取索引小于1的<li>元素（注：小于1，不包括1） |
基本过滤选择器还支持一些特殊的选择方式
| 语法构成 | 描述 | 示例 |
| :not(selector) | 选取去除所有与给定选择器匹配的元素 | $("li:not(.three)")选取class不是three的元素 |
| :header | 选取所有标题元素，如h1~h6 | $(":header")选取网页中所有标题元素 |
| :focus | 选取当前获取焦点的元素 | $(":focus")选取当前获取焦点的元素 |
基本过滤选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本过滤选择器</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$('h2').click(function(){
$('li:first').css('color', 'red')
$('li:last').css('color', 'blue')
$('li:odd').css('background', 'gray')
$('li:even').css('background', 'yellow')
$('li:eq(1)').css('font-size', '30px')
$('li:gt(1)').css('font-weight', '800')
$('li:lt(1)').css('font-size', '10px')
$('li:not(.three)').css('background', 'fuchsia')
$(':header').css('background', 'pink')
})
})
</script>
</head>
<body>
<h2>网络小说</h2>
<ul>
<li>王妃不好当</li>
<li>致命交易</li>
<li class="three">迦兰寺</li>
<li>逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li>第一次亲密接触</li>
</ul>
</body>
</html>
可见性过滤选择器
可见性过滤选择器可以通过元素显示状态来选取元素
| 语法构成 | 描述 | 示例 |
| :visible | 选取所有可见的元素 | $(":visible")选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | $(":hidden")选取所有隐藏的元素 |
基本的隐藏和显示
| 方法 | 描述 |
| jqueryObj.hide() | 隐藏匹配的元素 |
| jqueryObj.show() | 显示匹配元素 |
| jqueryObj.toggle() | 切换隐藏或显示状态 |
可见性过滤选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可见性过滤选择器</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('p:hidden').show()
})
$('#btn2').click(function(){
$('p:visible').hide()
})
$('#btn3').click(function(){
$('p').toggle()
})
})
</script>
</head>
<body>
<p>我是显示的元素</p>
<p style="display: none;">我是隐藏的元素</p>
<p>我是显示/隐藏的元素</p>
<button id="btn1">显示元素</button>
<button id="btn2">隐藏元素</button>
<button id="btn3">隐藏/显示元素</button>
</body>
</html>
表单选择器
jQuery还支持一些表单选择器
| 语法构成 | 描述 | 示例 |
| :submit | 获取submit按钮 | $('#form1 :submit')或$(':submit') 注意#form1后面有空格 |
| :button | 获取button按钮 | $('#form1 :button')或$(':button') 注意#form1后面有空格 |
| :text | 获取text文本框 | $('#form1 :text')或$(':text') 注意#form1后面有空格 |
| :password | 获取password密码框 | $('#form1 :password')或$(':password') 注意#form1后面有空格 |
| :disabled | 获取被禁用的元素 | $('#form1 :disabled')或$(':disabled') 注意#form1后面有空格 |
| :radio:checked | 获取radio元素中被选中的元素 | $('#form1 :radio:checked').val()或$(':radio:checked').val() 注意#form1后面有空格 |
| :input | 用于匹配所有input、textarea、select和button元素 | $(':input')：将获取到所有的表单元素 |
表单选择器练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单选择器</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$(':submit').click(function(){
var username = $(':text').val()
var userpass = $(':password').val()
if(username == null || username == ''){
alert('用户名不能为空！')
return false
}
if(userpass == null || userpass == ''){
alert('密码不能为空！')
return false
}
var sex = $(':radio:checked').val()
alert(sex)
var dis = $(':disabled').val()
alert(dis)
var button_val = $(':button').val()
alert(button_val)
var check = $(':checkbox:checked').val()
return false
})
// 解除禁用
$(':button').click(function(){
$(':disabled').removeAttr('disabled')
})
})
</script>
</head>
<body>
<form action="P1.7-可见性过滤选择器.html" id="myform">
<!-- placeholder可以让文本框里面的默认提示文字变灰，输入文字时，提示文字自动变没，value不会 -->
username: <input type="text" placeholder="input username"><br>
userpass: <input type="password" placeholder="input userpass"><br>
sex: male <input type="radio" name="sex" value="男">
female <input type="radio" name="sex" value="女"><br>
<input type="checkbox" value="禁用按钮" disabled>我已阅读协议
<br>
<button type="button" value="123">解除禁用</button><br>
<input type="submit" value="获取">
</form>
</body>
</html>
节点操作
jQuery中提供了each()、find()、slice()、filter()等节点操作方法
| 语法 | 功能 |
| find("") | 用于某元素中包含的元素 如：$("div").find("li").css("background-color", "#F06") |
| slice(num, num) | 用于获取某区间元素 如：$("li").slice(1, 3).css("background-color","#F06") |
| filter("") | 过滤指定元素中的某些元素 如：$("li").filter("#l3").css("background-color","#F06") |
| not("") | 与filter相反 如：$("li").filter("#l3").css("background-color","#F06") |
| each(function) | 遍历-迭代 $("li").each(function(){ alert($(this).html()) alert(this.innerHtml) }) this的用法： this：代表一个dom对象，单纯写一个this，默认代表通过js方式获取的对象，则只可以使用js中的相关属性与方法 $(this)：代表将dom对象转换为jq对象，可以使用jq中的属性和方法 |
练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历元素</title>
<script src="lib/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('div').find('p').css('background-color', 'red')
})
$('#btn2').click(function(){
$('li').slice(1, 3).css('color', 'red')
})
$('#btn3').click(function(){
$('li').filter('#li3').css('color', 'aqua')
})
$('#btn4').click(function(){
$('li').not('#li3').css('color', 'yellow')
})
$('#btn5').click(function(){
$('li').each(function(){
alert($(this).html())
})
})
})
</script>
</head>
<body>
<div>
<p>我是div中的p标签</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li id="li3">列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
</div>
<button id="btn1">find方法：获取某元素中包含的指定元素</button>
<button id="btn2">slice方法：获取某区间范围的元素</button>
<button id="btn3">filter方法：过滤某元素中的指定元素</button>
<button id="btn4">not方法：与filter相反</button>
<button id="btn5">each方法：遍历元素</button>
</body>
</html>
![[华为OD] C卷 田忌赛马 DFS 200](https://img-blog.csdnimg.cn/direct/e2ea96b26eed468486abd912ef49d2a2.png)
