1.1jQuery 概述
1、为什么使用 jQuery(遇到的问题)
选择器功能弱
DOM操作繁琐之极
浏览器兼容性不好
动画效果弱
2、什么是 jQuery(概念)
jQuery （javaScriptQuery）JavaScript 代码库
官方网站：http://jquery.com/
3、目前 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.2.1（2017 年 3 月 20 日）
1.2、jQuery 中$的含义
作用 1：$(function)
1.相当于 window.onload=function(){}
2.功能比window.onload更强大
1) window onload一个页面只能写一个,但是可
以写多个$() 而不冲突
2) window onload要等整个页面加载完后再执
行（包括图片、超链接、音视频等），
但是$的执行时间要早
3.完整形式是$(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.onload=function(){
//获得所有的tr对象
var tr =document.getElementsByTagName("tr");
for(var i =0;i<tr.length;i++){
if(i%2==0){
tr[i].style.backgroundColor="red";
}else {
tr[i].style.backgroundColor="green";
}
}
}*/
//JQ实现的
$(function(){
$("tr:odd").css("background-color","red");
})
/*
window.onload=function(){
alert("123");
}
window.onload=function(){
alert("456");
}*/
$(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>
选择器学习 A
对象之间的转换
DOM对象：直接使用JavaScript获取的节点对象
- className innerHTML value
- jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法
- addClass() html() val()
- DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
- DOM对象转换成jQuery对象
- $(DOM对象)
- jQuery对象转换成DOM对象
- jQuery对象[index]
- jQuery对象.get(index)
基本选择器
- 标签选择器 $(“a”)
- ID选择器 $(“#id”) $(“p#id”)
- 类选择器 $(“.class”) $(“h2.class”)
- 通配选择器 $("*")
<!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(){
//js获得元素对象
var zh =document.getElementById("zh");
//Element
// JS----JQ对象
var zhh=$(zh);
// alert(zh);
//JQ获得元素的对象 *ID选择器
var zh1=$("#zh");
//Object---[Element1,Element2,Element3]
//JQ----JS对象
// alert(zh1[0]);
//*元素选择器
var inp =$("input");
// alert(inp.length);
//*类选择器
var inp2=$(".inp");
// alert(inp2[0].value);
// jq获得内容操作
// alert(inp2.eq(0).val());
//通用选择器
$("*").css("background-color","greenyellow");
//分组选择器
})
</script>
</head>
<body>
<p>
账号: <input type="text" name="" id="zh" value="123" />
</p>
<p>
密码: <input type="password" name="" id="pwd" value="12366" class="inp"/>
</p>
<p>
确认密码： <input type="password" name="" id="pwd2" value="123" class="inp"/>
</p>
</body>
</html>
选择器学习 B
- 并集选择器$("elem1,elem2,elem3")
- 后代选择器$(ul li) (一个ul里的所有li)
- 父子选择器 $(ul>li) （一个ul里的直系后代如下图）
- 后面第一个兄弟元素 prev + next (后面不能有其他标签，一个<br>都不行)
- 后面所有的兄弟元素 prev ~ next
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 200px;
border: 3px solid red;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// div下面包含的所有span标签
// $("div span").css("background-color","red");
// div下面的直系子元素
// $("div>span").css("background-color","green");
// 紧接着的span标签
// $("#sp1 + span").css("background-color","red");
//获得指定元素后面同级的span标签
$("#sp1~span").css("background-color","aqua");
})
</script>
</head>
<body>
<div>
<span id="sp1">北京尚学堂</span>
<span>北京尚学堂</span><br />
<span>北京尚学堂</span><br />
<p>
<span>北京尚学堂</span><br />
<span>北京尚学堂</span><br />
<span>北京尚学堂</span><br />
</p>
</div>
</body>
</html>
选择器学习 C
//只是第一行变颜色(只有第一行，就一次，后面再出现ul加上li也不管)
$("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");
//获得索引下标位3的对象
$("ul li:eq(3)").css("background-color","green");
//获得大于指定索引下标的对象
$("ul li:gt(3)").css("background-color","green");
//获得小于指定索引下标的对象
$("ul li:lt(3)").css("background-color","green");
/**************子选择器*************************/
$("ul li:nth-child(1)").css("background-color","green");
$("ul li:first-child").css("background-color","darkred");
$("ul li:last-child").css("background-color","darkred");
$("ul li:only-child").css("background-color","#00A40C");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 200px;
border: 3px solid red;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<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");
//获得索引下标位3的对象
// √ $("ul li:eq(3)").css("background-color","green");
//获得大于指定索引下标的对象
// $("ul li:gt(3)").css("background-color","green");
//获得小于指定索引下标的对象
// $("ul li:lt(3)").css("background-color","green");
/**********子选择器*************************/
// √ $("ul li:nth-child(1)").css("background-color","green");
// $("ul li:first-child").css("background-color","darkred");
// $("ul li:last-child").css("background-color","darkred");
$("ul li:only-child").css("background-color","#00A40C");
})
</script>
</head>
<body>
<div>
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
</ul>
<ul>
<li>List Item1</li>
</ul>
</div>
</body>
</html>
选择器学习 D
//type属性等于text
$("input[type=text]").css("background-color","#00A40C");
// name属性用z开头的
$("input[name^=z]").css("background-color","#FF0000");
// name属性同d结尾的
$("input[name$=d]").css("background-color","green");
//name属性中包含p 的元素
$("input[name*=p]").css("background-color","green");
//复合属性选择器，需要同时满足多个条件时使用
$("input[type=text][name^=z]").css("background-color","deeppink");
<!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(){
//type属性等于text
// $("input[type=text]").css("background-color","#00A40C");
// name属性用z开头的
// $("input[name^=z]").css("background-color","#FF0000");
// name属性同d结尾的
// $("input[name$=d]").css("background-color","green");
//name属性中包含p 的元素
// $("input[name*=p]").css("background-color","green");
//复合属性选择器，需要同时满足多个条件时使用
$("input[type=text][name^=z]").css("background-color","deeppink");
})
</script>
</head>
<body>
<center>
<h3>注册页面</h3>
<hr />
<form action="" method="get">
<table border="1px">
<tr height="35px">
<td width="150px">用户名：</td>
<td width="400px">
<input type="text" name="zuname" id="uname" value="" alt="用户名" onblur="checkName()"/>
<span id="uname_span">*用户名必须是3-5位的汉字</span>
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password" name="zpwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
<span id="pwd_span"></span>
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text" name="zphone" id="phone" value="" alt="手机号" />
<span id="phone_span"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
<span id="email_span"></span>
</td>
</tr>
<tr height="35px">
<td>颜色：</td>
<td>
<input type="color" name="scolor" id="" />
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
<input type="checkbox" name="fav" id="" value="1" />唱歌
<input type="checkbox" name="fav" id="" value="2" />睡觉
<input type="checkbox" name="fav" id="" value="3" />LOL<br />
<input type="checkbox" name="fav" id="" value="4" />旅游
<input type="checkbox" name="fav" id="" value="5" />高尔夫
<input type="checkbox" name="fav" id="" value="6" />篮球
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="adress" id="sel">
<option value="0">--请选择--</option>
<option value="1">河南</option>
<option value="2">湖南</option>
<option value="3">海南</option>
<option value="4">云南</option>
</select>
<span id="sel_span"></span>
</td>
</tr>
<tr height="35px">
<td>验证码</td>
<td>
<input type="number" name="" id="yzm" value=""/>
<span id="yzm_span"></span>
<span id="yzm2_span"></span>
</td>
</tr>
<tr height="35px">
<td>个人介绍：</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="注册" disabled="true"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
选择器学习 E
// √ 获得form表单中的所有的表单项
var inp= $(":input")
//获得标签名称是input 的所有的标签对象
var inp2=$("input");
alert(inp.length+"----"+inp2.length);
$("input[type=text]")
// √ input标签 type属性等于text所对应的对象
$(":text").css("background-color","green");
$(":password").css("background-color","red");
/************表单属性选择器*****************/
//获得input标签中含有disabled属性的对象
var but= $("input:disabled");
alert(but.val());
//√ 获得含有checked属性的对象
var ch =$("input:checked");
<!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(){
// √ 获得form表单中的所有的表单项
var inp= $(":input")
//获得标签名称是input 的所有的标签对象
var inp2=$("input");
// alert(inp.length+"----"+inp2.length);
// $("input[type=text]")
// √ input标签 type属性等于text所对应的对象
$(":text").css("background-color","green");
$(":password").css("background-color","red");
/********表单属性选择器*****************/
//获得input标签中含有disabled属性的对象
var but= $("input:disabled");
alert(but.val());
//√ 获得含有checked属性的对象
var ch =$("input:checked");
})
</script>
</head>
<body>
<center>
<h3>注册页面</h3>
<hr />
<form action="" method="get" >
<table border="1px">
<tr height="35px">
<td width="150px">用户名：</td>
<td width="400px">
<input type="text" name="zuname" id="uname" value="" alt="用户名" onblur="checkName()"/>
<span id="uname_span">*用户名必须是3-5位的汉字</span>
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password" name="zpwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
<span id="pwd_span"></span>
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text" name="zphone" id="phone" value="" alt="手机号" />
<span id="phone_span"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
<span id="email_span"></span>
</td>
</tr>
<tr height="35px">
<td>颜色：</td>
<td>
<input type="color" name="scolor" id="" />
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
<input type="checkbox" name="fav" id="" value="1" />唱歌
<input type="checkbox" name="fav" id="" value="2" checked="checked"/>睡觉
<input type="checkbox" name="fav" id="" value="3" />LOL<br />
<input type="checkbox" name="fav" id="" value="4" />旅游
<input type="checkbox" name="fav" id="" value="5" />高尔夫
<input type="checkbox" name="fav" id="" value="6" />篮球
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="adress" id="sel" onchange="checkAdress()">
<option value="0">--请选择--</option>
<option value="1">河南</option>
<option value="2">湖南</option>
<option value="3">海南</option>
<option value="4">云南</option>
</select>
<span id="sel_span"></span>
</td>
</tr>
<tr height="35px">
<td>验证码</td>
<td>
<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
<span id="yzm_span"></span>
<span id="yzm2_span"></span>
</td>
</tr>
<tr height="35px">
<td>个人介绍：</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="注册" disabled="true"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
操作页面的样式 A
//获得div对象
var div =$("#div1");
//获得css样式
var wid=div.css("width");
var hi=div.css("height");
console.log(wid+"----"+hi);
//操作元素对象的css
div.css("width","400px");
div.css("height","500px");
div.css("background-color","red");
div.css("backgroundColor","red");
//以上内容的综合---{key1:value1,key2:value2}---json
数据格式
div.css({'width':'300px','height':'300px','backgrou
nd-color':'red'});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
200px;
height: 200px;
border: 2px solid green;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#bu1").click(function(){
//获得div对象
var div =$("#div1");
//获得css样式
var wid=div.css("width");
var hi=div.css("height");
console.log(wid+"----"+hi);
//操作元素对象的css
// div.css("width","400px");
// div.css("height","500px");
// div.css("background-color","red");
// div.css("backgroundColor","red");
//以上内容的综合---{key1:value1,key2:value2}---json数据格式
div.css({'width':'300px','height':'300px','background-color':'red'});
})
})
</script>
</head>
<body>
<input type="button" value="样式的添加" id="bu1">
<hr />
<div id="div1"></div>
</body>
</html>
操作页面的样式 B
如果当页面中的css样式比较多的时候可以通过添加类的方
式添加样式，方法如下：两种
$("#bu1").click(function(){
//获得div对象 --通过添加类的方式添加css样式
//$("#div1").attr("class","div");
$("#div1").addClass("div");
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
300px;
height: 300px;
border: 3px solid red;
}
.div{
500px;
height: 500px;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: greenyellow;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#bu1").click(function(){
//获得div对象 --通过添加类的方式添加css样式
//$("#div1").attr("class","div");
$("#div1").addClass("div");
})
})
</script>
</head>
<body>
<input type="button" name="" id="bu1" value="元素样式操作" />
<hr />
<div id="div1">
</div>
</body>
</html>
操作页面元素的属性 A
$("#bu1").click(function(){
//获得元素对象
var tex=$("#inp1");
//获得元素对象的属性
var te=tex.attr("type");
var cl =tex.attr("class");
//获得元素固有的属性值
var val =tex.attr("value");
console.log(te+"------"+cl+"-----"+val);
//获得文本框实时输入的值
var val2=tex.val();
// alert(val2);
}
<!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(){
$("#bu1").click(function(){
//获得元素对象
var tex=$("#inp1");
//获得元素对象的属性
var te=tex.attr("type");
var cl =tex.attr("class");
//获得元素固有的属性值
var val =tex.attr("value");
console.log(te+"------"+cl+"-----"+val);
//获得文本框实时输入的值
var val2=tex.val();
// alert(val2);
/*********操作元素对象的属性******************/
/*tex.attr("type","button");
tex.attr("value","测试按钮");*/
//支持json数据格式
tex.attr({"type":"button","value":"测试按钮"});
// var ch= $("#fav").attr("checked");
var flag=$("#fav").prop("checked",true);
})
})
</script>
</head>
<body>
<input type="button" name="" id="bu1" value="元素属性的获得" />
<hr />
<form>
账号：<input type="text" class="inp" id="inp1" value="sxt" /> <br />
密码：<input type="password" class="pwd" id="pwd1" value="sxt" /><br />
爱好： 抽烟：<input type="checkbox" />
喝酒：<input type="checkbox" />
烫头：<input type="checkbox" id="fav" />
</form>
</body>
</html>
操作页面元素的属性 B
tex.attr("type","button");
tex.attr("value","测试按钮");
//支持json数据格式
tex.attr({"type":"button","value":"测试按钮"});
var ch= $("#fav").attr("checked");
var flag=$("#fav").prop("checked",true);
<!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(){
$("#bu1").click(function(){
//获得元素对象
var tex=$("#inp1");
//获得元素对象的属性
var te=tex.attr("type");
var cl =tex.attr("class");
//获得元素固有的属性值
var val =tex.attr("value");
console.log(te+"------"+cl+"-----"+val);
//获得文本框实时输入的值
var val2=tex.val();
// alert(val2);
/*********操作元素对象的属性******************/
/*tex.attr("type","button");
tex.attr("value","测试按钮");*/
//支持json数据格式
tex.attr({"type":"button","value":"测试按钮"});
// var ch= $("#fav").attr("checked");
var flag=$("#fav").prop("checked",true);
})
})
</script>
</head>
<body>
<input type="button" name="" id="bu1" value="元素属性的获得" />
<hr />
<form>
账号：<input type="text" class="inp" id="inp1" value="sxt" /> <br />
密码：<input type="password" class="pwd" id="pwd1" value="sxt" /><br />
爱好： 抽烟：<input type="checkbox" />
喝酒：<input type="checkbox" />
烫头：<input type="checkbox" id="fav" />
</form>
</body>
</html>
操作页面的文本和值 A
//获得div元素对象
var div =$("#div1");
//获得元素的内容 含有HTML的标签的
var ht=div.html();
console.log(ht);
//只是获得文本内容， 不含有HTML标签
var te =div.text();
console.log(te);
//获得文本框的值
var val=$("#inp1").val();
console.log(val);
<!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(){
$("#bu1").click(function(){
//获得div元素对象
var div =$("#div1");
//获得元素的内容 含有HTML的标签的
var ht=div.html();
console.log(ht);
//只是获得文本内容， 不含有HTML标签
var te =div.text();
console.log(te);
//获得文本框的值
var val=$("#inp1").val();
console.log(val);
/********操作元素对象的内容和值****************/
//div.html("<b>我们都爱笑</b>");
div.text(div.text()+"<b>我们都爱笑</b>");
$("#inp1").val("sxt");
})
})
</script>
</head>
<body>
<input type="button" name="" id="bu1" value="操作元素的内容" />
<hr />
<div id="div1">
<span>北京尚学堂</span>
</div>
<input type="text" name="inp1" id="inp1" value="" />
</body>
</html>
操作页面的文本和值 B
可以识别里面的html代码
div.html("<b>我们都爱笑</b>");
识别不了里面的HTML代码
div.text(div.text()+"<b>我们都爱笑</b>");
获得文本的值
$("#inp1").val("sxt");
注意特殊情况：
Select 、textarea 两个标签获得值得时候需要用val()
<!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(){
$("#bu1").click(function(){
//获得div元素对象
var div =$("#div1");
//获得元素的内容 含有HTML的标签的
var ht=div.html();
console.log(ht);
//只是获得文本内容， 不含有HTML标签
var te =div.text();
console.log(te);
//获得文本框的值
var val=$("#inp1").val();
console.log(val);
/********操作元素对象的内容和值****************/
//div.html("<b>我们都爱笑</b>");
div.text(div.text()+"<b>我们都爱笑</b>");
$("#inp1").val("sxt");
})
})
</script>
</head>
<body>
<input type="button" name="" id="bu1" value="操作元素的内容" />
<hr />
<div id="div1">
<span>北京尚学堂</span>
</div>
<input type="text" name="inp1" id="inp1" value="" />
</body>
</html>
操作页面的元素 A
//创建了新的元素
var p=$("<p> <b>List Item0</b> </p>")
//增加子元素 ---现有元素之后
$("#div1").append(p);
//把p元素增加到 div里面
p.appendTo("#div1");
//添加内部的子元素 ---现有元素之前
$("#div1").prepend(p);
p.prependTo("#div1");
//平级的添加元素---现有元素之前
p.insertBefore("#div1");
$("#div1").before(p);
//平级的添加元素---现有元素之后
p.insertAfter("#div1");
$("#div1").after(p);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
height: 300px;
border: 3px solid red;
}
p{
border: 2px solid green;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//创建了新的元素
var p=$("<p> <b>List Item0</b> </p>")
//增加子元素 ---现有元素之后
// $("#div1").append(p);
//把p元素增加到 div里面
// p.appendTo("#div1");
//添加内部的子元素 ---现有元素之前
// $("#div1").prepend(p);
// p.prependTo("#div1");
//平级的添加元素---现有元素之前
// p.insertBefore("#div1");
// $("#div1").before(p);
//平级的添加元素---现有元素之后
// p.insertAfter("#div1");
// $("#div1").after(p);
/***********替换指定的节点******************/
// $("div p:nth-child(1)").replaceWith(p);
// p.replaceAll("div p:nth-child(5)");
/**********删除指定的节点元素***************************/
//删除指定的元素
// $("#div1").remove();
// $("div p:nth-child(3)").remove();
//清空内容
// $("#div1").empty();
$("div p:nth-child(2)").empty();
})
</script>
</head>
<body>
<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>
操作页面的元素 B
/***********替换指定的节点******************/
$("div p:nth-child(1)").replaceWith(p);
p.replaceAll("div p:nth-child(5)");
/**********删除指定的节点元素******************/
//删除指定的元素
$("#div1").remove();
$("div p:nth-child(3)").remove();
//清空内容
$("#div1").empty();
$("div p:nth-child(2)").empty();
<!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 insertNode(){
//创建节点对象
var p =$('<p>'+
'照片:<input type="file" name="" id="" value="" />'+
'<input type="button" name="" id="" value="删除" onclick="removeNode(this)" />'+
'</p>');
$("#last").before(p);
}
function removeNode(obj){
$(obj).parent().remove();
}
</script>
</head>
<body>
<form>
<p>
用户名:<input type="text" name="" id="" value="" />
</p>
<p>
照片:<input type="file" name="" id="" value="" />
<input type="button" name="" id="" value="添加" onclick="insertNode()" />
</p>
<p id="last">
<input type="button" name="" id="" value="提交" />
<input type="button" name="" id="" value="清空" />
</p>
</form>
</body>
</html>
事件处理 A
/*页面加载完执行的操作*/
$(function(){})
jQuery(function(){})
$(document).ready(function(){})
$(function(){
/*******事件的基础绑定*************/
$("#bu1").click(function(){
alert("单击事件");
})
$("#bu1").dblclick(function(){
alert("双击事件");
})
/*******bind事件绑定**************/
$("#bu2").bind('click',function(){
alert("单击事件绑定");
})
//内容还支持json数据格式
$("#bu2").bind({
'click':function(){},
'dblclick':function(){},
'blur':function(){}
})
/*********one一次事件绑定*************/
$("#bu3").one('click',function(){
alert("一次事件绑定");
})
事件处理 B
/*********trigger事件操作****************/
trigger事件就是可以调用其他事件的来执行。调用的作用。
$("#bu4").click(function(){
$("#bu1").trigger('dblclick');
$("#bu3").trigger('click');
})
/********事件的解绑*********************/
$("#bu5").click(function(){
//事件的解绑
//解绑指定对象上的所有事件
$("#bu1").unbind();
//解绑指定的事件
$("#bu1").unbind("dblclick");
})
$(".bu6").click(function(){
alert("单击事件的绑定");
})
$(".bu6").live('click',function(){
alert("单击事件绑定");
})
$("body").append('<input type="button" name=""
id="" class="bu6" value="事件操作 2" />');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*页面加载完执行的操作*/
// $(function(){})
//
// jQuery(function(){})
//
// $(document).ready(function(){})
$(function(){
/*******事件的基础邦迪*************/
/* $("#bu1").click(function(){
alert("单击事件");
})*/
$("#bu1").dblclick(function(){
alert("双击事件");
})
/*******bind事件绑定**************/
/* $("#bu2").bind('click',function(){
alert("单击事件绑定");
})*/
//内容还支持json数据格式
$("#bu2").bind({
'click':function(){},
'dblclick':function(){},
'blur':function(){}
})
/*********one一次事件绑定*************/
$("#bu3").one('click',function(){
alert("一次事件绑定");
})
/*********trigger事件操作****************/
$("#bu4").click(function(){
$("#bu1").trigger('dblclick');
$("#bu3").trigger('click');
})
/********事件的解绑***********/
$("#bu5").click(function(){
//事件的解绑
//解绑指定对象上的所有事件
// $("#bu1").unbind();
//解绑指定的事件
$("#bu1").unbind("dblclick");
})
/*$(".bu6").click(function(){
alert("单击事件的绑定");
})*/
$(".bu6").live('click',function(){
alert("单击事件绑定");
})
$("body").append('<input type="button" name="" id="" class="bu6" value="事件操作2" />');
})
</script>
</head>
<body>
<input type="button" name="bu1" id="bu1" value="事件绑定" />
<input type="button" name="bu2" id="bu2" value="bind事件绑定" />
<input type="button" name="bu3" id="bu3" value="one事件绑定" />
<input type="button" name="bu4" id="bu4" value="tigger事件学习" />
<input type="button" name="bu5" id="bu5" value="事件解绑" />
<input type="button" name="" id="" class="bu6" value="事件操作" />
</body>
</html>
百度静态资源库
动画功能 A
//获得div对象
var div1 =$("#div1");
//3s隐藏动画
div1.hide(3000);
div1.show(3000);
//隐藏的显示 ---显示的隐藏
//$("div").toggle(3000);
//滑动上
div1.slideUp(3000);
//滑动下
div1.slideDown(3000);
//滑动上--滑动下 滑动下---滑动上
$("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div1.fadeIn(3000);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
height: 300px;
background-color: green;
}
#div2{
height: 300px;
background-color: yellow;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#bu1").click(function(){
//获得div对象
var div1 =$("#div1");
//3s隐藏动画
// div1.hide(3000);
// div1.show(3000);
//隐藏的显示 ---显示的隐藏
//$("div").toggle(3000);
//滑动上
// div1.slideUp(3000);
//滑动下
// div1.slideDown(3000);
//滑动上--滑动下 滑动下---滑动上
// $("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div1.fadeIn(3000);
})
})
</script>
</head>
<body>
<input type="button" id="bu1" value='动画触发'>
<hr />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
height: 300px;
background-color: green;
}
#div2{
height: 300px;
background-color: yellow;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#bu1").click(function(){
//获得div对象
var div1 =$("#div1");
//3s隐藏动画
// div1.hide(3000);
// div1.show(3000);
//隐藏的显示 ---显示的隐藏
//$("div").toggle(3000);
//滑动上
// div1.slideUp(3000);
//滑动下
// div1.slideDown(3000);
//滑动上--滑动下 滑动下---滑动上
// $("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div1.fadeIn(3000);
})
})
</script>
</head>
<body>
<input type="button" id="bu1" value='动画触发'>
<hr />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Jquery 的封装原理
<h1>jQuery中的封装原理</h1>
<h3>匿名函数的自调用</h3>
<h3>闭包原理</h3>
闭包的优点：
1、可以减少全局变量的对象，防止全局变量过去庞大，
导致难以维护
2、防止可修改变量，因为内部的变量外部是无法访问的，
并且也不可修改的。安全
3、读取函数内部的变量，另一个就是让这些变量的值始
终保持在内存中。
参考网址：
https://www.cnblogs.com/sq45711478/p/5990347.html
购物车案例如下:
/** * * Created by Administrator on 2019/4/20 0020. */ $(function () { $("#chks").click(function () { var flag=$(this).prop("checked"); //boolean类型 /* if(flag){ $("input[name='chk']").prop("checked",true); }else{ $("input[name='chk']").prop("checked",false); }*/ $("input[name='chk']").prop("checked",flag); }) //判断我们是否全选 $("input[name=chk]").click(function () { var flag=true; var chk= $("input[name=chk]"); chk.each( function () { if(!$(this).prop("checked")){ flag=false; return ; } }) $("#chks").prop("checked",flag); }) //反选 $("#fx").click(function () { var chx=$("input[type='checkbox']"); chx.each(function () { var flag=$(this).prop("checked"); $(this).prop("checked",!flag); }) }) /*新增行*/ $("#addRow").click(function () { var tab=$("#ta"); tab.append('<tr id="">'+ '<td><input type="checkbox" name="chk" id="" value="2"/></td>'+ '<td>《Java编程之道》</td>'+ '<td>wollo</td>'+ '<td>10</td>'+ ' <td>'+ '<input type="button" name="aa" id="" value="修改数量" />'+ ' <input type="button" name="" id="" value="删除" />'+ ' </td>'+ ' </tr>'); }) /*删除行*/ $("#delRow").click(function () { var del=$("input[ name=chk]:checked"); if(del.length==0){ alert("请选择至少一行！！！"); }else{ del.parent().parent().remove(); } }) /*****************************************复制行********************/ $("#copyRow").click(function () { var copy=$("input[name=chk]:checked"); if(copy.length==0){ alert("至少选择一行"); }else{ var tr=copy.parent().parent().clone(); $("#ta").append(tr); } }) }) // function change(th) { var par = $(th).parent().parent(); par.children().eq(3).html("<input type='text' siz='3px'onblur='bul(this)'/>") } function bul(th) { var par=$(th).parent().parent(); par.children().eq(3).html(th.value); } //删除操作 function del(th) { var par=$(th).parent().parent(); par.remove(); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> tr{ height: 40px; } </style> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> <script src="js/gwc.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <h3>jQuery操作表格</h3> <hr> <input type="button" id="fx" value="反选"> <input type="button" id="addRow" value="新增一行"> <input type="button" id="delRow" value="删除一行"> <input type="button" id="copyRow" value="复制一行"> <table border="1px" cellpadding="10px" cellspacing="0" id="ta"> <tr> <td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td> <td width="200px">书名</td> <td width="200px">作者</td> <td width="200px">数量</td> <td width="200px">操作</td> </tr> <tr> <td><input type="checkbox" name="chk" value="2"/></td> <td>《Java编程之道》</td> <td>wollo</td> <td>10</td> <td> <input type="button" name="aa" value="修改数量" onclick="change(this)" /> <input type="button" name="" value="删除" onclick="del(this)" /> </td> </tr> <tr> <td><input type="checkbox" name="chk" value="3" /></td> <td>《Python和我的故事》</td> <td>赵老师</td> <td>10</td> <td> <input type="button" name="" value="修改数量" onclick="change(this)"/> <input type="button" name="" value="删除" onclick="del(this)"/> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="" value="4" /></td> <td>《web开发详解》</td> <td>张老师</td> <td>30</td> <td> <input type="button" name="aa" value="修改数量" onclick="change(this)" /> <input type="button" name="" value="删除" onclick="del(this)" /> </td> </tr> </table> </body> </html>