- 概述
- jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多)
- jQuery入门
- jQuery和html整合
- 下载
- 下载地址:www.jquery.com
- 使用script的src属性即可
"eg:"
- 语法
- $("选择器") 或 jQuery("选择器")
"var 元素对象 = $("选择器");
$("#id值"); val();"
- javaScript和jquery区别
- 注意事项:
"使用jquery的方式获取的对象称为jquery对象,
使用js的方式获取的对象称为dom(js)对象,
两者的方法和属性不能混用,
使用jquery的方法和属性时,必须保证对象是jquery对象."
- js对象和jquery对象之间的转换
- js对象 → jquery对象
- $(js对象);
- jquery对象 → js对象
- 方式1:jQuery对象[index]
- 方式2:jQuery对象.get(index)
- 事件(event)
"在js的事件中,事件前加on,在jq的事件中通常没有on,直接写名称即可"
- 页面加载成功事件
- 格式1:$(document).ready(function(){});
- 格式2:$(function(){});
- 注意:在同一个页面内,jquery的页面加载成功事件可以出现多次,从上到下依次执行,js的页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效
- 重点事件
- click
- change
- submit
- focus
- blur
- jquery事件和事件源的绑定
"要保证页面加载成功后,才能使用jq的事件"
- jquery对象.事件名称(function(){});
- jQuery的选择器
- 基本选择器:★
- * 所有
- # id
- .class
- 标签选择器(标签名)
- 多个选择器用","号隔开 a,b
- 层次选择器:★
- a b:选择a的b的后代
- a>b:选择a的b孩子
- a+b:选择a的b大弟弟
- a~b:选择a的所有的b弟弟
- 基本过滤:
- :first 第一个
- :last 最后一个
- :even 偶数
- :odd 奇数
- :eq(index) 索引=
- :gt(index) 索引>
- :lt(index) 索引<
- :not(选择器)
- 内容过滤:
- :has(选择器):包含
- 可见性过滤:
- :hidden:不可见 主要针对的是 文本隐藏域和指定display=none
- :visible:可见
- 属性选择器★
- [属性名]:有指定属性的元素
- [属性名='值']:有指定属性和值的元素
- 表单对象属性★
- :enabled 可用的
- :disabled 不可用的
- :checked 选中的(针对的是单选框和复选框)
- :selected 选中的(下拉选)
- 表单:
- :input:选择所有的表单子标签
"input:选中所有input标签
select textarea button"
- input select textarea button
- jQuery的DOM操作
- jQuery效果:
- 基本:★ 高和宽都变化
- hide([毫秒值]):隐藏
- show([毫秒值]):显示
- toggle([毫秒值]):切换
- 滑入滑出:高变化
- slideUp([毫秒值]):滑出
- slideDown([毫秒值]):滑入
- slideToggle([毫秒值]);切换
- 淡入淡出:
- fadeIn([毫秒值]);
- fadeOut([毫秒值]);
- fadeToggle();切换
- 了解:
- fadeToggle(毫秒值,function(){});
- 以上效果都可以添加一个回调函数
- css样式
- css
- 设置css样式
- 格式1:设置单个属性
"jq对象.css("属性","值");"
- 格式2:设置多个属性
"jq对象.css({
"属性":"值",
"属性1":"值1"
});"
- 获取css样式的值
" jq对象.css("属性名称");"
- 获取元素的宽和高
- jq对象.width()
- jq对象.height()
- 扩展:offset()
"获取元素在当前页面的位置"
- top
"元素距离顶部的距离"
- left
"元素距离左边的距离"
- 属性
- attr():设置或者获取元素的属性
- 设置属性(给标签添加属性)
- 格式1:设置单个属性
"jq对象.attr("属性名","值");"
- 格式2:设置多个属性
"jq对象.attr({
"属性":"值",
"属性1":"值1"
});"
- 获取属性的值
" jq对象.attr("属性名");"
- 移出属性(删除属性)
" jq对象.removeAttr("属性名");"
- prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)
- class操作 了解
- 元素.addClass("属性值");添加
- 元素.removeClass():移除指定的样式
- 元素.toggleClass("属性值"):切换
*/
/*
回顾:
jQuery:js类库(js框架)对js进行封装,本质上就是外部的js文件.
jQuery和html整合:
1.下载
2.通过script标签的src属性引入即可(1.11)
jQuery语法:
$("选择器"); 或 jQuery("选择器");
jq对象和js对象转换
jq ===> js(dom)
jq对象[index]
jq对象.get(index);
js ===> jq对象
$(js对象);
事件:
click:
submit:
change:
focus:
blur:
页面加载成功:
$(function(){});
$(document).ready(function(){});
选择器:
基本选择器:
*
#id
.class
标签名称
多个选择器之间使用逗号
层次选择器:
a b
a>b
a+b
a~b
基本过滤选择器:
:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index);
:not(选择器)
内容过滤选择器:
has(选择器);
可见性过滤选择器:
:hidden type="hidden" display = "none"
:visible
属性选择器:
[属性]
[属性='值']
表单对象选择器:
:enabled
:disabled
:selected 下拉选
:checked 单选框个复选框
表单选择器:
:input
input select textarea button
DOM:
效果:
基本效果:
hide()
show()
toggle()
滑入滑出:
slideUp();
slideDown();
slideToggle();
淡入淡出:
fadeIn();
fadeOut();
fadeToggle([毫秒值],回调函数);
操作css样式:
设置:
设置单个:
jq对象.css("属性名称","值");
设置多个:
jq对象.css({
"属性名称":"值",
"属性名称":"值"
});
获取:
jq对象.css("属性名称");
获取宽和高:
width();
height();
获取位置:
offset();
top:
left:
操作属性:
attr:
设置属性:
设置单个:
jq对象.attr("属性名称","值");
设置多个:
jq对象.attr({
"属性名称":"值",
"属性名称":"值"
});
删除:
removeAttr("属性名称");
prop:如果attr不好使使用prop代替
操作class:
addClass("class属性的值");
removeClass();
classToggle("class属性的值");
/////////////////////////////////////////////
案例1-省市联动
需求分析:
当省份改变的时候,根据选中的省份查询其所对应的市数组,遍历市数组,将每一个市拼成option插入到市的下拉选中.
技术分析:
事件
jq遍历
jq对DOM操作
/////////////////////////
步骤分析:
1.确定事件(改变事件)
给省份的下拉选添加改变事件
2.编写改变事件函数
//a.获取省份的value的值
//b.获取所对应的市数组
//c.获取市的下拉选对象
//d.遍历市数组,将每一个市拼成option插入到市的下拉选中
案例2-左右选择
需求分析:
当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中.
技术分析:
事件
文档处理
////////////////////
步骤分析:
1.确定事件(单击事件)
给按钮派发单击事件
2.编写函数
//a.将左边选中的第一个插入到右边
案例3-表单校验
需求分析:
通过使用validate插件来完成表单校验.
技术分析:
validate插件
//////////////////
扩展案例-模拟分组
//////////////////
day31jQuery
- jQuery遍历
- 方式1:jQuery的对象方法
- 格式:
" jq对象.each(function([index],[dom对象]){
对遍历到每个元素的操作
});"
- 方式2:全局函数
- 格式:
"$.each(要遍历的jquery对象,function([index],[dom对象]){
});
$.each(数组,function(){
});"
案例:
//方式1:jq对象的方法
$("#b1").click(function(){
//获取当前页面的文本隐藏域,并打印他们的value值
//[e1,e2,e3,e4] 存放的是dom(js)对象
$("input:hidden").each(function(index,ele){
// alert(index+" "+ele.value+" "+$(ele).val());
alert(this.value);
});
});
//方式2:全局遍历
$("#b2").click(function(){
//获取要遍历的对象
var $hideObj = $("input:hidden");
$.each($hideObj, function(index,ele) {
alert(index+" "+ele.value+" "+$(ele).val()+" "+this.value);
});
});
//js对象
var arr = new Array(1,2,3,"tom");
$("#b3").click(function(){
// $.each(arr, function(index,ele) {
// alert(index+" "+ele+" "+this);
// });
$(arr).each(function(index,ele){
alert(index+" "+ele+" "+this);
});
});
});
- jQueryDOM操作
- HTML代码/文本/值 ★
- val() : 对value属性的操作
- jq对象.val(); 获取value属性的值
- jq对象.val("值"); 设置value属性的值
- html() : 对标签体的操作
- jq对象.html(); 获取标签体的内容
- jq对象.html("值"); 设置标签体的内容
- text() : 对标签体的操作
- jq对象.text(); 获取标签体的内容
- jq对象.text("值"); 设置标签体的内容
- html和text区别
"设置内容: html可以将内容解析,text只是作为普通文本
获取内容:html获取所有源码内容,text只是获取文本内容"
- 文档处理
- 内部插入:
- append a.append(c) 将c插入到a的内部的后面
- prepend a.prepend(c) 将c插入到a的内部的前面
- appendTo a.appendTo(c) 将a插入到c的内部的后面
- prependTo a.prependTo(c)将a插入到c的内部的前面
内插入案例:
- 北京
- 天津
- 重庆
- 反恐
- 星际
$(document).ready(function() {
//1 获取 username的value属性的值
// alert($("[name='username']").val());
//2 设置 username的默认值为"许多多"
$("[name='username']").val("许多多");
//3通过html获取div标签体的内容
// alert($("div").html());
//4通过html设置div标签体的内容
// $("div").html("已满18,请戴眼镜...");
//5通过text获取div标签体的内容
// alert($("div").text());
//6通过text设置div标签体的内容
// $("div").text("已满18,请戴眼镜!!!!");
//7 两者设置值的区别
//html在设置内容时,可以解析html标签
$("div").html("已满18,请戴眼镜...");
//text在设置内容时,原样设置
// $("div").text("已满18,请戴眼镜...");
//8 两者获取值的区别
//html在获取时,原样获取(不会解析任何标签)
// alert($("div").html());
//text在获取时,会解析标签,仅仅获取文本内容
// alert($("div").text());
}); $(document).ready(function() {
//1 获取 username的value属性的值
// alert($("[name='username']").val());
//2 设置 username的默认值为"许多多"
$("[name='username']").val("许多多");
//3通过html获取div标签体的内容
// alert($("div").html());
//4通过html设置div标签体的内容
// $("div").html("已满18,请戴眼镜...");
//5通过text获取div标签体的内容
// alert($("div").text());
//6通过text设置div标签体的内容
// $("div").text("已满18,请戴眼镜!!!!");
//7 两者设置值的区别
//html在设置内容时,可以解析html标签
$("div").html("已满18,请戴眼镜...");
//text在设置内容时,原样设置
// $("div").text("已满18,请戴眼镜...");
//8 两者获取值的区别
//html在获取时,原样获取(不会解析任何标签)
// alert($("div").html());
//text在获取时,会解析标签,仅仅获取文本内容
// alert($("div").text());
});
- 外部插入:
- after a.after(c) 在a的后面插入c
- before a.before(c) 在a的前面插入c
- insertAfter a.insertAfter(c) 将a插入到c的后面
- insertBefore a.insertBefore(c) 将a插入到c的前面
案例:
- 北京
- 天津
- 重庆
I would like to say: p3
I would like to say: p2
I would like to say: p1
- 删除:
- empty():清空元素 (清空所有的子标签)
- remove():移除 (自杀)
删除案例:
- 北京
海淀区
- 天津
河西区
- 重庆
Hello
how are
you?
- jQuery的事件总结
- 事件切换(知道)
- hover:相当于给一个元素添加了mouseover和mouseout两个事件
"jq元素对象.hover(function(){
//第一个函数相当于mouseover
},function(){
//第二个函数相当于mouseout
});"
- toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题jquery1.8版本之前支持)
"jq元素.toggle(function(){},function(){}...);"
案例:
- 常见事件
- submit 表单提交事件★
- focus 获得焦点事件 ★
- blur 失去焦点 ★
- change 改变 ★
- click 单击 ★
- dblclick 双击
- keydown 键盘按下
- keyup 键盘弹起
- keypress 键盘按下并弹起
- mousedown 鼠标按下
- mouseup 鼠标弹起
- mousemove 鼠标移入
- mouseout 鼠标移出
- mouseover 鼠标悬停
- 事件和事件源的绑定 ★
- jq对象.事件名称(function(){});
- validate插件
"插件:指的就是别人已经写好的功能代码,直接引入使用即可.
"
- 作用:对表单进行校验
- 下载:
"下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip"
- 使用方式:
- 1.导入jquery.js
"validate是基于jquery写的,所以要先导入jquery的js文件"
- 2.再导入validate.js
"想要使用别人的插件就必须的导入人家已经写好的js文件(插件)"
- 3.在页面加载成功后,要确定对页面上的哪个表单进行校验
" $(function(){
表单对象.validate();
});"
- 4.validate使用格式:
" 表单对象.validate({
rules:{}, //校验规则
messages:{} //提示信息
});"
- 5.常见的校验规则
- 校验器名称 描述 值
- required: 必须填写 true|false
- number: 只能输入数字 true|false
- min: 最小值 数字
- max: 最大值 数字
- range: 取值范围 [min,max]
- minlength: 最小长度 数字
- maxlength: 最大长度 数字
- rangelength: 长度范围 [minlength,maxlength]
- equalTo: 和谁相等 通过jQuery选择器选中指定元素对象
- email: 校验邮箱 "email"
- 6.rules校验器语法:
- 方式1:单一校验
"name属性的值:"校验器""
- 方式2:多个校验
" name属性的值:{
校验器1:值1,
校验器2:值2
}"
- 7.messages自定义提示信息语法:
- 方式1:
"name属性的值:"提示信息""
- 方式2:
" name属性的值:{
校验器1:"提示信息1",
校验器2:"提示信息2"
}"
- 自定义校验器
- 格式:
- $.validator.addMethod(name,function(value,element,params){},"message");
- 参数说明:
- name:校验器的名称,唯一
- function:校验规则
- value:用户输入的值
- element:要校验的dom对象
- params:校验器的值
- message:当不满足校验规则时的提示信息
- 扩展:
- 筛选-查找;
- children(["选择器"]): 所有孩子
- parent(): 父母
- find("选择器"): 查找后代
- next(): 下个兄弟 +
- nextAll(): 所有的弟弟 ~
- prev(): 小哥哥
- prevAll(): 哥哥们
- siblings(): 兄弟们
- 筛选-过滤
- is("选择器"):判断是否满足 返回Boolean
查找案例:
可见性过滤选择器.
id为one,class为one的div
id为two,class为one,title为test的div.
正在执行动画的span元素.
过滤案例:
可见性过滤选择器.
id为one,class为one的div
id为two,class为one,title为test的div.
正在执行动画的span元素.
用户分组案例:
省市联动案例:
左右选中案例:
|
|
|
|
表单效验案例: