JavaWeb前端开发知识总结(jQuery)
2017-05-03 10:36
861 查看
JavaWeb前端开发知识总结(jQuery)
1. jQuery技术
JQuery是一个javascript的框架(javascript的类库).对传统的javascript进行了封装.jQuery文件的引入
<script type="text/javascript" src="jquery.js"></script>
jQuery基础语法
# 基础语法是:$(selector).action() * 美元符号定义jQuery; * 选择符(selector)"查询"和"查找"HTML元素; * jQuery的action()执行对元素的操作.
1.1 文档就绪函数
文档加载完成时执行的jQuery代码.// 传统的js代码实现文档加载入口函数
window.onload = function() {}
// jQuery方式的入口函数,方式1
$(document).ready(function(){JQ代码});
// jQuery方式的入口函数,方式2(方式1的简写)
$(function(){JQ代码});传统的javascript的入口函数和jQuery入口函数的区别
# 传统的onload方式: * 一个html页面中只能有一个,只能调用一次; * 在文档加载完成后才执行,效率低下; jQuery方式: * 一个html页面中可以有多个(可以调用多次),按照由上至下顺序执行; * 在DOM对象绘制完成时就执行,效率高;
jQuery对象和javascript对象间的转换
js对象转换为jq对象: $(js对象)
jq对象转换为js对象: jq对象[0] (或jq对象get(0)) –> 相当于是通过jq方式获取的是js对象数组,通过索引获取其中的js对象
// js对象转换为jq对象
var tdiv = document.getElementById("tDiv");
$(tdiv).html("nihao");
// jq对象转换为
$("#tDiv")[0].innerHTML="java";
$("#tDiv")get(0).innerHTML="java";1.2 jQuery的效果
注意事项:效果的前提被操作的元素必须先声明display:none属性.# 显示/隐藏:show()和hide()方法
* 使用一:Jq对象.方法名();
* 使用二:Jq对象.方法名(“slow”); // slow,normal,fast
* 使用三:Jq对象.方法名(毫秒值); // 1000
* 使用四:Jq对象.方法名(毫秒值,function(){});
# 向下/上滑动:slideDown()和slideUp()方法
* 使用一:Jq对象.方法名();
* 使用二:Jq对象.方法名(“slow”); // slow,normal,fast
* 使用三:Jq对象.方法名(毫秒值); // 1000
* 使用四:Jq对象.方法名(毫秒值,function(){});
# 淡入/淡出:fadeIn()和fadeOut()方法
* 使用一:Jq对象.方法名();
* 使用二:Jq对象.方法名(“slow”); // slow,normal,fast
* 使用三:Jq对象.方法名(毫秒值); // 1000
* 使用四:Jq对象.方法名(毫秒值,function(){});
# 自定义动画:animate()方法
# 单击切换效果函数:toggle()方法
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery效果案例</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
// 入口函数
$(function(){
// 显示图片
$("#btu1").click(function(){
$("#imgId").show(2000);
});
// 隐藏图片
$("#btu2").click(function(){
$("#imgId").hide(1000);
});
// 下滑图片
$("#btu3").click(function(){
$("#imgId").slideDown(2000);
});
// 上滑图片
$("#btu4").click(function(){
$("#imgId").slideUp(2000);
});
// 淡入图片
$("#btu5").click(function(){
$("#imgId").fadeIn(2000);
});
// 淡出图片
$("#btu6").click(function(){
$("#imgId").fadeOut(2000);
});
// toggle方法,通过id为conP的段落控制id为texP的段落的切换效果
$("#conP").click(function(){
// 可以使用toggle(),slideToggle(),fadeToggle()三种方式
$("#texP").slideToggle(500);
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btu1" value="显示图片" />
<input type="button" id="btu2" value="隐藏图片" />
<input type="button" id="btu3" value="下滑图片" />
<input type="button" id="btu4" value="上滑图片" />
<input type="button" id="btu5" value="淡入图片" />
<input type="button" id="btu6" value="淡出图片" />
<hr />
<div id="imgId" style="display: none;">
<img src="img/test.jpg" />
</div>
</div>
<hr />
<div>
<p id="conP" style="width: 400px;background-color: burlywood;">单击切换段落出现和隐藏</p>
<p id="texP" style="width: 400px;height: 200px;background-color: burlywood;">
give me some sunshine<br />
give me some rain
</p>
<p >
give me another chance<br />
I want to grow up once again
</p>
</div>
</body>
</html>1.3 jQuery选择器
下面介绍各种常用的jQuery选择器:1.3.1 基本选择器
# id选择器
* 用法:$(“#id”)
* $("#one").css("background", "red"); // 选择ID为one的元素,将其背景色修改为red
# 类选择器
* 用法:$(“.类名”)
* $(".mini").css({"background":"red","border":"2px solid blue"}); // 选择class属性值为mini的元素
# 元素选择器
* 用法:$("元素名称")
* $("div").css("background", "red"); // 选择所有的div标签元素
# 通配符选择器
* 用法:$("*")
* $("*").css("background", "red"); // 选择所有的标签元素(body内)
# 并列选择器
* 用法:$("选择器,选择器,选择器")
* $("#two, span, .mini").css("background", "red"); // 选择ID为two或span标签或class属性值为mini的元素1.3.2 层级选择器
# 后代选择器:
* 用法:$(祖先元素 子元素) 包括其含有的所有的指定元素(包括孙子级别的元素)
* $("#two div").css("background", "red"); // 选择ID为two节点中包含的所有div标签元素
# 子元素选择器
* 用法:$(父类元素 > 子类元素) 获取父类元素中的第一层级的子类元素(只包含儿子元素)
* $("#two > div").css("background", "red"); // 选择ID为two节点中第一层级的div标签元素
# 下一个元素
* 用法:$(元素 + 下一个元素) 紧邻该元素的下一个同辈元素(元素的类型不一定相同)
* $("#two + div").css("background", "red"); // 选择ID为two元素的紧邻的div元素
# 兄弟元素
* 用法:$(元素 ~ 下一个元素) 该元素后面的所有的同辈元素
* $("#two ~ div").css("background", "red"); // 选择ID为two元素后面为div标签的所有元素1.3.3 基本过滤器选择器
# 奇数选择器:匹配所有索引值为奇数的元素,从0开始计数
* 用法:$(:odd)
* $("tr:odd").addClass("odd"); // 选择所有的tr标签中所有的奇数行,添加其class属性为odd类
# 偶数选择器:匹配所有索引值为偶数的元素,从0开始计数
* 用法:$(:even)
* $("tr:even").addClass("even"); // 选择所有的tr标签中所有的偶数行,添加其class属性为even类1.3.4 内容选择器
# 匹配选择器:匹配包含给定文本的元素
* 用法:$(:contains(text))
* $("div:contains('a')").css("background", "red"); // 选择div标签元素包含字符串a的所有的div1.3.5 属性选择器
# 匹配属性选择器:匹配包含给定属性的元素
* 用法:$(元素[属性名])
* $("div[id]").css("background", "red"); // 获取所有具有ID属性的div元素
# 匹配属性值选择器:匹配给定的属性是某个特定值的元素
* 用法:$(元素[属性名==特定值])
* $("div[id='four']").css("background", "red"); // 选择ID属性值为four的所有div元素
# 匹配属性值不为特定值:匹配所有不含有指定的属性,或者属性不等于特定值的元素
* 用法:$(元素[属性名 != 特定值])
* $("div[id !='four']").css("background", "red"); // 选择ID属性值不是four的所有div元素1.3.6 表单元素选择器
# input元素选择器: * 用法:$(选择器:input) 获取指定选择器或元素下的所有的input元素 * $(form:input); // 获取form表单下所有的input元素 # checkbox元素选择器:匹配所有复选框 * 用法:$(选择器:checkbox) 获取指定选择器或元素下的所有的checkbox元素
1.3.7 表单属性选择器
# checked选择器:匹配所有选中的被选中元素(复选框,单选框等,不包括select中的option) * 用法:$(选择器:checked) 获取指定选择器或标签元素下的所有的checked为true的元素 * $(input:checked); // 获取input标签下checked属性为true的所有元素 # selected选择器:匹配所有选中的option元素 * 用法:$(选择器:selected) 获取指定选择器或标签元素下的所有的selected为true的元素 * $(select:selected); // 获取select标签下所有的selected属性为true的元素
1.3.8 jQuery选择器综合案例
/*style.css*/
html,
body {
width: 100%;
height: 100%;
}
.actionDiv {
width: 100%;
background: aquamarine;
}
.actionDiv span {
color: #000000;
font-size: 24px;
}
.btnDiv {
width: 100%;
background: burlywood;
}
.itemDiv {
width: 200px;
height: 200px;
background: crimson;
margin-left: 5px;
margin-top: 5px;
float: left;
color: #FFFFFF;
}
.itemSpan {
display: block;
width: 200px;
height: 200px;
background: seagreen;
margin-left: 5px;
margin-top: 5px;
float: left;
color: #FFFFFF;
}
#container {
height: auto;
width: 100%;
background: bisque;
border: 1px solid #ffffff;
}
.addDiv {
width: 100px;
height: 100px;
color: #FFFFFF;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/*Safari and Chrome*/
}
.borderDiv {
width: 40px;
height: 40px;
margin: 5px auto;
border: 1px solid #DC143C;
}
.item {
width: 60px;
height: 60px;
margin-left: 5px;
margin-top: 5px;
float: left;
color: #000000;
background: cornflowerblue;
}
.addBg {
background: black;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}<!DOCTYPE html>
<!--jQuery选择器练习-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
// jquery练习
$(function(){
// 恢复颜色
$("#reset").bind("click",function(){
// window.location = location.href;
location.reload();
});
// 改变id=container元素的背景颜色
$("#btn1").bind("click",function(){
// $("#container").css("background","blue");
$("#container").attr("style","background: red;")
});
// 改变class=itemDiv元素的背景颜色
$("#btn2").bind("click",function(){
$(".itemDiv").attr("style","background: blue;");
});
// 改变所有div元素的背景颜色
$("#btn3").bind("click",function(){
$("div").attr("style","background: yellow;");
});
// 改变所有元素的背景颜色
$("#btn4").bind("click",function(){
$("*").attr("style","background: green;");
});
// 改变id=itemDiv3和span标签的背景颜色
$("#btn5").bind("click",function(){
$("#itemDiv3,span").attr("style","background: greenyellow;");
});
// 隐藏class=spanDiv的元素
$("#btn6").bind("click",function(){
$(".itemDiv").attr("hidden",true);
});
// 获得id=container元素的内容体
$("#btn7").bind("click",function(){
var data = $("#container").html();
alert(data);
});
// 设置id=container元素的内容体(添加一个class=addDiv的div)
$("#btn8").bind("click",function(){
$("#container").append("<div class='addDiv'>addDiv</div>");
});
// 改变id=container下面所有class=itemDiv的背景颜色
$("#btn9").bind("click",function(){
$("#container .itemDiv").attr("style","background: hotpink;")
});
// 获得id=itemDiv1下面所有class=item的个数
$("#btn10").bind("click",function(){
var length = $("#itemDiv1 .item").length;
alert(length);
});
// 获得所有class=item的个数
$("#btn11").bind("click",function(){
var length = $(".item").length;
alert(length);
});
// 删除id=itemSpan下面所有的元素
$("#btn12").bind("click",function(){
$("#itemSpan *").remove();
});
// 将id=itemDiv4下面的元素追加到id=itemDiv7后面
$("#btn13").bind("click",function(){
$("#itemDiv4 *").appendTo("#itemDiv7");
});
// 给id=itemDiv4下面class=item的元素的div子元素添加一个addBg的class
$("#btn14").bind("click",function(){
$("#itemDiv4>div[class='item']").addClass("addBg"); // 沒有效果,item的将addBg的设置给覆盖了
});
// 隐藏id=itemSpan下面所有class=item的元素
$("#btn15").bind("click",function(){
$("#itemSpan .item").attr("hidden",true);
});
// 将id=itemSpan下面所有class=item的元素的个数写入id=itemDiv7的内容体
$("#btn16").bind("click",function(){
$("#itemDiv7").html($("#itemDiv7").text()+$("#itemSpan .item").length);
});
// 改变id=container下面第一层子元素的背景颜色
$("#btn17").bind("click",function(){
$("#container > *").attr("style","background: blueviolet;")
});
// 选中所有的复选框
$("#btn18").bind("click",function(){
$(":checkbox").attr("checked",true);
});
// 选中所有选中的复选框
$("#btn19").bind("click",function(){
$(":checkbox[checked='checked']").each(function(x,n){
alert(n.value);
});
});
// 给用户名输入框设置一个value(随意值)
$("#btn20").bind("click",function(){
$(":input[name='username']").val("somnus");
});
// 设置密码输入框只读
$("#btn21").bind("click",function(){
$(":input[name='password']").attr("readonly","readonly");
});
// 选中省级下拉框的上海下拉项
$("#btn22").bind("click",function(){
// $("option[value='上海']").attr("selected","selected");
$("#province_").attr("value","上海");
});
// 选中性别单选按钮中的女
$("#btn23").bind("click",function(){
$(":radio[value='女']").attr("checked","checked");
});
// 向省级下拉框中添加下拉项（数据随意）
$("#btn24").bind("click",function(){
$("#province_").append("<option value='成都'>成都</option>");
$("#province_").append("<option value='成都'>成都</option>");
$("#province_").append("<option value='重庆'>重庆</option>");
});
});
</script>
</head>
<body>
<div class="actionDiv">
<span>
一.基本选择器练习
<input type="button" id="reset" value="恢复" style="font-size: 20px;font-weight: 5px;"/>
</span>
<div class="btnDiv">
<input type="button" id="btn1" value="改变id=container元素的背景颜色" />
<input type="button" id="btn2" value="改变class=itemDiv元素的背景颜色" />
<input type="button" id="btn3" value="改变所有div元素的背景颜色" />
<input type="button" id="btn4" value="改变所有元素的背景颜色" />
<input type="button" id="btn5" value="改变id=itemDiv3和span标签的背景颜色" />
</div>
<div class="btnDiv">
<input type="button" id="btn6" value="隐藏class=itemDiv的元素" />
<input type="button" id="btn7" value="获得id=container元素的内容体" />
<input type="button" id="btn8" value="设置id=container元素的内容体(添加一个class=addDiv的div)" />
</div>
<span>二.层级选择器</span>
<div class="btnDiv">
<input type="button" id="btn9" value="改变id=container下面所有class=itemDiv的背景颜色" />
<input type="button" id="btn10" value="获得id=itemDiv1下面所有class=item的个数" />
<input type="button" id="btn11" value="获得所有class=item的个数" />
<input type="button" id="btn12" value="删除id=itemSpan下面所有的元素" />
<input type="button" id="btn13" value="将id=itemDiv4下面的元素追加到id=itemDiv7后面" />
<input type="button" id="btn14" value="给id=itemDiv4下面class=item的元素的div子元素添加一个addBg的class" />
</div>
<div class="btnDiv">
<input type="button" id="btn15" value="隐藏id=itemSpan下面所有class=item的元素" />
<input type="button" id="btn16" value="将id=itemSpan下面所有class=item的元素的个数写入id=itemDiv7的内容体" />
<input type="button" id="btn17" value="改变id=container下面第一层子元素的背景颜色" />
</div>
<span>
二.表单选择器
</span>
<div class="btnDiv">
<input type="button" id="btn18" value="选中所有的复选框" />
<input type="button" id="btn19" value="选中所有选中的复选框" />
<input type="button" id="btn20" value="给用户名输入框设置一个value(随意值)" />
<input type="button" id="btn21" value="设置密码输入框只读" />
<input type="button" id="btn22" value="选中省级下拉框的上海下拉项" />
<input type="button" id="btn23" value="选中性别单选按钮中的女" />
</div>
<div class="btnDiv">
<input type="button" id="btn24" value="向省级下拉框中添加下拉项（数据随意）" />
</div>
</div>
<div id="container">
<div id="itemDiv1" class="itemDiv">itemDiv1<br/>
<div class="item">0-item1</div>
<div class="item">0-item2</div>
<div class="item">0-item3</div>
<div class="item">0-item4</div>
<div class="item">0-item5</div>
<div class="item">0-item6</div>
</div>
<div id="itemDiv2" class="itemDiv">itemDiv2<br/>
<div class="item">1-item1
</div>
<div class="item">1-item2</div>
<div class="item">1-item3</div>
<div class="item">1-item4</div>
<div class="item">1-item5</div>
</div>
<div id="itemDiv3" class="itemDiv">itemDiv3<br/>
<div class="item">2-item1</div>
<div class="item">2-item2</div>
<div class="item">2-item3</div>
<div class="item">2-item4</div>
</div>
<div id="itemDiv4" class="itemDiv">itemDiv4<br/>
<div class="item">3-item1</div>
<div class="item">3-item2</div>
<div class="item">3-item3</div>
<br>
<div class="item">
<div class="borderDiv"></div>
</div>
</div>
<div class="itemDiv">itemDiv5<br/>
<div class="item">4-item1</div>
<div class="item">4-item2</div>
</div>
<div class="itemDiv">itemDiv6<br/>
<div class="item">5-item1</div>
</div>
<div id="itemDiv7" class="itemDiv">itemDiv7<br/>
</div>
<span id="itemSpan" class="itemSpan">itemSpan<br/>
<div class="item">span1</div>
<div class="item">span2</div>
<div class="item">span3</div>
<div class="item">span4</div>
</span>
<br style="clear: both;">
<hr />
<form id="form" style="margin: 0 auto;width: 40%;">
用户名：
<input type="text" name="username" id="username"/><br />
密码：
<input type="password" name="password"/><br />
文件选择:
<input type="file" name="file"/><br />
爱好：
<input type="checkbox" name="hobby" checked="checked" value="足球"/>足球
<input type="checkbox" name="hobby" checked="checked" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="网球"/>网球<br />
省：
<select name="province" id="province_">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="南京">南京</option>
</select>
<br />
性别：
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<br />
备注：
<textarea name="desc"></textarea><br/>
普通按钮：
<input type="button" value="普通按钮" /><button>Button</button>
</form>
<hr />
</div>
</body>
</html>1.4 使用jQuery操作元素的属性
1.4.1 使用css方法
# 使用:jq对象.css(属性参数);
* $("div").css("background", "red"); // 单个参数时,属性和属性值用逗号隔开
* $("div").css({"background":"red","border":"2px solid blue"}); // 多个参数时,使用键值对形式1.4.2 使用CSS类的方法
# 添加属性:addClass()方法
* 用法:jq对象.addClass(class类)
* $("tbody tr:odd").addClass("odd"); // 将tbody标签内的奇数行添加样式类odd
# 删除属性:removeClass()方法
* 用法:jq对象.removeClass(class类)
* $("tbody tr:odd").removeClass("odd"); // 将tbody标签内的奇数行删除样式类odd1.4.3 属性值操作方法
# attr(name):设置或返回被选元素的属性值
* 用法:jq对象.attr(属性名,属性值)
* $("img").attr("src","img/test.jpg"); // 将img的添加src属性,值为"img/test.jpg"
* 用法:jq对象.attr({属性名:属性值,属性名2:属性值}) 属性名可以有"",属性值必须有""
* $("img").attr({"src":"img/test.jpg","alt":"test"}); // 将img的src和alt属性设为指定值
# removeAttr(name):删除元素指定的属性
* 用法:jq对象.removeAttr(属性名)
* $("img").removeAttr("src"); // 删除img标签元素的src属性
# prop(name):设置或返回元素的属性值
* 用法:jq对象.prop(属性名,属性值)
* $("input[type='checkbox']").prop("checked"); // 将type类型为checkbox的input标签元素的选中(前提是有checked属性)
*用法: jq对象.prop({属性名:属性值,属性名2:属性值}) 属性名可以有"",属性值必须有""
* $("input[type='checkbox']").prop({"checked":true, "disabled":true}); // 将checkbox选中并禁用
# removeProp(name):用来删除由.prop()方法设置的属性集(attr设置的属性值也可删除)
* 用法:jq对象.removeProp(属性名)
* $("img").removeProp("src"); // 删除img标签元素的src属性attr()和prop()方法的区别:
attr()方法:不能修改布尔类型的属性值,一般用于操作非布尔值元素的属性;
prop()方法:可以修改布尔类型的属性值,一般用于操作布尔值元素的属性.
1.4.4 HTML/文本/值的设置
# html(value):设置或获取对象的内容,一般针对含有文本的元素,使用在图片上无效
* 用法:jq对象.html() 获取jq对象的内容
* $("p").html(); // 获取p标签的内容
* 用法:jq对象.html(value) 设置jq对象的值为value
* $("p").html("java"); // 将所有的p标签的内容设为java
# text(value):设置或获取对象的内容
* 用法:jq对象.text() 获取jq对象的内容
* $("p").text(); // 获取p标签的内容
* 用法:jq对象.text(value) 设置jq对象的值为value
* $("p").text("java"); // 将所有的p标签的内容设为java
# val(value):设置或获取元素的值(相当于是js对象中value属性)
* 用法:jq对象.val()
* $("input[type='text']").val(); // 获取input的value值
* 用法:val(value值)
* $("input[type='text']").val(value); // 设置文本框的值为value1.5 jQuery对象访问
# each(callback):以每一个匹配的元素作为上下文来执行一个函数(callback)
* 用法:jq对象.each(function(迭代变量){要执行之代码}); 使用return可以跳出循环
*$("img").each(function(n){ // 将所有的img标签添加src属性,n是从0开始
// this是代表DOM对象
// $(this)是代表jq对象
this.src = "img/" + n + ".jpg";
* });
# size():返回jq对象中元素的个数
* 用法:jq对象.size()
* var num = $("img").size(); //返回img对象的个数
# length:返回jq对象中元素的个数
* 用法:jq对象.length;
* var num = $("img").length; // 获取img对象的个数
# get([index]):取得其中一个匹配的元素, num表示取得第几个匹配的元素,num从0开始
* 用法:jq对象.get(num); 当无参数时,是获取所有的匹配的对象集合
* $("img").get(); // 获取所有img对象的集合
* $("img").get(0); // 获取匹配的第一个元素对象,与$(this)[0]等价1.6 文档处理
# append(content):向每个匹配的元素内部追加内容,其中内容可以是标签
* 用法:jq对象.append(内容);
* $("p").append("内容"); // 向所有p标签内添加内容(追加)
* $("select").append("<option value='内容'>内容</option>"); // 向select标签添加option标签
# appendTo(content):把所有匹配的元素追加到另一个指定的元素中
* 用法:jq对象.appendTo(元素) 将jq对象添加到元素中
* $("p").appendTo("div"); // 将所有p标签元素追加到div中
# prepend(content):向每个匹配的元素内部前置内容,参数是要插入到目标元素内部前端的内容
* 用法:jq对象.prepend(内容);
* $("p").prepend("<b>Hello</b>"); // 向所有p标签元素内部的前面插入内容
# prependTo(content):把所有匹配的元素前置到另一个、指定的元素中
* 用法:jq对象.prependTo(元素) 将jq对象前置到元素内容中
* $("p").prependTo("#AdDiv"); // 将所有的p标签内容前置到id为AdDiv元素内部的前面
# empty():删除匹配的元素集合中所有的子节点
* 用法:jq对象.empty(); 删除jq对象中所有的子节点,jq对象本身不删除
* $("p").empty(); // 删除所有p元素中的子节点元素
# remove([expr]):从DOM中删除所有匹配的元素,参数是用于筛选元素的jQuery表达式
* 用法:jq对象.remove(选择器)
* $("p").remove(); // 删除所有的p标签元素,其本身要被删除
* $("div").remove("#AdDiv"); // 删除所有ID为AdDiv的div元素1.7 jQuery筛选功能
# children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,参数是过滤子元素的表达式
* 用法:jq对象.children(过滤器)
* $("div").children(); // 获取所有div元素的所有子元素
* $("div").children("#AdDiv"); // 获取所有div元素的子元素中ID为AdDiv的所有元素
# find(expr|obj|ele):搜索所有与指定表达式匹配的元素对象,这个函数是找出正在处理的元素的后代元素的好方法,不包括本身元素,是在本元素的子元素中查找
expr:用于查找的表达式
obj:一个用于匹配元素的jQuery对象
ele:一个DOM元素
* 用法:jq对象.find(参数)
* $("p").find("span"); // 查找所有p标签元素下的span元素对象
# parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合,参数是筛选表达方式
* 用法:jq对象.parent(筛选表达式)
* $("p").parent(); // 获取p元素的所有的父类元素对象1.8 jQuery工具类
# jQuery.each(object, [callback]):通用例遍方法,可用于例遍对象和数组
object:需要例遍的对象或数组
callback:每个成员/元素执行的回调函数
* 用法:$.each(对象或数组,function(i,n){代码}); i是循环的索引值,n是每次循环时的值
* $.each(数组或对象集合, function(i, n) { // 将数组内容添加到select的option中
$("select").append("<option value='"+i+"'>"+n+"</option>");
* });
* 用法:$(对象或数组).each(function(i,n){代码}); i是循环的索引值,n是每次循环时的值
* $(数组或对象集合).each(function(i, n) { // 将数组内容添加到select的option中
$("select").append("<option value='"+i+"'>"+n+"</option>");
* });案例代码
// 定义省份和城市信息
var provinceArr = ["北京市", "河南省", "四川省", "湖北省", "浙江省"];
// 定义存储城市信息的二维数组,与省份数组的元素相对应
var citys = new Array(provinceArr.length);
// 北京对应的城市信息
citys[0] = ["北京市"];
// 河南对应的城市信息
citys[1] = ["郑州市", "开封市", "洛阳市", "信阳市"];
// 四川对应的城市信息
citys[2] = ["成都市", "遂宁市", "乐山市", "绵阳市"];
// 湖北对应的城市信息
citys[3] = ["武汉市", "襄阳市", "荆州市", "恩施市"];
// 浙江省对应的城市信息
citys[4] = ["杭州市", "温州市", "义乌市", "嘉兴市"];
// 初始化省份信息
$(function(){
var $p = $("#province");
$.each(provinceArr, function(i, n) {
$p.append("<option value='"+i+"'>"+n+"</option>");
});
});
// 生成省份和城市信息
$(function(){
var $city = $("#city");
var $p = $("#province");
$p.change(function(){
// 将城市的信息清空,方式1
$("#city option[value]").remove();
// 将城市的信息清空,方式2,将下拉框的options数组长度设为1,保留第一个
// $city[0].options.length = 1;
// 添加城市的信息
$.each(citys[$p.val()], function(i, n) {
$city.append("<option value='"+n+"'>"+n+"</option>");
});
});
});1.9 jQuery的事件
# on(events,[selector],[data],fn):在选择元素上绑定一个或多个事件的事件处理函数,参数中不能使用this
* events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin";
* selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代,如果选择的< null或省略,当它到达选定的元素,事件总是触发;
* data:当一个事件被触发时要传递event.data给事件处理函数;
* fn:该事件被触发时执行的函数, false 值也可以做一个函数的简写,返回false.
* 用法:jq对象.on(事件,事件处理函数)
* $("p").on("click", function(){
alert(this.text());
* });
* 用法:jq对象.on(事件,参数,事件处理函数)
* function myHandler(event) {
alert(event.data.foo);
}
* $("p").on("click", {foo: "bar"}, myHandler); // 传递参数
# bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数
* type: 含有一个或多个事件类型的字符串,由空格分隔多个事件,比如"click"或"submit",还可以是自定义事件名;
* data:作为event.data属性值传递给事件对象的额外数据对象;
* fn:绑定到每个匹配元素的事件上面的处理函数.
* 用法:jq对象.bind(事件,参数,事件处理函数)
* $("p").bind("click", function(){
alert( $(this).text() );
* });
* $('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
* });
* $("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
* });
# delegate(selector,[type],[data],fn):指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
* selector:选择器字符串,用于过滤器触发事件的元素;
* type:附加到元素的一个或多个事件,由空格分隔多个事件值,必须是有效的事件;
* data:传递到函数的额外数据;
* fn:当事件发生时运行的函数.
* 用法:jq对象.delegate(过滤器字符串,事件类型,参数,事件执行函数)
* $("div").delegate("button","click",function(){ // 按钮点击显示/隐藏p标签
$("p").slideToggle();
* });
# blur([[data],fn]):当元素失去焦点时触发blur事件
* data:blur([Data], fn)可传入data供函数fn处理;
* fn:在每一个匹配元素的blur事件中绑定的处理函数.
* 用法:jq对象.blur(参数,事件处理函数)
* $("p").blur(function(){alert("段落失去焦点")}); // 当p标签元素失去焦点,提示信息
# change([[data],fn]):当元素的值发生改变时,会发生change事件,作用于文本域,textarea和select元素,在元素失去焦点时触发
* data:change([Data],fn)可传入data供函数fn处理;
* fn:在每一个匹配元素的change事件中绑定的处理函数.
* 用法:jq对象.change(参数,修改事件处理函数)
* $("input[type='text']").change(function(){alert(this.innerHtml)});
# click([[data],fn]):触发每一个匹配元素的click事件
* data:click([Data],fn)可传入data供函数fn处理;
* fn:在每一个匹配元素的click事件中绑定的处理函数.
* 用法:jq对象.click(参数,点击事件处理函数)
* $("button").click(function(){处理代码}); // button标签元素的点击事件
# focus([[data],fn]):当元素获得焦点时,触发focus事件
* data:focus([Data], fn)可传入data供函数fn处理;
* fn:在每一个匹配元素的focus事件中绑定的处理函数.
* 用法:jq对象.focus(参数,获得焦点处理函数)
* $("input[type='text']").focus(function(){alert("文本框获得焦点")});
# submit([[data],fn]):当提交表单时,会发生submit事件,只适用于表单元素
* data:submit([Data],fn)可传入data供函数fn处理;
* fn:在每一个匹配元素的submit事件中绑定的处理函数.
* 用法:jq对象.submit(参数,提交表单处理函数)
* $("form").submit(function(){alert("表单提交")});
# trigger(type,[data]):在每一个匹配的元素上触发某类事件
* $(选择器).trigger('事件类型',处理函数);
# triggerHandler(type, [data]):触发指定的事件类型上所有绑定的处理函数,但不会执行浏览器默认动作,也不会产生事件冒泡
* $(选择器).trigger('事件类型',处理函数);
# trigger和triggerHandler的区别:
* triggerHandler不会触发浏览器默认事件,trigger会触发浏览器默认事件;
* triggerHandler只触发匹配对象集合中第一个元素的事件处理函数,trigger触发匹配对象集合中每一元素的事件函数;
* triggerHandler返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象,如果最开始的jQuery对象集合为空,返回undefined.1.10 jQuery综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 定义数组：
var cities = [
["杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市"],
["南京市", "苏州市", "扬州市", "无锡市"],
["武汉市", "襄阳市", "荆州市", "宜昌市", "恩施"],
["石家庄市", "唐山市", "保定市", "邢台市", "廊坊市"],
["长春市", "吉林市", "四平市", "延边市"]
];
var $city = $("#city");
// 获得代表省份的下拉列表:
$("#province").change(function() {
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍历并且判断:
$.each(cities, function(i, n) {
// 判断:
if(i == val) {
$(n).each(function(j, m) {
// alert(j+" "+m);
$city.append("<option>" + m + "</option>");
});
}
});
});
});
</script>
<!--jQuery进行表单校验-->
<script>
$(function() {
// 将必填项的输入框添加*
$(".require").parent().append("<b class='high'> *</b>");
// 为所有的输入框添加失去焦点事件
$("form input").blur(function() {
// 将所有的提示信息清除
$(this).parent().children(".formtips").remove();
// 判断失去焦点的元素是否是username
if($(this).attr("id") == "username") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>用户名不能为空</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>");
}
}
// 判断失去焦点的元素是否是password
if($(this).attr("id") == "password") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>密码不能为空</span>");
} else {
if($(this).val().length < 6) {
$(this).parent().append("<span class='formtips onError'>密码长度至少六位</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>密码可用</span>");
}
}
}
// 判断失去焦点的元素是否是repassword
if($(this).attr("id") == "repassword") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>确认密码不能为空</span>");
} else {
// 获取密码框的后面是否有span标签
// 获取密码框的兄弟元素span标签(如果有),再获取span标签的父元素td,在td的子元素中查找class属性为onError
// if($("#password").siblings().parent().find(".onError").length != 0){
// 获取密码框的含有class属性为onError的所有兄弟元素集合
if($("#password").siblings(".onError").length != 0) {
// 获取密码框的父元素td,在td的所有子元素中查找所有的class属性为onError的元素集合
// if($("#password").parent().find(".onError").length != 0){
$(this).parent().append("<span class='formtips onError'>第一次输入密码有误</span>");
} else if($(this).val() != $("#password").val()) {
$(this).parent().append("<span class='formtips onError'>两次密码不一致</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>确认密码可用</span>");
}
}
}
// 校验邮箱
if($(this).attr("id") == "email") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>邮箱不能为空</span>");
} else {
if($(this).val().match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)) {
$(this).parent().append("<span class='formtips onSuccess'>邮箱可用</span>");
} else {
$(this).parent().append("<span class='formtips onError'>邮箱格式错误</span>");
}
}
}
// JQ对象绑定事件,返回的是自身,则可以使用链式绑定其他事件
// 输入框的获取焦点事件
}).focus(function() {
// 自身对象的失去焦点方法
$(this).triggerHandler("blur");
// 输入框的键盘输入事件
}).keyup(function() {
$(this).triggerHandler("blur");
});
// form表单提交校验
$("form").submit(function() {
// 触发所有input的blur事件,以便完成各个字段信息的校验
$("input").trigger("blur");
// 获取出现错误信息的输入框的个数
var length = $(".onError").length;
if(length > 0) {
alert("信息存在错误,请重新填写!")
return false; //返回false,form表单不会提交
}
});
});
</script>
</head>
<body>
<!--整体DIV-->
<div class="bodyDiv">
<form action="" method="post">
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" class="require"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" class="require"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword" class="require"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" name="province">
<option value="">-请选择-</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaWeb前端开发知识总结(jQuery)
- JavaWeb前端开发知识总结(mysql)
- JavaWeb前端开发知识总结(javaScript)
- JavaWeb前端开发知识总结(CSS)
- JavaWeb开发中3大必会知识总结(程序员必读)
- JavaWeb开发知识总结(tomcat)
- JavaWeb开发知识总结(Ajax,JSON)
- JavaWeb开发知识总结(表单重复提交,数据分页)
- JavaWeb开发知识总结(网上商城项目总结)
- javaWeb------前端知识（js,jquery）
- JavaWeb开发知识总结(二)-(oracle_查询)
- 【JavaWeb】基础知识总结05 jQuery
- Java web 开发中的servlet知识总结
- JavaWeb开发知识总结(内省,MVC,事务)
- Web前端—jquery知识总结
- JavaWeb开发知识总结(HttpServletRequest,HttpServletResponse)
- JavaWeb开发知识总结(tomcat)
- JavaWeb开发知识总结(Cookie,Session)
- JavaWeb开发知识总结(七)-(struts2_文件上传_Ajax)
- JavaWeb开发知识总结(一)-(oracle_基础)