一）jQuery九类选择器【参见jQueryAPI.chm手册】
目的：通过九类选择器，能定位web页面(HTML / JSP / XML)中的任何标签; 项目中，通常是多种选择器一起使用
- 1）基本选择器
<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）层次选择器
<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）增强基本选择器
<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）内容选择器
<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）可见性选择器
<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）属性选择器
<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）子元素选择器
<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）表单选择器
<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）表单对象属性选择器
<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>
二）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对象
-
<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>
-
append()：追加到父元素之后
<script type="text/javascript">
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
</script>
-
prepend()：追加到父元素之前
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
$("ul").append( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
</script>
-
after()：追加到兄弟元素之后
<script type="text/javascript">
//DIV标签插入到UL标签之后(兄弟关系)
//$("ul").after( $("div") );
</script>
-
before()：追加到兄弟元素之前
<script type="text/javascript">
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") );
</script>
-
attr(name)：获取属性值
<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>
-
attr(name,value)：给符合条件的标签添加key-value属性对 -
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
<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>
-
remove()：删除自已及其后代节点
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove();
//删除所有LI元素
//$("#a li").remove();
//删除UL元素
$("#b").remove();
</script>
-
val()：获取value属性的值
<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>
-
val("")：设置value属性值为""空串，相当于清空 -
text()：获取HTML或XML标签之间的值 -
text("")：设置HTML或XML标签之间的值为""空串 -
clone()：只复制样式，不复制行为 -
clone(true)：既复制样式，又复制行为
<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>
-
replaceWith()：替代原来的节点
<script type="text/javascript">
//双击<div>中的文本，用文本框替换文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );
</script>
-
removeAttr()：删除已存在的属性
//为<table>元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
//将<table>元素的align属性删除
$table.removeAttr("align");
</script>
-
addClass()：增加已存在的样式 -
removeClass()：删除已存在的样式 -
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式 -
toggleClass()：如果标签有样式就删除，否则增加样式
<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>
-
offset()：获取对象的left和top坐标 -
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标 -
width()：获取对象的宽 -
width(300)：设置对象的宽 -
height()：获取对象的高 -
height(500)：设置对象的高
<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>
-
children()：只查询子节点，不含后代节点
<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>
-
next()：下一下兄弟节点 -
prev()：上一下兄弟节点 -
siblings()：上下兄弟节点 -
show()：显示对象 -
hide()：隐藏对象
<script type="text/javascript">
//图片隐蔽
$("img").hide(5000);
//休息3秒
window.setTimeout(function(){
//图片显示
$("img").show(5000);
},3000);
</script>
-
fadeIn()：淡入显示对象 -
fadeOut()：淡出隐藏对象
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut(3000);
</script>
-
slideUp()：向上滑动 -
slideDown()：向下滑动 -
slideToggle()：上下切换滑动，速度快点
三）jQuery常用Event-API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
-
window.onload: 在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者 -
ready: 在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化- ready和onload同时存在时，二者都会触发执行，ready快于onload
<script type="text/javascript">
//定义a()和b()二个方法
function a(){
alert("JS方式");
}
function b(){
alert("JQUERY方式");
}
/*使用JS方式加载a()和b()二个方法
window.onload = function(){
a();
}
window.onload = function(){
b();
}
*/
/*使用jQuery方式加载a()和b()二个方法
$(document).ready(function(){
a();
});
$(document).ready(function(){
b();
});
*/
/*使用jQuery最简方式加载a()和b()二个方法
$(function(){
a();
});
$(function(){
b();
});
*/
//将js方式的onload与jquery方式的ready对比，看哪个执行快
window.onload = function(){
alert("传统");
}
$(function(){
alert("现代");
});
</script>
-
change: 当内容改变时触发
<script type="text/javascript">
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change( function(){
var $option = $("#city option:selected");
var value = $option.val();
var text = $option.text();
alert(value+":"+text);
} );
</script>
-
focus: 焦点获取
<script type="text/javascript">
//加载页面时获取光标并选中所有文字
$(function(){
//光标定位文本框
$(":text").focus();
//选中文本框的所有文本
$(":text").select();
});
</script>
-
select: 选中所有的文本值 -
keyup/keydown/keypress: 演示在IE和Firefox中获取event对象的不同
<script type="text/javascript">
//当按键弹起时，显示所按键的unicode码
$(function(){
//IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
$(document).keyup(function(){
//获取按钮的unicode编码
var code = event.keyCode;
alert(code);
});
});
</script>
-
mousemove: 在指定区域中不断移动触发
<script type="text/javascript">
//显示鼠标移动时的X和Y座标
$(function(){
$(document).mousemove(function(){
var x = event.clientX;
var y = event.clientY;
$("#xID").val(x);
$("#yID").val(y);
});
});
</script>
-
mouseover: 鼠标移入时触发 -
mouseout: 鼠标移出时触发
<script type="text/javascript">
//鼠标移到某行上，某行背景变色
$("table tr").mouseover(function(){
$(this).css("background-color","inactivecaption");
});
//鼠标移出某行，某行还原
$("table tr").mouseout(function(){
$(this).css("background-color","white");
});
//鼠标移到某图片上，为图片加边框
$("img").mouseover(function(){
$(this).css("border-color","red");
});
//鼠标移出图片，图片还原
$("img").mouseout(function(){
$(this).css("border-color","white");
});
</script>
-
submit: 在提交表单时触发，true表示提交到后台，false表示不提交到后台
<script type="text/javascript">
//浏览器加载web页面时触发
$(function(){
//将光标定位于文本框中
$(":text").focus();
});
</script>
<script type="text/javascript">
//检测是否为中文，true表示是中文，false表示非中文
function isChinese(str){
if(/^[\u3220-\uFA29]+$/.test(str)){
return true;
}else{
return false;
}
}
</script>
<script type="text/javascript">
//当表单提交前检测
$("form").submit(function(){
var flag = false;
//获取文本框的中内容
var name = $(":text").val();
//去二边的空格
name = $.trim(name);
//如果没有填内容
if(name.length == 0){
alert("用户名必填");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}else{
//调用方法
flag = isChinese(name);
//如果不是中文
if(!flag){
alert("用户名必须填中文");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}
}
return flag;
});
</script>
-
click: 单击触发
<script type="text/javascript">
$("p").click(function(){
alert( $(this).text() );
})
</script>
-
dblclick: 双击触发
//定位左边的下拉框，同时添加双击事件
$("#leftID").dblclick(function(){
//获取双击时选中的option标签
var $option = $("#leftID option:selected");
//将选中的option标签移动到右边的下拉框中
$("#rightID").append( $option );
});
-
blur: 焦点失去
网友评论