0.1概述
jquery是一个快速,小乔,功能丰富的javascript库,它通过易于使用的API在大量浏览器运行,是的HTML文档遍历和操作,事件处理,动画和Ajax变得更加简单。
0.2使用
1.引入jquery.js文件
<script type="text/javascript" src="jquery文件路径"></script>
2.入口函数
$(document).ready(function(){ //read:jquery的函数,当页面的dom对象加载成功后会执行ready函数里的内容
//js代码
})
简写:
$(function(){
//js代码
})
3.dom对象和jquery对象
dom对象:使用javascript的语法创建的对象叫做dom对象,也就是js对象。
var obj=document.getElementById("text1"); //obj就是dom对象|js对象
jquery对象:jquery语法表示的对象叫做jquery对象,注意:jquery表示的对象都是数组。
var jobj=$("#text1"); //jobj就是jquery对象,是一个数组,现在数组中就一个值
dom对象转jquery对象:
$(dom对象)
jquery对象转为dom对象:从数组中获取的第一个对象,第一个对象就是dom对象,使用[0]或者get[0]。
0.3选择器
选择器:就是定位条件,通知jquery函数定位满足条件的DOM对象。
基本选择器:根据ID,class属性,标签类型名定位HTML元素,转为jquery对象。
id选择器:$("#id")
class选择器:$(".class名称")
标签选择器:$("标签名")
所有选择器:$("*")
组合选择器:$("id选择器,class选择器,标签选择器")
表单选择器:$(":type属性值")
0.4过滤器
过滤器就是过滤条件,对已经定位的数字中的DOM对象进行过滤筛选,过滤条件不能独立出现jquery函数,只能出现在选择器后方。
1.基本过滤器:
first:选择第一个first,保留数组中第一个DOM对象
$("选择器:first")
last:选择最后一个last,保留数组中最后一个DOM对象
$("选择器:last")
eq:选择数组中指定对象
$("选择器:eq(数组索引)")
lt:选择数组中小于指定索引的所有DOM对象
$("选择器:lt(数组索引)")
gt:选择数组中大于指定索引的所有DOM对象
$("选择器:gt(数组索引)")
2.表单属性过滤器:根据表单中dom对象的状态情况,定位dom对象
选择可用的文本框
$.(":text:enabled")
选择不可用的文本框
$(":text:disabled")
复选框选中的元素
$(":checkbox:checked")
选择指定下拉列表的被选中元素
$("选择器>option:selected")
0.5jquery绑定事件
方式一:
$(选择器).事件名称(事件的处理函数)
方式二:on()绑定事件
$(选择器).on(event,function)
event:事件一个或者多个,多个之间空格分开。
function:可选。事件方式时运行的函数
0.6函数
val():操作数组中DOM对象的value属性。无参数时为获取第一个DOM对象的value属性值;有参数时对所有DOM对象的value属性赋值
text():操作数组中所有DOM对象的文字显示内容。无参数时为所有DOM对象的文字显示内容并拼接为一个字符串;有参数时对所有DOM对象的文字显示内容赋值
attr():对val,text之外的其他属性操作
attr("属性名"):获取DOM数组第一个对象的属性值
attr("属性名","值"):对数组中所有DOM对象的属性设为新值
remove():将数组中所有DOM对象及其子对象一并删除
empty():将数组中所有DOM对象的子对象删除
appent():为数组中所有DOM对象添加子对象
html():无参数为获取DOM数组第一个DOM对象元素内容;有参数时,设置DOM数组中所有元素的内容
each():对数组,json和dom数组等的遍历,对每一个元素调用一次函数
语法1:
$.each(要遍历的对象,function(index,element){处理程序})
语法2:
jquery对象.each(dunction(index,element){处理程序})
index:数组的下标
element:数组的对象
0.7ajax
全局刷新:整个浏览器被新的数据覆盖,在网络中传输大量的数据。浏览器需要加载,渲染页面。
局部刷新:在浏览器的内部,发起请求,获取数据,改变页面中的部分内容。其余页面无需加载和渲染,网络中数据传输量少,给用户感受好。
ajax是一种无需重新加载整个网页的情况下,能够局部刷新部分页面内容的方法。
同步:提交请求->等待服务器处理->处理完毕返回。这个期间客户端浏览器不能干任何事。
异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕返回。
1.java中json的使用
java中的json工具库:
fastjson:速度快,不是最符合json处理规范
jackson:性能好,规范好
json-lib:性能差,依赖多
2.jquery中json的使用
(1)$.ajax():jquery中实现ajax的核心函数
(2)$.post():使用post方式做ajax请求
$.post(url,data,function(resp),dataType)
url:必需
data:可选,请求发送到服务器的数据
function(resp):可选,请求成功时运行的函数;resp自定义形参名,为请求的结果数据
dataaType:可选,期望从服务器响应的数据类型
(3)$.get():使用get方式发送ajax请求
$.get(url,data,function(resp),dataType)
$.post()和$.get()在内部都是调用$.ajax()
0.8正则表达式
1.yyyy-MM-dd hh:mm:ss
/(\d{4}-\d{2}-\d{2}\d{2}:\d{2}:\d{2})|(\d{2}-\d{2}\d{2}:\d{2}:\d{2})|(\d{2}:\d{2}:\d{2})/
2.yyyy-MM-dd
/^[1-2]{1}([0-9]{3})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/
或
/^[0-9]{4}-[0-1]?[0-9]{1}-[0-3]?[0-9]{1}$/
3.手机号
/^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/
4.身份证
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/