传智播客
——
专注于Java、.Net和Php、网页平面设计工程师的培训
jQuery
基础入门
今日内容介绍
-
重写javascript案例:弹出广告
-
重写javascript案例:隔行换色
-
重写javascript案例:全选/全不选
今日内容学习目标
-
列举常见的五种选择器,并简单描述其作用
-
通过选择器,获得jQuery对象
-
学会给标签绑定事件
-
可以实现显示或隐藏标签。
-
重写弹出广告
-
案例分析
-
重写javascript案例“弹出广告”
什么是jQuery
jQuery
是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。
在开发时候,通常不会使用JavaScript原生代码开发,而是使用框架
jQuery2.0
及后续版本不再支持IE6/7/8浏览器
核心理念是write less,do more(写得更少,做得更多)
引入和对象获取
学习jQuery只需要将对应js库下载,并导入到我们项目下,在html页面使用<script>导入即可。
<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>
-
基本语法:jQuery(选择器) 或 $(选择器)
-
-
及在 jQuery中 "jQuery == $",区分大小写
-
//1 获得jQuery对象
// * 命名约定:jQuery对象变量名建议以$开头。
var $demoId = $("#demoId");
-
注释:
//单行注释
/*块注释*/
-
-
基本操作
- jQuery页面加载
-
-
jQuery
提供ready()函数,用于页面成功加载后执行。与window.onload函数类型。
<script type="text/javascript">
//实际开发中,我们习惯将<script>标签编写在<head>标签体内,
//整个页面的解析时从上网下的,此时将不能获得<input>对象
alert($("#demoId").length); //获得匹配对象的个数,0表示没有匹配到任何
//1 javascript页面加载
window.onload = function(){
alert("js页面加载");
}
//2 jQuery页面加载
$(document).ready(function () {
alert("jQuery页面加载");
});
/*
* 注意:
* * js给onload只能赋一个值,如果对此赋值,后面的将覆盖前的。
* * jQuery ready可以使用多次,多个页面加载将依次执行。
*/
</script>
<body>
<input type="text" id="demoId" value="传智&黑马&You"/>
</body>
jQuery对象和DOM转换
jQuery
对象和DOM对象可以相互转换,但两个对象的函数不能彼此混搭使用。jQuery对象只能使用自己的函数
DOM
对象转换成jQuery对象,语法:jQuery(dom对象)
jQuery
对象转换成DOM对象,语法:$username[index]
//1 原生javascript获得value值
var d1 = document.getElementById("demoId");
// alert(d1.value);
//2 将js dom对象 转换成jQuery对象
// * 语法:$(dom对象) 或 jQuery(dom对象)
var $d2 = $(d1);
// alert($d2.val());
//3 将jQuery 转换成 dom对象
// * jQuery对象内部以数组方式存放所有的匹配数据,如果只匹配到一个,索引号为0。
var d3 = $d2[0];
alert(d3.value);
// 总结:jQuery对象和dom对象,函数(api)不能相互调用
-
基本选择器
-
<script type="text/javascript">
$(document).ready(function () {
//1 id选择器,格式:
$("#id值")
var $d1 = $("#r01");
alert($d1.length); //1 ,id="r01"只有一个
//2 标签选择器,格式:
$("标签名")
var $d2 = $("input");
alert($d2.length); //3,表示3个input
//3 类选择器,格式:
$(".class类名")
// * length 和 size() 等效
var $d3 = $(".myClass");
alert($d3.size()); //2,表示两个input class为myClass
});
</script>
<input type="radio" name="hobby" value="敲代码" id="r01"/>
<input type="radio" name="hobby" value="调试bug" class="myClass"/>
<input type="radio" name="hobby" value="谈需求" class="myClass"/>
本案例中将使用到jQuery的“基本过滤选择器”、样式操作、属性操作等知识,接下来我们下了解这些知识。
-
效果(了解)
-
基本
-
-
-
通过改变元素 高度和宽度 显示或隐藏
show(
speed
,fn) 显示
参数1 speed,显示速度,单位:毫秒。固定字符串:
slow, normal, or fast
参数2fn,显示成功之后回调函数。
hide() 隐藏
toggle() 切换
-
滑动
-
-
通过改变元素 高度 显示或隐藏
slideDown() 显示,高度变大。
slideUp() 隐藏,高度变小。
slideToggle() 切换
-
淡入淡出
-
-
通过改变元素 透明度 显示或隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
fadeTo(
speed,opacity,[fn]
) 指定透明度
参数2
opacity
:一个0至1之间表示透明度的数字
-
案例实现
-
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
var time;
$(function(){
// 设置定时 5秒后执行一个显示广告的函数
time = setInterval("showAd()",5000);
});
// 显示广告的函数
function showAd(){
// 获得广告的div,显示
// $("#divAd").show(1000);
// $("#divAd").slideDown(3000);
$("#divAd").fadeIn(3000);
// 清空定时:
clearInterval(time);
// 重新设置定时:
time = setInterval("hideAd()",5000);
}
// 隐藏广告的函数:
function hideAd(){
// 获得广告的div,隐藏
// $("#divAd").hide(3000);
// $("#divAd").slideUp(3000);
$("#divAd").fadeOut(3000);
// 清空定时:
clearInterval(time);
}
</script>
-
选择器总结
-
基本选择器
-
-
jQuery
后续的学习中,“基本选择器”使用的频率最大,我们先预先学习一下。
<script type="text/javascript">
$(document).ready(function () {
//1 id选择器,格式:
$("#id值")
var $d1 = $("#r01");
alert($d1.length); //1 ,id="r01"只有一个
//2 标签选择器,格式:
$("标签名")
var $d2 = $("input");
alert($d2.length); //3,表示3个input
//3 类选择器,格式:
$(".class类名")
// * length 和 size() 等效
var $d3 = $(".myClass");
alert($d3.size()); //2,表示两个input class为myClass
});
</script>
<input type="radio" name="hobby" value="敲代码" id="r01"/>
<input type="radio" name="hobby" value="调试bug" class="myClass"/>
<input type="radio" name="hobby" value="谈需求" class="myClass"/>
-
层级选择器
-
A B ,获得A元素内部的所有的B元素。(祖孙)--后代
A > B ,获得A元素下面的所有B子元素。(父子)
A + B ,获得A元素同级下一个B元素(兄弟)
A ~ B,获得A元素同级所有B元素(兄弟)
-
基本过滤选择器
-
:first 第一个
:last 最后一个
:not(..) 删除指定内容。例如:1234:not(3) --> 124
:even 偶数,从 0 开始计数 -- 操作索引号,页面显示奇数项
:odd 奇数
:eq(index) 指定第几个 =
:gt(index) 大于n个 >
:lt(index) 小于n个 <
--------------------------------------------------
:header 获得标题 (<h1> /<h2> ....)
:animated 获得动画的
:focus 获得焦点
-
属性选择器
-
[属性名] 获得有属性名的元素。例如:<xxx name="username"> | <xxx name=" "> | <xxx name>
[属性名=值] 获得属性名 等于 值 元素。
[属性名!=值] 获得属性名 不等于 值 元素。
[...][...][...] 复合属性选择器,多个属性同时过滤。where .. and ... and ...
----------------------------------
[属性名^=值] 获得属性名 以 值 开头 元素。
[属性名$=值] 获得属性名 以 值 结尾 元素。
[属性名*=值] 获得属性名 含有 值 元素。
-
表单属性选择器
-
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>
:checked 选中(单选radio ,多选checkbox) <input type="..." checked="checked">
:selected 选择(下列列表 <select>) <option selected="selected">
-
隔行换色 :
-
案例介绍
-
重写JavaScript案例“隔行换色”
-
案例相关技术
-
class操作:
-
-
-
<xxx class=””>
addClass() 给指定标签的class属性追加样式
removeClass() 将标签指定的class属性移除
toggleClass() 切换class属性样式。及没有时添加,有的时候删除。
-
案例实现
-
CSS样式:
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
JavaScript代码
<script>
$(function(){
// 找奇数行:
//$("tr:odd").addClass("odd");
// 偶数行:
//$("tr:even").addClass("even");
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
});
</script>
-
全选和全不选
-
案例介绍
-
重写JavaScript时案例“全选/全不选”
-
案例相关的函数
-
属性操作:prop()
-
-
-
prop() 操作的标签的特性。JQ1.6新特性,获得一些第一次分配undefined属性值的标签时,如果抛异常,将忽略浏览器生成的任何错误。
-
removeProp() 移除标签的特性。
-
案例实现
-
// 复选框的全选和全不选:
$(function(){
// 步骤一:为上面的复选框绑定单击事件:
$("#selectAll").click(function(){
/*if(this.checked == true){
// 如果上面的复选框被选中:
$("input[name='ids']").
prop
("checked",true);
}else{
// 上面的复选框没有被选中
$("input[name='ids']").
prop
("checked",false);
}*/
$("input[name='ids']").prop("checked",this.checked);
});
});
-
省市联动
-
案例分析
-
重写javascript案例“省市联动”
-
案例相关的函数
-
本案例需要对标签的value属性值,标签体内容进行操作,并需要遍历所有的市。
-
属性操作:val、text、html
-
val() 获得value属性的值
val(...) 给value属性设置值
html() 获得html代码,如果有标签,一并获得。
html(....) 设置html代码,如果有标签,将进行解析。
text() 获得文本,如果有标签,忽略。
text(....) 设置文本,如果含有标签,不进行解析。原样输出。
-
遍历函数:each
-
each的方法进行遍历.
第一种用法:
* JQ的对象.each(function(i,n){
n
参数1:遍历索引号 参数2:数组中的元素
});
第二种用法
* $.each(数组,function(i,n){
});
-
文档处理:内部插入
-
A.append(B) , 将B插入到A内部后面。
<A>
....
<B></B>
</A>
A.prepend(B) , 将B插入到A内部前面。
<A>
<B></B>
....
</A>
---------------------------------------------------
A.appendTo(B) ,将A插入到B内部后面
A.prependTo(B) ,将A插入到B内部前面。
-
案例实现
-
实现步骤:
//1、添加jq库文件
//2、编写页面加载事件
//3、得到省份标签,并绑定change事件
//4、获得省份的value值
//5、根据省份的value得到城市对应的数组数据
//6、得到城市的标签,并向标签内追加内容
<script type="text/javascript">
// 定义二维数组:
var cities = new Array(4);
cities[0] = new Array("沈阳市","鞍山市","大连市");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
$(function(){
//给省绑定change事件
$("#province").change(function(){
//获得省value值,即:索引号
var pIndex = $(this).val();
// 获得对应市的数组
var allCity = cities[pIndex];
//清空city列表
$("#city")[0].length = 0;
//遍历数组
$(allCity).each(function(i,n){
//alert(i+" "+n);
$("#city").append("<option value='"+i+"'>"+n+"</option>");
});
});
});
</script>
-
左右选择
-
案例分析
-
本案例我们jQuery的“层级选择器”、“表单属性过滤选择器”、“文档处理”。通过“层级选择器”获得需要的操作对象,通过“表单属性过滤选择器”从已有的对象中筛选出需要的,最后通过“文档处理”将筛选后的内容追加到指定的位置。
-
案例实现
-
开发步骤:
//1
、添加jq库文件
//2
、添加页面加载事件
//3
、获得add标签,并绑定事件
//4
、获得左边的下拉框对象中选中的option对象,并添加到右边的下拉框中
<script type="text/javascript">
$(function(){
//得到add标签
$("#add").click(function(){
//得到选中的option元素
$("#selectLeft option:selected").appendTo("#selectRight");
});
//得到addAll标签
$("#addAll").click(function(){
//得到所有的option元素
$("#selectLeft option").appendTo("#selectRight");
});
});
</script>
-
总结
-
常见事件
-
-
-
事件切换
-
hover( over , out )
简化方法
A.hover( fn1 , fn2)
等效 A.mouseover( fn1 ).mouseout( fn2 )
toggle( fn1 , fn2 , .... ) click
事件增强版,轮回
-
表单校验
-
案例介绍
-
在学习JavaScript时,我们手动的完成过表单数据的校验,此功能在开发中非常常见,属于通用功能范畴,实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。
-
案例相关知识:validation校验
-
下载
-
-
-
帮助文档位置: http://jqueryvalidation.org/documentation/
-
目录结构:
-
导入
-
validate
是jQuery插件,及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库(可选)
<!--依赖的jQuery库-->
<script src="../js/jquery-1.
8
.
3
.js" type="text/javascript" charset="utf-8"
/
>
<!--validation校验库-->
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"
/
>
<!--国际化库,中文提示(可选)-->
<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"
/
>
-
使用前提
-
validate
需要手动的声明,对那个表单进行校验,手动方式可以使用以下4种检验方式。
<script type="text/javascript">
$(
document
).ready(function () {
$("#formId").validate();
});
</script>
校验类型
|
取值
|
描述
|
required
|
true|false
|
必填字段
|
email
|
email
|
邮件地址
|
url
|
|
路径
|
date
|
数字
|
日期
|
dateISO
|
字符串
|
日期(YYYY-MM-dd)
|
number
|
number
|
数字(负数,小数)
|
digits
|
|
整数
|
minlength
|
数字
|
最小长度
|
maxlength
|
数字
|
最大长度
|
rangelength
|
[minL,maxL]
|
长度范围
|
min
|
|
最小值
|
max
|
|
最大值
|
range
|
[min,max]
|
值范围
|
equalTo
|
jQuery
表达式
|
两个值相同
|
remote
|
url
路径
|
ajax
校验
|
-
-
检验方式:js 代码方式
-
语法:
$(…).validate({
rules:{},
messages:{}
});
rules 规则语法:
rules:{
字段名:校验器,
字段名:校验器
}
校验器语法:
语法:{校验器:值,校验器:值,...}
message 提示语法:
message:{
字段名:{校验器:"提示",校验器:"提示",...}
}
-
-
案例实现
-
-
-
js 代码
-
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script
src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$().ready(function () {
$("#formId").validate({
rules:{
user
name:{
required:true,
minlength:2,
maxlength:5
},
password
:{
required:true,
number:true
},
repassword
:{
equalTo:"[name='
password
']"
},
email:"email",
username:{
required:true,
rangelength:[2,5]
},
gender:{
required:true
}
},
messages:{
gender:{
required:"性别必须勾选"
}
}
});
});
</script>
-
-
html 代码
-
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<!--在指定位置显示错误信息
* class 必须是error
* for 必须设置错误对象
-->
<label for="gender" class="error"></label>
-
-
总结
-
<img src="a.jpg"/>
$("#img").prop("src","1.jpg");
新版本使用的语法 // document.getElementById("img").src = "1.jpg";
<img src="1.jpg"/>
$("#img").attr("src","1.jpg");
老版本使用的语法