第42天(就业班) jQuery九类选择器及常用方法
2017-03-19 10:34
363 查看
01_jquery九类选择器
目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签
（1）基本选择器【参见01_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div id="div1ID">
div1
</div>
<div id="div2ID">
div2
</div>
<span class="myClass">span</span>
<p>
p
</p>
<script type="text/javascript">
//1)查找ID为"div1ID"的元素个数
//alert( $("#div1ID").size() );
//2)查找DIV元素的个数
//alert( $("div").length );
//3)查找所有样式是"myClass"的元素的个数
//alert( $(".myClass").size() );
//4)查找所有DIV,SPAN,P元素的个数
//alert( $("DIV,span,p").size() );
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert( $("#div1ID,.myClass,p").size() );
</script>
</body>
</html>
（2）层次选择器【参见02_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<!--
<input type="radio" value="z"/>
<input type="radio" value="e"/>
<input type="radio" value="y"/>
-->
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="ccccccccc"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<script type="text/javascript">
//1)找到表单form里所有的input元素的个数
//alert( $("form input").size() );
//2)找到表单form里所有的子级input元素个数
//alert( $("form>input").size() );
//3)找到表单form同级第一个input元素的value属性值
//alert( $("form+input").val() );
//4)找到所有与表单form同级的input元素个数
alert( $("form~input").size() );
</script>
</body>
</html>
（3）增强基本选择器【参见03_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<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>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<table border="1">
<tr>
<td>
line1[0]
</td>
</tr>
<tr>
<td>
line2[1]
</td>
</tr>
<tr>
<td>
line3[2]
</td>
</tr>
<tr>
<td>
line4[3]
</td>
</tr>
<tr>
<td>
line5[4]
</td>
</tr>
<tr>
<td>
line6[5]
</td>
</tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>
p
</p>
<script type="text/javascript">
//1)查找UL中第一个LI元素的内容
//html()要用于html/jsp，不能用在xml
//text()既能用于html/jsp，且能用于xml
//alert( $("ul li:first").text() );
//2)查找UL中最后个元素的内容
//alert( $("ul li:last").text() );
//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
//alert( $("table tr:odd").size() );
//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
//alert( $("table tr:even").size() );
//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来
//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
//alert( $("table tr:eq(1)").text() );
//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
//alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
//alert( $("table tr:lt(3)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
//$(":header").css("background-color","red").css("color","#ffff33");
//3)查找所有[未]选中的input为checkbox的元素个数
alert( $(":checkbox:not(:checked)").size() );
</script>
</body>
</html>
（4）内容选择器【参见04_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<style type="text/css">
.myClass{
font-size:44px;
color:blue
}
</style>
</head>
<body>
<div>
<p>
John Resig
</p>
</div>
<div>
<p>
George Martin
</p>
</div>
<div>
Malcom John Sinclair
</div>
<div>
J. Ohn
</div>
<div>
</div>
<p>
</p>
<p>
</p>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素的个数
//alert( $("div:contains('John')").size() );
//2)查找所有p元素为空的元素个数
//alert( $("p:empty").size() );
//3)给所有包含p元素的div元素添加一个myClass样式
//$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert( $("p:parent").size() );
</script>
</body>
</html>
（5）可见性选择器【参见05_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr style="display:none">
<td>
Value 1
</td>
</tr>
<tr>
<td>
Value 2
</td>
</tr>
<tr>
<td>
Value 3
</td>
</tr>
</table>
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
//alert( $("table tr:hidden").size() );
//2)查找所有可见的tr元素的个数
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡
</script>
</body>
</html>
（6）属性选择器【参见06_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
<p>
Hello!
</p>
</div>
<div id="test2">
</div>
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion"/>
<input type="checkbox" name="newsaccept" value="Evil Plans"/>
<!--
<input type="checkbox" name="letternews" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion"/>
<input type="checkbox" name="accNEWSept" value="Evil Plans"/>
-->
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
//alert( $('div[id]').size() );
//2)查找所有name属性是newsletter的input元素，并将其选中
//$("input[name='newsletter']").attr("checked","checked");
//3)查找所有name属性不是newsletter的input元素，并将其选中
//$("input[name!='newsletter']").attr("checked","true");
/*
请问：在JS中如下符号表示什么意思
1)=/==/===
2)!=/!==
明天讲解
*/
//4)查找所有name属性以'news'开头的input元素，并将其选中
//$("input[name^='news']").attr("checked","checked");
//5)查找所有name属性以'letter'结尾的input元素，并将其选中
//$("input[name$='letter']").attr("checked","checked");
//6)查找所有name属性包含'news'的input元素，并将其选中
//$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr("checked","true");
</script>
</body>
</html>
（7）子元素选择器【参见07_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function(){
alert( $(this).text() );
});
*/
/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function(){
alert( $(this).text() );
});
*/
/*4)迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});*/
//3)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
</script>
</body>
</html>
（8）表单选择器【参见08_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox"/><br/>
<input type="file"/><br/>
<input type="hidden" name="id" value="123"/><br/>
<input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
<input type="password"/><br/>
<input type="radio"/><br/>
<input type="reset"/><br/>
<input type="submit"/><br/>
<input type="text"/><br/>
<select>
<option>Option</option>
</select>
<br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1)查找所有input元素的个数
//alert( $("input").size() );//10，找input标签
//alert( $(":input").size() );//13，找input标签和select/textarea/button
//2)查找所有文本框的个数
//alert( $(":text").size() );
//3)查找所有密码框的个数
//alert( $(":password").size() );
//4)查找所有单选按钮的个数
//alert( $(":radio").size() );
//5)查找所有复选框的个数
//alert( $(":checkbox").size() );
//6)查找所有提交按钮的个数
//alert( $(":submit").size() );
//7)匹配所有图像域的个数
//alert( $(":images").size() );
//8)查找所有重置按钮的个数
//alert( $(":reset").size() );
//9)查找所有普通按钮的个数
//alert( $(":button").size() );
//10)查找所有文件域的个数
//alert( $(":file").size() );
//11)查找所有input元素为隐藏域的个数
//alert( $(":input:hidden").size() );
</script>
</body>
</html>
（9）表单对象属性选择器【参见09_selector.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="text" name="email" disabled="disabled"/>
<input type="text" name="password" disabled="disabled"/>
<input type="text" name="id"/>
<input type="checkbox" name="newsletter" checked="checked" value="Daily"/>
<input type="checkbox" name="newsletter" value="Weekly"/>
<input type="checkbox" name="newsletter" checked="checked" value="Monthly"/>
<select id="provinceID">
<option value="1">广东</option>
<option value="2" selected="selected">湖南</option>
<option value="3">湖北</option>
</select>
</form>
<script type="text/javascript">
//1)查找所有可用的input元素的个数
//alert( $("input:enabled").size() );
//2)查找所有不可用的input元素的个数
//alert( $("input:disabled").size() );
//3)查找所有选中的复选框元素的个数
//alert( $(":checkbox:checked").size() );
//4)查找所有未选中的复选框元素的个数
//alert( $(":checkbox:NOT(:checked)").size() );
//5)查找所有选中的选项元素的个数
//alert( $("select option:selected").size() );
alert( $("#provinceID option:NOT(:selected)").size() );
</script>
</body>
</html>
注意：项目中，通常是多种选择器一起使用
2.jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，
跨浏览器(ie/firefox/Chrome)的标准规则
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等
（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/
/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});*/
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object类型
alert(this.name + ":"+this.sal);
});
</script>
</body>
</html>
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>
这是子元素，要插入到父元素内
</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
//$("ul").append( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
</script>
</body>
</html>
before()：追加到兄弟元素之前
attr(name)：获取属性值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>
这是子元素，要插入到父元素外
</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(兄弟关系)
//$("ul").after( $("div") );
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") );
</script>
</body>
</html>
attr(name,value)：给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="张三"/>
</td>
<td>
<input type="password" name="password" value="123456"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性
//alert( $("form input:first").attr("type") );
//设置form里最后个input元素的为只读文本框
//$("form input:last").attr("readonly","readonly")
//$(":password").attr("readonly","readonly")
</script>
</body>
</html>
remove()：删除自已及其后代节点
val()：获取value属性的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul id="a">
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<ul id="b">
<li>第一条</li>
<li id="secondID">第二条</li>
<li>第三条</li>
</ul>
<div>
这是div元素
</div>
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove();
//删除所有LI元素
//$("#a li").remove();
//删除UL元素
$("#b").remove();
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
//<body><div id="2015">哈哈</div></body>
/*js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$("body").append( $div );
$(document.body).append( $div );
</script>
</body>
</html>
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串
clone()：只复制样式，不复制行为
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
哈哈
</div>
<select id="city">
<option value="地都">北京</option>
</select>
<script type="text/javascript">
//取得<div>中的内容
//alert( $("div").text() );
//取得<option>的值和描述
var $option = $("#city option");
var value = $option.val();
var html = $option.text();
alert(value + ":" + html);
</script>
</body>
</html>
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" value="原按钮" onclick="alert('静态事件')"/>
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after( $new );
//为原input元素动态添加单击事件，且复制原input元素，
//var $old = $(":button");
//$old.click(function(){
// alert("动态事件");
//});
//添加到原input元素后，与其同级，且和原按钮有一样的行为
//var $new = $old.clone(true);
//$new.val("新按钮");
//$old.after( $new );
</script>
</body>
</html>
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
//将<table>元素的align属性删除
$table.removeAttr("align");
</script>
</body>
</html>
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
offset()：获取对象的left和top坐标
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
无样式
</div>
<div class="myClass">
有样式
</div>
<script type="text/javascript">
//为无样式的DIV添加样式
//$("div:first").addClass("myClass");
//为有样式的DIV删除样式
//$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
//$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
</script>
</body>
</html>
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
children()：只查询子节点，不含后代节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<img src="../images/zgl.jpg"/>
<script type="text/javascript">
//获取图片的坐标
//var offset = $("img").offset();
//var x = offset.left;
//var y = offset.top;
//alert(x+":"+y);
//设置图片的坐标
//$("img").offset({
// top:100,
// left:200
//});
//获取图片的宽高
//var w = $("img").width();
//var h = $("img").height();
//alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);
</script>
</body>
</html>
next()：下一下兄弟节点
prev()：上一下兄弟节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
Hello
</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>
And Again
</p>
<span>And Span</span>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
//var $span = $("div").children();
//var content = $span.html();//包含子标签
//var content = $span.text();//不包含子标签
//alert(content);
//取得div元素的下一个同级的兄弟元素内容
//var $p = $("div").next();
//alert( $p.text() );
//取得div元素的上一个同级的兄弟元素内容
//alert( $("div").prev().text() );
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
});
</script>
</body>
</html>
siblings()：上下兄弟节点
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
slideUp()：向上滑动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg"/>
</p>
<script type="text/javascript">
//图片隐蔽
$("img").hide(5000);
//休息3秒
window.setTimeout(function(){
//图片显示
$("img").show(5000);
},3000);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p>
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut(3000);
</script>
</body>
</html>
slideDown()：向下滑动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
中国0
<br/>
中国1
<br/>
中国2
<br/>
中国3
<br/>
中国4
<br/>
中国5
<br/>
中国6
<br/>
中国7
<br/>
中国8
<br/>
中国9
<br/>
</div>
<input type="button" value="我的好友"/>
<script type="text/javascript">
//向上下滑动
$(":button").click(function(){
//div标标上下移动
$("div").slideToggle(100);
});
</script>
</body>
</html>
slideToggle()：上下切换滑动，速度快点
面试题--find("9类选择器")：查询指定的节点和多重each()迭代
//使用jquery弹出奇数的tr标签下的td里的值
var $tr = $("table tr:lt(4):even");
$tr.each(function(){
//tr中查找td标签,$(this)表示tr
var $td = $(this).find("td");
$td.each(function(){
//$(this)表示td
var txt = $(this).text();
alert(txt);
});
});
三）jQuery常用Event-API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
ready和onload同时存在时，二者都会触发执行，ready快于onload
change：当内容改变时触发
focus：焦点获取
select：选中所有的文本值
keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
click：单击触发
dblclick：双击触发
blur：焦点失去
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery常用方法（四）-选择器
- JQuery的常用选择器、过滤器、方法全面介绍
- jquery中each方法示例和常用选择器
- JQuery一些常用选择器的属性和方法
- 【jQuery】选择器与一些常用方法应用详解
- jQuery基础----03jQuery选择器和事件-事件之事件常用方法
- JQuery常用选择器 事件 方法 样式属性操作
- jquery常用选择器和常用方法
- JQuery的常用选择器、过滤器、方法祥细介绍
- jquery所有选择器，dom操作常用方法
- JQuery中常用选择器和方法的总结
- 【jQuery】选择器与一些常用方法应用详解
- jquery中each方法示例和常用选择器
- jQuery选择器总结 jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
- jquery 常用选择器及方法
- JQuery的常用选择器、过滤器、方法祥细介绍
- jQuery 选择器与常用的方法
- JQuery的常用选择器、过滤器、方法祥细介绍
- jQuery中常用的选择器及常用的方法