jQuery
一、jQuery概述
1.jQuery的简介
[1]为什么学习jQuery(JavaScript的缺点):
A、JS书写的代码比较的臃肿
B、JS中获得元素对象的方式比较单一
C、JS实现动画效果非常复杂
D、JS的代码对浏览器是有区分的
[2]什么是JQuery
JavaScriptQuery:JS的库。
目前最流行的JavaScript函数库,对JavaScript进行了封装。
并不是一门新语言。将常用的、复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。
jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率
由美国人John Resig在2006年推出,目前最新版本是v3.31。
宗旨:Write less,do more(写更少代码,做更多事情)
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.3.1(2017年3月20日)
- $ 的含义
作用1:$(function)---$就是jQuery的省略写法
a.相当于 window.οnlοad=function(){};
b.功能比window.onload更强大;
1) window.onload一个页面只能写一个,但是可以写多个$() 而不冲突;
2) window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等), 但是$的执行时间要早
c.完整形式是$(document).ready(…….)。
作用2:$(selector)选择器
jQuery具有强大的选择器功能
- 隔行变色案例实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色-CSS</title>
<style type="text/css">
.datalist{
border:1px solid #007108;
font-family:Arial;
border-collapse:collapse;
background-color:#d9ffdc;
font-size:14px;
}
.datalist th{
border:1px solid #007108;
background-color:#00a40c;
color:#FFFFFF;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108;
text-align:left;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
padding-right:10px;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*JS实现的方式*/
/* window.οnlοad=function(){
//获得所有的tr标签对象
var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}
}
}*/
/*JQ实现操作*/
$(function(){
$("tr:odd").css("background-color","green");
})
$(function(){
alert("123");
})
/*jQuery(function(){
alert("456");
})
$(document).ready(function(){
alert("789");
})*/
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr> <!-- 奇数行 -->
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr> <!-- 奇数行 -->
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr> <!-- 奇数行 -->
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr> <!-- 奇数行 -->
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr> <!-- 奇数行 -->
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr> <!-- 奇数行 -->
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr> <!-- 奇数行 -->
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>
二、jQuery中的选择器
1.基本选择器
标签选择器 $(“a”);
ID选择器 $(“#id”)、$(“p#id”);
类选择器 $(“.class”)、$(“h2.class”);
通配选择器 $("*");
并集选择器$("elem1,elem2,elem3") 。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function() {
/**********基本选择器***********/
//js的方式获得zh--Element
var zh = document.getElementById("zh");
// JS对象---JQ对象
var zz = $(zh);
// Object--[Element1,Element2,Element3...]
//id选择器
var zh1 = $("#zh");
//元素选择器--jq没有指定具体的下标 默认的是第一个
var inp = $("input");
// JQ对象----JS对象
alert(inp[1].value);
alert(inp.eq(1).val());
//类选择器
var inp2 = $(".re");
//所有选择器
$("*").css("background-color", "green");
});
</script>
</head>
<body>
<p>
账号:<input type="text" name="zh" id="zh" class="re" value="123" />
</p>
<p>
密码:<input type="password" name="pwd" id="pwd" class="re" value="987" />
</p>
</body>
</html>
2.层级选择器
后代选择器$(ul li);
父子选择器 $(ul>li);
后面第一个兄弟元素(紧跟) prev + next;
后面所有的兄弟元素 prev ~ next。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function() {
/*********层级选择器***********/
//包含 div下所有包含的span
var span = $("div span");
//必须是直系子节点
var span2 = $("div > span");
//获得下一个节点对象 -- id为span1后面紧跟着的span的对象
var span = $("#span1 + span");
// 获得元素后面的span(同一级别的span)
var span4 = $("#span1~span");
alert(span4.length);
})
</script>
</head>
<body>
<div id="div1">
<span> List Item 1</span> <br />
<span id="span1"> List Item 2</span><br />
<span> List Item 3</span><br />
<span> List Item 4</span> <br />
<p>
<span> List Item 1</span> <br />
<span> List Item 2</span> <br />
<span> List Item 3</span> <br />
<span> List Item 4</span> <br />
</p>
</div>
</body>
</html>
3.位置选择器
:first;
:last;
:odd;
:even;
:eq(index);
:lt(index);
:gt(index)。
案例见4。
4.子元素选择器
:nth-child(index) 这个是从1开始的;
:only-child;
:first-child;
:last-child。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<header id="header" class="mui-bar ">
<div class="header_div_style">
<p class="header_p">form表单</p>
</div>
</header>
<div style="height: 300px; border: 2px solid green;">
<ul>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
<li> List item 4</li>
<li> List item 5</li>
<li> List item 6</li>
</ul>
<ul>
<li> List item 1</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
/***********基础选择器****************/
//获得第一个元素
$("ul li").first().css("background-color", "red");
$("ul li:first").css("background-color", "red");
//获得最后一个元素对象
$("ul li").last().css("background-color", "green");
$("ul li:last").css("background-color", "green");
//奇数索引 从0开始
$("ul li:odd").css("background-color", "green");
//偶数索引 从0开始
$("ul li:even").css("background-color", "green");
//获得具体下标位置
$("ul li:eq(3)").css("background-color", "green");
//获得索引小于指定的下标
$("ul li:lt(3)").css("background-color", "green");
//获得索引大于指定的下标
$("ul li:gt(3)").css("background-color", "green");
/**********子元素选择器*************/
// 位置从1开始 ---每一个ul都会看成一个对象
$("ul li:nth-child(1)").css("background-color", "green");
// 如果某个元素是父元素中唯一的子元素,那将会被匹配
$("ul li:only-child").css("background-color", "green");
//匹配第一个子元素
$("ul li:first-child").css("background-color", "green");
//匹配最后一个子元素
$("ul li:last-child").css("background-color", "green");
})
</script>
</body>
</html>
5.属性选择器
[attribute] ;
[attribute1]、[attribute2] ;
[attribute=value];
[attribute!=value];
[attribute^=value];
[attribute$=value;
[attribute*=value]。
案例见6。
6.表单选择器
:text、:password、:radio、:checkbox、:hidden、:file、:submit;
:input---匹配所有 input, textarea, select 和 button 元素;
:selected 、 :checked 、 :enabled 、 :disabled;
:hidden 、 :visible 、 :not 。
注意$(“input”)和$(“:input”)的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<h3>注册用户</h3>
<form action="doRegister.jsp" method="get">
<table border="1" width="40%">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" value="请输入姓名" disabled="disabled" /></td>
</tr>
<tr>
<td>密 码</td>
<td><input type="password" name="pwd" id="pwd" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="color" name="spwd" id="repwd" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" checked="checked" value="女" />女
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type="number" name="sage" id="age" value="18" /></td>
</tr>
<tr>
<td>电子邮箱</td>
<td><input type="email" name="semail" id="email" /></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="music" checked/>音乐
<input type="checkbox" name="hobby" value="sports" />体育
<input type="checkbox" name="hobby" value="art" />美术
</td>
</tr>
<tr>
<td>身份</td>
<td>
<select name="professional">
<option value="1">工人</option>
<option value="2">农民</option>
<option value="3" selected="selected">解放军</option>
<option value="4">知识分子</option>
</select>
</td>
</tr>
<tr>
<td>简历</td>
<td>
<textarea name="resume" rows="5" cols="40">请输入简历</textarea>
</td>
</tr>
<tr>
<td>照片</td>
<td><input type="file" name="photo" id="photo" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" disabled="disabled" />
<input type="reset" value="重置" />
<input type="button" value="返回" onclick="alert('back')" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(function() {
/****属性选择器*********/
$("input[type=text]").css("background-color", "red");
//name包含s元素对象
$("input[name^=s]").css("background-color", "red");
//只要包含s的元素对象 即可
$("input[name*=s]").css("background-color", "red");
//以指定元素结尾的对象
$("input[name$=d]").css("background-color", "red");
//匹配所有不含有指定的属性,或者属性不等于特定值的元素
$("input[name!='pwd']").css("background-color", "red");
/************表单选择器***********/
//获得所有的form表单项
$(":input").length;
//获得标签名称是input 的对象
$("input").length;
// input中type=text所对应的对象
$(":text").css("background-color", "red");
$(":password").css("background-color", "red");
/*********表单属性选择器**************/
//选择input中含有disabled属性表单项
$("input:disabled").css("background-color", "red");
//选择性别只是性别被选择的对象
$("input[name=sex]:checked").eq(0).val();
/*******内容选择器********/
$("td:empty").css("background-color", "green");
})
</script>
</body>
</html>
三、jQuery中操作元素
1.操作元素的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
/***********JQ中元素属性操作*****************/
//JQ中事件的绑定
$("#bu1").click(function(){
//获得姓名的input框
var inp=$("#username");
//获得元素的属性
console.log(inp.attr("type")+"----"+inp.attr("id")+"---"+inp.attr("value"));
//操作元素的属性
inp.attr("type","button");
inp.attr("value","提交");
// inp.attr("value")是 对象默认的初始值 inp.val()实时输入的值
alert(inp.val());
//返回值是checked
$("#man").attr("checked",false);
//返回值是true/false
alert($("#man").prop("checked"));
//综合的书写方式{key1:value,key2:value}--json
inp.attr({"type":"button","value":"提交"});
})
})
</script>
</head>
<body>
<h3>JQ中元素属性操作</h3>
<input type="button" name="" id="bu1" value="属性操作"/>
<p>
姓名:<input type="text" name="" id="username" value="123" />
</p>
<p>
性别:
男: <input type="radio" name="" id="man" value="1" checked="checked" />
女: <input type="radio" name="" id="" value="0" />
</p>
</body>
</html>
2.操作元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
/***********JQ中元素CSS样式操作*****************/
$("#bu2").click(function(){
//获得div对象
var div1=$("#div1");
//获得对应的css样式
console.log(div1.css("width")+"---"+div1.css("height")+"---"+div1.css("border"))
//[1]直接添加css样式
div1.css("width","300px");
div1.css("height","300px");
div1.css("background-color","pink");
//结合的方式
div1.css({"width":"300px","height":"300px"});
//[2]通过添加类的方式添加css样式
div1.attr("class","div_1");
//直接添加类--如果添加的样式比较多,那么推荐使用第二种形式
div1.addClass("div_1");
//移除类
div1.removeClass("div_1");
})
})
</script>
<style>
#div1{
width: 200px;
height: 200px;
border: 3px solid gray;
}
.div_1{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<h3>JQ中元素样式的操作</h3>
<input type="button" name="bu2" id="bu2" value="样式操作" />
<div id="div1"></div>
</body>
</html>
3.操作元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
/**********JQ中元素内容操作***********/
$("#bu3").click(function(){
//获得div对象
var div2=$("#div2");
//等价于 js中innerHTML
console.log(div2.html());
//等价于 JS中 innerTest
console.log(div2.text());
//操作节点的内容
div2.html(div2.html()+"<b>是一家很优秀的企业</b>");
div2.text("<b>是一家很优秀的企业</b>");
})
})
</script>
</head>
<body>
<h3>JQ中元素内容的操作</h3>
<input type="button" name="bu3" id="bu3" value="内容操作" />
<div id="div2">
<span>百度</span>
</div>
</body>
</html>
4.操作元素的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获得div对象
var div =$("#div1");
// 增加节点 --内部后
div.html(div.html()+"<p>List Item6 </p>");
*div.append("<p>List Item6 </p>");
// 增加节点--内部前
*div.prepend("<p>List Item 0 </p>");
//把一个元素追加到另一个元素中 --现有元素之后
$("#div2").appendTo(div);
//把一个元素追加到另一个元素中 --现有元素之前
$("#div2").prependTo(div);
//增加节点--外部前
div.before("<p>List Item0</p>");
//增加节点--外部后
div.after("<p>List Item6</p>");
//内容清空
div.empty();
//元素的移除
div.remove();
})
</script>
<style>
#div1{
height: 300px;
border: 3px solid goldenrod;
}
#div2{
height: 50px;
border: 3px solid red;
}
</style>
</head>
<body>
<div id="div2">
<p>LIST ITEM 000</p>
</div>
<div id="div1">
<p>List Item1 </p>
<p>List Item2 </p>
<p>List Item3 </p>
<p>List Item4 </p>
<p>List Item5 </p>
</div>
</body>
</html>