jQuery 框架
1).jQuery特点、使用方法
概念：封装javascript代码一个框架 标语： write less do more
特点：①简化代码获得标签对象的代码
②屏蔽浏览器差异
③jquery插件 拿来即用，自带UI效果
④支持批量操作
使用步骤：
①引用jquery.js文件：实际开发中，使用jquery-xxx.min.js，功能一样、文件小、加载速度快
②在网页中使用script标签引入js文件
③使用:
$("选择器") / 作用：根据参数从网页中选择对应标签，返回
基本选择器：
$("#id值")
$(".class的值")
$("标签名")
常用方法：
jquery的dom对象 .css("样式name","样式的值")
jquery的dom对象 .text(); //获得标签体的内容
jquery的dom对象 .text("值"); //设置标签体的内容
jquery的dom对象 .html(); //获得标签体内内容，包括标签
例如：jdom.css(“name”, “value”).css(“name”, “value”); //可以多次调用，每次调用又返回一个jQuery的dom
JavaScript的dom对象转化为jQuery对象：
var jsdom = ...;
var jqdom = $(jsdom)
2).jQuery的选择器、DOM相关方法
选择器：
（1）基本选择器:【重点】
ID选择器: $('#id值')
标签选择器: $('标签名')
类选择器: $('.class值')
（2）层级选择器[组合选择器]：
$(selA SelB) 后代选择器:选择selA标签内部所有后代中的selB标签
$(selA>SelB) 子代选择器:选择selA的直接子代元素中的SelB
$(selA+selB) 紧邻弟弟选择器(1个)
$(sel~sel后续弟弟) 后续所有弟弟选择器
（3）过滤选择器
①简单过滤选择器
语法: $("选择器:过滤xxx")
:first $(sel:first) 获得第一个元素
:last 获得最后一个元素
:eq(i) 获得下标i的元素
:gt(i) 下标大于i的元素
:lt(i) 下标小于i的元素
:even 下标为偶数元素
:odd 下标为奇数元素
:not(selector)【重点】 获得所有元素,不包含select元素
②内容过滤器
:empty 标签体内部为空的标签
:parent 标签体不为为空的元素,如果标签体内部是空白
:contains(text)【重点】 包含某个text文本元素
:has(内部后代标签selector) 过滤保留内部包含selector对应标签的元素
③可见性过滤选择器【重点】 针对--display:none
:visible 获得显示的标签
:hidden 获得隐藏标签
④属性过滤选择器：【重要】
选择器[prop] 含有prop属性的标签对象(明确写了prop属性)
选择器[prop=value] 含有prop属性并且prop的属性值为value
*表单特有的过滤:
:checked 过滤保留被选中的元素(复选框,单选扭)
:selected 被选中的元素
DOM相关方法：
访问属性方法：包括属性、标签体、样式
①.text() 获得标签体的普通文本
.text("") 修改签的普通文本
②.css("样式名字","样式的值") 设置标签的样式.
.css("样式名字") 获得样式的值
③.html() 获得标签体的内容(包含了标签)
.html("内容") 修改标签体内容，可包含标签
④.val() 获得input标签的value属性值 [相当js dom.value]
.val("文字") 修改input标签的value值。
⑤.prop("属性名","属性值") 设置标签的属性名对应的值
.prop("属性名") 获得标签的属性值
⑥select标签获得被选中的选项的下标
$("下拉列表").prop("selectedIndex");
获得所有选项：
$("select").prop("options");
3).jQuery基于编程的事件绑定、及DOM操作方法、函数操作
（1）事件绑定
核心语法：jQuery的dom对象.on("事件名称",事件函数);
实例代码:
$("xx").on("click",function(event){ // event是事件对象，是一次单机事件
// event.target 事件的源标签 javascript类型的dom对象
// this 事件源对象 javascript类型的dom对象
$(this).text(); //将JavaScript对象转为jQuery的dom对象，在调用其方法
})
动态绑定事件：
$("xx").live("click",function(){
//动态为后添加的元素，只要符合 选择器的条件，动态增加事件绑定
});
事件名称：
click、dblclick、blur、change、focus、load、mouseover、mousemove、submit
网页加载绑定事件：
$(function(){
//网页加载完毕之后，调用
});
（2）jQueryDOM操作方法
① 创建标签：var jqDom = $("<td colspan='2'></td>");
② 添加标签：$("#tr").append($("<td>武松</td>"));
③ 删除本标签：dom.remove();
④ 清空内部：
dom.empty();
dom.html("");
⑤ 找到弟弟标签（同级下一个）
dom.next();
⑥ 找到哥哥标签（同级上一个）
dom.prev();
⑦ 所有儿子标签（所有下级）
dom.children();
⑧ 找到直接父标签标签（上一级）
dom.parent();
（3）补充函数
①jquerydom对象多个
jqdom.size();//jquery对象中元素个数
②获得i下标元素
jqdom.get(i); //获得i下标的dom对象(javascript类型的dom对象)
jqdom.eq(i); //获得i下标的dom对象(jQuery类型的dom对象)
③专门遍历jqueyrdom的方法
jqDom数组.each(function(i,e){
//每次遍历运行
//得到当前对象 e(javascript类型的dom对象)
// $(e) jquery类型的
$(e)
//得到当前遍历的下标 i
});
④数据绑定函数
jqDom.data("key",value);//将value的以key为名字，绑定在jqDOmd的标签上
jqDom.data("key");//获得绑定在jqDOm标签上名字为key的值
⑤find("选择器")[jQuery自定义插件][了解]
语法： jqDOM.find("选择器");
从jqDOm标签内部(后代标签中)查找，符合参数选择器的标签返回
4).jQuery动画效果
效果方法
①显示消失
show(); 将标签从隐藏状态下逐步变成显示状态
show(毫秒); 显示过程所花的时间
hide(); 将标签消失。
hide(毫秒); 消失过程所消耗的时间
②淡入淡出
fadeIn(毫秒) 淡入（显示）
fadeOut(毫秒)； 淡出（消失）
③卷动效果:(卷帘门效果)
slideDown(毫秒) 卷下显示
slideUp(毫秒) 卷上消失
④自定义效果:
标签dom.animate(样式对象,毫秒值); //含义： 使用一定的事件变化成指定的样式效果
样式对象:
{"font-size":"100px","margin-left":"100px"}
5).jQuery插件使用(消息框、图片放大镜、日期输入框、表单验证)
（1）消息框：toastr
① 引入js文件
jquery的js文件
toastr js文件
② 引入相关的css文件
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/message_zh_CN.js"></script>
语法：toastr.info("消息文字");
toastr方法：
info("消息框文字","标题") 普通消息(主题)
success("绿色文字") 成功消息
warning("")
error("");
（2）放大镜
① 导入资源：jquery文件、放大镜的js文件、css文件
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.jqzoom-core.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/jquery.jqzoom.css" />
② 使用放大
a. 准备一个img图(小)：<img src="small.jpg">
b. img外部套一个a标签，将大图的路径放在a标签的href
<a href="大图路径"> <img src="small.jpg"> </a>
c. 使用放大镜插件，添加放大效果和事件绑定。
$("a标签").jqzoom();
（3）日期插件
① 引入资源
注意： 导入项目的资源全部导入，文件相对路径最好不要改变
引入：<script src="${pageContext.request.contextPath }/datepicker/WdatePicker.js"></script>
② 给input输入框添加日历图标效果.
<input class="Wdate">
③ 提供好了显示日历的事件函数 WdatePicker
<input class="Wdate" onclick="WdatePicker()">
（4）表单验证插件
①导入资源文件、引入页面
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script src="${pageContext.request.contextPath }/js/message_zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/datepicker/WdatePicker.js"></script>
②验证:
$(function() {
$("#fm").validate({ //获取form表单、调用validate({ })
"rules" : { //给对应的表单项加验证规则
"user.username" : {"required" : true, "minlength" : 2}, //根据name值获取标签、后面为验证对象
"user.password" : {"required" : true, rangelength : [2, 10]}, //不为空、长度在2~10
"user.realName" : {"required" : true, "minlength" : 2},
"user.mobile" : {"required" : true, "minlength" : 11,"maxlength" : 11}
},
"messages" : {
"user.username" : {"required" : "不能为空", "minlength" : "长度不能小于2"}//修改提醒文字
}
});
});
注意：
<style>
.error{ color: red;} //将所有的文本框提醒文字为红色
</style>