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>