JQuery（一）页面加载，写入文本，对象转换，隐藏显示，基本选择器，层级选择器，基本过滤选择器，表单选择器，class操作，属性操作
JQuery优点：
1)轻巧方便
2)强大的选择器
3)出色的DOM操作的封装
4)可靠的事件处理机制
5)出色浏览器兼容性
6)不污染顶级变量
7)完善的AJAX
8)开源
jQuery的引入方式
jQuery它是一个库(框架)，要想使用它，必须先引入！
jQuery-1.8.3.js：一般用于学习阶段。
实际项目中根据具体情况而定，一般使用压缩版（.min.js）
引入语法：<script type=”text/javascript” src=”js/jquery-1.8.3.js”></script>
window.onload和jquery的ready函数的主要区别：
1.onload事件只能执行一个函数。如果多次绑定onload事件，则后面绑定的会覆盖之前的。因此只能执行一个函数；而ready函数可以调用多次，执行多个函数。
2.onload是当页面所有内容都加载完毕时才调用。如果页面中存在大的图片或者视频，则也必须等到加载完毕才能执行调用的函数；而ready是当页面主要元素加在完毕后执行，大的图片和视频等元素则未必加载完毕，这样用户体验度会更好一些，不用等待过长时间。
例子：jQuery的页面加载
<script type="text/javascript"> //原来的JavaScript的写法，页面加载函数 //一个页面只加载一次，之后的会覆盖掉之前页面加载函数 window.onload=function(){ //提示信息 alert("windowhello"); } window.onload=function(){ //提示信息 alert("windowhello1"); } //现在用JQ的写法，页面加载函数，$表示JQuery($和JQuery两个都可以用) //标准写法 $(document).ready(function(){ alert("hello"); }) jQuery(document).ready(function(){ alert("hellojq"); }) $(document).ready(function(){ alert("hello1"); }) //简易写法 //JQ不会覆盖，是按照顺序一个个加载 $(function(){ alert("hello"); }) </script>
JQ的获取：
//JS写法
window.onload=function(){ var btn1=document.getElementById("btn1"); alert(btn1.value) } //JQ写法 $(function(){ var btn2=$("#btn2"); alert(btn2.val()); var btn2=$("#btn2").val(); alert(btn2); })
在文本框中写入文本两种方法：
html写入文本输入：会按照html读取解析文本
text写入文本输入:会直接写入文本
//添加点击事件 //JS window.onload=function(){ var btn1=document.getElementById("btn1"); btn1.onclick=function(){ //输入innerhtml //获取span document.getElementById("span1").innerHTML="hello" } } JQ $(function(){ $("#btn1").click(function(){ //获取span //html写入文本输入：会按照html读取解析文本 $("#span1").html("<a href='hello.html'>hellojq</a>"); //text写入文本输入:会直接写入文本 $("#span1").text("<a href='hello.html'>hellojq</a>"); }) })
jQuery对象与DOM对象转换
jQuery对象和DOM对象是相互独立的，可以相互转换，但是两个对象的函数不能混淆使用（这点一定要谨记）。
将DOM对象转换为jQuery对象，语法：jQuery(dom对象)或者$(dom对象)
将jQuery对象转换为DOM对象，语法：$jquery对象名[index]或者$jquery对象名.get(index)。
//JS写法 window.onload=function(){ //添加点击事件 document.getElementById("btn1").onclick=function(){ //获取span对象----DOM对象 var dom=document.getElementById("span1"); //把DOM对象转换为jQuery对象 格式：jQuery(dom对象)或者$(dom对象) $(dom).html("<a href='#'>hello JavaScript</a>"); //DOM对象能否使用jQuery函数吗？比如jQuery.html() dom.html("<a href='#'>hello JavaScript</a>"); //得出结论：DOM对象不能直接使用jQuery函数和属性 } } //JQ写法 $(function(){ //添加点击事件 $("#btn2").click(function(){ //获取到span对象----jQuery对象 //方式一：$对象名[index]----DOM对象 $("#span1")[0].innerHTML="hellojq1" //方式二：$对象名.get(index) $("#span1").get(0).innerHTML="hellojq2" //jQuery对象能否直接操作JavaScript的方法和属性吗？比如innerHTML $("#span1").innerHTML="hello jQuery"; //得出结论：jQuery对象不能直接操作JavaScript的方法和属性 }) })
jQuery效果
1.基本显示和隐藏效果
show(speed,fn):显示某元素
参数speed:显示速度，单位毫秒。也可使用固定字符串：slow,normal,fast
参数fn:显示成功之后的回调函数
hide(speed,fn):隐藏某元素
参数同上
toggle(speed,fn):切换显示和隐藏效果，即如果元素隐藏，则使用该方法后则显示，反之则隐藏。
2.滑动效果
slideDown():元素显示，高度逐渐变高，直到设置值。
slideUp():元素隐藏，高度逐渐变小，直到高度为0,元素隐藏。
slideToggle():切换隐藏和显示效果
3.淡入淡出效果
fadeIn():元素显示。从透明一直到完全不透明。
fadeout():元素隐藏。从完全不透明到完全透明再隐藏。
fadeToggle():切换显示隐藏效果
fadeTo(speed,opacity,[fn]):指定透明度
第二个参数opacity取值0-1之间数值;
例子：轮辐广告，图片显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入jq框架-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
var timer;
//页面加载函数
$(function(){
//图片轮播的定时器
setInterval("changeImg()",3000);
setInterval("showImg()",3000);
})
//图片轮播具体的实现方法
var num=1;
function changeImg(){
if(num>3){
num=1;
}
//获取图片的标签
document.getElementById("imgId").src="img/"+num+".jpg";
num++;
}
//弹出图片的方法
function showImg(){
//获取图片的标签 显示用show(),括号中填写的是显示的时间长度
// $("#showImg").show(5000);//注意单位是毫秒
//滑动显示
// $("#showImg").slideDown(5000);
//淡入显示：fadeIn()
$("#showImg").fadeIn(2000);
//清除显示广告的定时器
clearInterval(timer);
//隐藏图片的定时器
timer = setInterval("hiddenImg()",2000);
}
function hiddenImg(){
//获取到图片的标签
//$("#showImg").hide(5000);//注意单位是毫秒
//滑动隐藏：slideUP()
$("#showImg").slideUp(2000);
//淡出隐藏：fadeOut()
//$("#showImg").fadeOut(5000);
//清除隐藏广告的定时器
clearInterval(timer);
}
</script>
<title></title>
</head>
<body>
<!--弹出广告图片-->
<div>
<!--行内先设置图片隐藏-->
<img id="showImg" src="img/sh.jpg" width="100%" style="display: none;"/>
</div>
<!--图片轮播-->
<div>
<img id="imgId" src="img/1.jpg" width="100%" />
</div>
<div>
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">零食</a>
</div>
</body>
</html>
隐藏和显示互换toggle：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//给按钮添加点击时间
$("#btn1").click(function(){
//获取图片标签
//
// $("#showImg").toggle(2000);
//
$("#showImg").slideToggle(2000);
//
// $("#showImg").fadeToggle(2000);
})
})
</script>
<title></title>
</head>
<body>
<input type="button" name="" id="btn1" value="点一下显示/点一下隐藏" />
<br>
<img id="showImg" src="img/1.jpg" width="100%" />
</body>
</html>
jQuery基本选择器：
id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//获取按钮的点击事件
$("#btn1").click(function(){
//id选择器：&("#id的名称")
$("#one").css("background-color","red")
})
$("#btn1").click(function(){
//类选择器：$(".类名")
$(".min").css("background-color","blue");
})
$("#btn3").click(function(){
//元素选择器：$("元素名称")
$("div").css("background-color","yellow");
})
$("#btn4").click(function(){
//元素选择器：$("*")通配符：整个页面
$("*").css("background-color","pink");
})
$("#btn5").click(function(){
//元素选择器：$("元素名称，元素名称")：求并集
$("#two,.min222").css("background-color","orange");
})
})
</script>
<title></title>
</head>
<body>
<input id="btn1" type="button" value="选择为one的元素"/>
<input id="btn2" type="button" value="选择样式为min的元素"/>
<input id="btn3" type="button" value="选择所有div的元素"/>
<input id="btn4" type="button" value="选择所有元素"/>
<input id="btn5" type="button" value="选择id为two或者样式为min222的元素"/>
<hr />
<div id="one">
<div class="min">1111</div>
</div>
<div id="two">
<div class="min">2222</div>
<div class="min222">3333</div>
</div>
<div id="three">
<div class="min">4444</div>
<div class="min">5555</div>
<div class="min">6666</div>
</div>
<span id="four">
7777
</span>
</body>
</html>
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
$("body div").css("background-color","red");
})
$("#btn2").click(function(){
//parent > child : 在给定的父元素下匹配所有的子元素(儿子)
$("body>div").css("background-color","blue");
})
$("#btn3").click(function(){
//prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
$("#two+div").css("background-color","yellow");
})
$("#btn4").click(function(){
//prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
$("#two~div").css("background-color","pink");
})
})
</script>
<title></title>
</head>
<body>
<input id="btn1" type="button" value="选择body中所有的后代为div的元素"/>
<input id="btn2" type="button" value="选择body中儿子级别的div元素"/>
<input id="btn3" type="button" value="选择id为two的下一个元素"/>
<input id="btn4" type="button" value="选择id为two的兄弟元素"/>
<hr />
<div id="one">
<div class="min">1111</div>
</div>
<div id="two">
<div class="min">2222</div>
<div class="min222">3333</div>
</div>
<div id="three">
<div class="min">4444</div>
<div class="min">5555</div>
<div class="min">6666</div>
</div>
<span id="four">
7777
<div class="min">8888</div>
</span>
<div id="five">
<div class="min">9999</div>
</div>
</body>
</html>
基本过滤选择器
基本：
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
内容：
:contains
:empty
:has
:parent
可见性：
:hidden
:visible
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery基本过滤选择器页面</title>
<!--要想使用jQuery，必须先引入-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
//页面加载函数
$(function(){
//获取按钮的点击事件
$("#btn1").click(function(){
//:first第一个元素
$("body div:first").css("background-color","red");
})
$("#btn2").click(function(){
//:last最后一个元素
$("body div:last").css("background-color","blue");
})
$("#btn3").click(function(){
//:even偶数元素 索引是从0开始的
//父类中的所有的元素同时进行排序，不管是儿子还是孙子
$("body div:even").css("background-color","yellow");
})
$("#btn4").click(function(){
//:odd奇数元素
$("body div:odd").css("background-color","pink");
})
})
</script>
</head>
<body>
<input id="btn1" type="button" value="选择body中第一个div的元素"/>
<input id="btn2" type="button" value="选择body中最后一个div元素"/>
<input id="btn3" type="button" value="选择body中偶数div元素"/>
<input id="btn4" type="button" value="选择body中奇数div元素"/>
<hr />
<div id="one">
<div class="min">1111</div>
</div>
<div id="two">
<div class="min">2222</div>
<div class="min222">3333</div>
</div>
<div id="three">
<div class="min">4444</div>
<div class="min">5555</div>
<div class="min">6666</div>
</div>
<span id="four">
7777
<div class="min">8888</div>
</span>
<div id="five">
<div class="min">9999</div>
</div>
</body>
</html>
表单选择器
表单：
:input
:text
:password
:radio
:chackbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性：
:enabled
:disabled
:checked
:selected
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery表单选择器页面</title>
<!--要想使用jQuery，必须先引入-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
//页面加载函数
$(function(){
//获取按钮的点击事件
$("#btn1").click(function(){
$(":input").css("background-color","red");
})
$("#btn2").click(function(){
$(":text").css("background-color","blue");
})
$("#btn3").click(function(){
var num = $(":radio").size();
alert(num);
})
$("#btn4").click(function(){
var num = $(":checkbox").size();
alert(num);
})
})
</script>
</head>
<body>
<input id="btn1" type="button" value="选择所有input元素"/>
<input id="btn2" type="button" value="选择text文本框元素"/>
<input id="btn3" type="button" value="选择单选元素"/>
<input id="btn4" type="button" value="选择多选元素"/>
<hr />
<form>
<input type="text"/><br />
<input type="password"/><br />
<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br />
<input type="checkbox"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>排球<br />
<input type="submit"/><br />
<input type="file"/><br />
<input type="image"/><br />
<input type="reset"/><br />
<input type="button" value="普通按钮"/><br />
<input type="hidden"/>
</form>
</body>
</html>
例子：使用jQuery完成表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成表格隔行换色</title>
<!--要想使用jQuery，必须先引入-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
.even{
background-color: yellow;
}
.odd{
background-color: pink;
}
</style>
<script type="text/javascript">
//页面加载函数
$(function(){
//用JavaScript的写法获取表格行数对象
//tBodie[0].rows[i]//获取行数
//$("tbody>tr:even").css("background-color","yellow");
//$("tbody>tr:odd").css("background-color","pink");
//addClass():添加写好的样式
$("tbody>tr:even").addClass("even");
$("tbody>tr:odd").addClass("odd");;
})
</script>
</head>
<body>
<table border="1" width="600" height="500" cellspacing="0.5" align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>马六</td>
<td>71</td>
</tr>
<tr>
<td>5</td>
<td>黄七</td>
<td>18</td>
</tr>
<tr>
<td>6</td>
<td>田九</td>
<td>27</td>
</tr>
</tbody>
</table>
</body>
</html>
class操作
addClass():给指定元素追加class属性样式
removeClass():将指定元素的class属性移除
toggleClass():切换class属性样式，即没有该class属性则添加，有该class属性则移除
属性操作：
prop()：
attr(name)：取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。
attr(properties)：将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
attr(key,value)：为所有匹配的元素设置一个属性值。
attr(key,fn)：为所有匹配的元素设置一个计算的属性值。
不提供值，而是提供一个函数，由这个函数计算的值作为属性值。
removeAttr(name)：从每一个匹配的元素中删除一个属性
prop()：操作元素的特性。获取一些第一次分配undefined属性值的标签，如果抛异常，将忽略浏览器生成的任何错误。
removeProp()：移除标签的特性。
attr(name)使用方法：
<img src="test.jpg"/> $("img").attr("src"); 结果：test.jpg
attr(properties)的使用方法：
HTML 代码: <img/> jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image" }); 结果: [ <img src= "test.jpg" alt:="Test Image" /> ]
attr(key,value)的使用方法：
<img/> <img/> $("img").attr("src","test.jpg"); 结果：[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]
attr(key,fn)的使用方法：
<img src="test.jpg"/> $("img").attr("title", function() { return this.src }); 结果：<img src="test.jpg" title="test.jpg" />
removeAttr(name)：
<img src="test.jpg"/> $("img").removeAttr("src"); 结果：[ <img /> ]
