jQuery
js库是一个封装好的特定的集合(方法和函数)。简单理解:就是一个js文件,里面对我们原生js代码进行了封装,存放到里面,这样我们就可以快速高效的使用这些封装好的功能了。比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
用jq要先引入jq。
基本使用
入口函数
$(function(){});
是页面DOM加载完成的入口。
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jq帮我们完成了封装。
- 相当于原生js中的DOMContentLoaded。
- 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
对象
顶级对象:$是jQuery的别称,同时也是jQuery的顶级对象。
DOM对象和jQuery对象
用原生js获取来的对象就是DOM对象,jQuery方法获取的元素就是jQuery对象。jQuery对象的本质:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
DOM对象和jQuery对象之间是可以相互转换的,因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用就要进行转换。
- DOM—>jQuery:
$(DOM对象)
- 例如:
$('div')
- 例如:
- jQuery—>DOM:
$('div')[index]
:index是索引号$('div').get(index)
:index是索引号
常用的API
选择器
$("选择器")
:里面选择器直接写css选择器即可,但是要加双引号。
子代选择器:$("ul>li")
:使用>号,获取亲儿子层级的元素,ps:并不会获取孙子层级的元素。
后代选择器:$("ul li")
:使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等。
遍历内部的元素(伪数组形式存储)的过程就叫做隐式迭代。简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作。方便我们调用。
jQ筛选选择器:
$('li:first')
:获取第一个li元素。$('li:last')
:获取最后一个li元素。$("li:eq(index)")
:获取到的li元素中,选择索引号为index的元素,index从0开始。$("li:odd")
:获取到的li元素中,选择索引号为奇数的元素。$("li:even")
:获取到的li元素中,选择索引号为偶数的元素。
筛选方法:
parent()
:返回的是最近一级的父级元素。(亲爸爸children(selector)
:子代选择器 ul>lifind(selector)
:选里面所有的孩子,包括儿子和孙子,类似于后代选择器。siblings(selector)
:除了自身元素以外的亲兄弟。nextAll([expr])
:查找当前元素之后的兄弟元素。prevtAll([expr])
:查找当前元素之前的兄弟元素。hasClass(class)
:检查当前的元素是否含有某个特定的类,如果有就返回true。eq(index)
:选择第index个元素。(更推荐这个方法来选择
jQ得到当前元素的索引号:$(this).index()
样式操作
jQ可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
操作css方法:
- 参数只写属性名,则是返回属性值。
- 参数是
属性名,属性值
,属性必须加引号,值如果是数字可以不用跟单位和引号。 - 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不加引号。
$(this).css({width:200,height:200,background:"red"});
- 如果是复合属性则必须采取驼峰命名法,如果值不是数字则需要加引号。
设置类样式方法:
- 添加类:
$(this).addClass("className")
- 删除类:
$(this).removeClass("className")
- 切换类:
$(this).toggleClass("className")
原生js中className会覆盖元素原来里面的类名,jQ里面类操作只是对指定类进行操作,不影响原先的类名。
属性操作
element.prop("属性名")
:获取元素固有的属性值。
element.prop("属性名","属性值")
:修改元素的属性值。
元素的自定义属性,我们通过attr()
,修改后面加值就可以了。
数据缓存data()这个里面的数据是存放在元素的内存里面,可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。
文本属性值
html()
:获取元素的内容。html("内容")
:设置元素的内容。
text()
:获取元素的文本内容。
val()
:获取设置表单值。
parent()
:返回祖先元素,里面的参数是返回指定的祖先元素。
.toFixed(数字)
:保留几位小数。
元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素:
$("div").each(function(index,domEle){})
- each()遍历匹配的每一个元素,主要用dom处理
- 里面的回调函数有两个参数:index是每个元素的索引号,可以自己指定索引号名称;domEle是每个dom元素对象,不是jq对象。
$.each(object,function(index,element){})
- $.each()可用于遍历任何对象,主要用于数据处理,比如数组,对象。
- 里面的函数有两个参数:index是元素的索引号;element是遍历内容。
创建元素:
$("<li></li>")
:创建了一个li元素。- 添加元素:
- 内部添加:
element.append("内容")
把内容放入匹配元素内部最后面,类似原生的appendChild。element.prepend("内容")
是放在前面。 - 外部添加:
element.after("内容")
把内容放到目标元素的后面。element.before("内容")
是放在前面。 - 内部添加元素,生成之后是父子关系。外部添加元素,生成之后是兄弟关系。
- 内部添加:
- 删除元素:
element.remove()
:删除匹配的元素(本身)element.empty()
:删除匹配的元素集合中所有的子节点element.html("")
:清空匹配的元素内容
尺寸、位置操作
尺寸:
width()/height()
:只算width/heightinnerwidth()/innerheight()
:算width/height+paddingouterwidth()/outerheight()
:算width/height+padding+borderouterwidth(true)/outerheight(true)
:算width/height+padding+border+margin
位置:
offset()
:获取设置距离文档的位置(偏移),**跟父级没有关系。**可以设置偏移。position()
:获取距离带有定位父级位置(偏移)。如果没有带有定位的父级,则以文档为准。只能获取不能设置。
事件
绑定事件
单个事件注册:$(this).事件(function(){})
element.on(events,[selector],fn)
方法在匹配元素上绑定一个或多个事件的事件处理函数。
- events:一个或多个用空格分隔的事件类型。
- selector:元素的子元素选择器。
- fn:回调函数,即绑定在元素上的函数。
on()可以事件委派操作。事件委派操作就是把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$('ul').on('click','li',function(){
alert('hello');
})
//click是绑定在ul上的 但是点击li才会触发
on()可以给动态创建的元素绑定事件。
解绑事件
off()
:解除事件。
- 没有参数就是解除所有事件。
- 有参数就是解除该参数的事件。比如:click、mouseover。
$("ul").off("click","li")
:解除事件委托。
one()
:只能触发事件一次。
自动触发
三种方式:
- 元素.事件():会触发元素的默认行为。
- 元素.trigger(“事件”):会触发元素的默认行为。
- 元素.triggerHandler(“事件”):不会触发元素的默认行为。
Ajax
JSON
概述
JSON是一种轻量级的数据交换格式,轻量级体现在JSON的体积小,虽然一个小的体积可能表示的数据很多。在js中,json是以对象的形式存在的。
数据交换:各种语言之间交换数据。在现代的开发中,能够做数据交换的包括两个:JSON、XML,两个都是非常标准的数据交换格式。
- XML体积大,解析难度大。
- JSON体积小,解析更容易。
- XML的语法严谨,JSON的语法相对松散。
对象的创建和使用
JSON是一种无类型的对象,直接一个大括号包起来就是一个JSON对象。
JSON对象必须全部带上双引号。
//语法格式:
var jsonObj = {
"属性名": "属性值",
"属性名": "属性值",
"属性名": "属性值",
...
}
//ps:属性值可以是任意类型,也可以是JSON对象
使用的方法和js对象一样。
交换数据
Java和js两个语言怎么交换数据:Java的JDBC连接数据库查询数据,然后将数据拼接成JSON格式的字符串,将JSON格式的字符串传给js,然后在js当中把json格式的字符串转换成json对象,这样就可以从js对象中取数据了,这样就完成了数据的交换。
<script>
var fromJava = "{\"name\":\"zs\", \"age\":20}"; //这个不是json对象,是一个字符串
//将json格式的字符串转换成json对象
//eval函数可以将一个字符串当做一段js代码解释执行
window.eval("var stu = " + fromJava); //这个可以将json格式的字符串转换成json对象
//转换成json对象的目的是为了取数据(这样就完成了数据交换
/*上面的代码执行结束就等同于这里创建了一个json对象:
var stu = {
"name": "zs",
"age": "20"
}*/
console.log(stu.name + "," + stu.age);
</script>
解析json动态生成表格:
<body>
<script>
// 从Java过来一个json格式的字符串
var fromJava = "{\"total\" : 3, \"students\" : [{\"name\" : \"张三\", \"age\" : 20}, {\"name\" : \"李四\", \"age\" : 19}, {\"name\" : \"王强\", \"age\" : 25}]}";
onload = function(){
document.getElementById("btn").onclick = function(){
//解析上面json格式的字符串,将解析出来的数据放到tbody里
window.eval("var json = " + fromJava); //json对象
//设置总记录条数
document.getElementById("totalSpan").innerHTML = json.total;
//拼接html
var studentArray = json.students;
var html = "";
for(var i = 0; i < studentArray.length; i++){
var s = studentArray[i];
html += "<tr>";
html += "<td>" + (i + 1) + "</td>";
html += "<td>" + s.name + "</td>";
html += "<td>" + s.age + "</td>";
html += "<tr>";
}
//将上面拼接的html设置在tbody里面
document.getElementById("stuTbody").innerHTML = html;
}
}
</script>
<input type="button" value="查看学生信息列表" id="btn">
<hr>
<table border="1px" width="40%">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tbody id="stuTbody">
<!-- <tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>17</td>
</tr>
<tr>
<td>3</td>
<td>王强</td>
<td>25</td>
</tr> -->
</tbody>
</table>
总记录条数:<span id="totalSpan">0</span>条
</body>
正则表达式
通常使用正则表达式进行字符串格式匹配。正则表达式是有一堆特殊的符号组成的一个表达式,每一个特殊的符号都有特殊的表达含义。
在js中创建正则表达式:重点使用第一种
- 直接量语法:
var regExp = /正则表达式/标记
- 标记是可选项,可写可不写,有以下值可选:
- g:全局 global
- i:忽略大小写 ignorecase
- gi:全局扫描,并且忽略大小写
- 标记是可选项,可写可不写,有以下值可选:
- 使用内置类RegExp类:
var regExp = new RegExp("正则表达式", "标记")
表单验证
获取元素的三种方式:(很重要很常见
getElementById("id名")
:根据id获取一个元素。getElementsByName("name名")
:根据name属性获取多个元素。getElementsByTagName("标签名")
:根据标签获取多个元素。
表单验证(很重要 多写几遍)
<body>
<script>
/*
1.用户名不能为空
2.用户名在6-14位之间
3.用户名只能数字和字母组成,不能含有其他符号(正则表达式)
4.密码和确认密码一致
5.统一失去焦点验证
6.错误提示信息统一在span标签中提示,并且要求字体12号,红色
7.文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的value
8.最终表单中所有项均合法方可提交
*/
onload = function(){
//给id="username"的节点绑定blur事件
var usernameElt = document.getElementById("username");
var nameError = document.getElementById("nameError");
//失去焦点
usernameElt.onblur = function(){
//获取用户名
var username = usernameElt.value;
//去除前后空白
username = username.trim();
//用户名不能为空,不能为空串
if(username == ""){
nameError.innerHTML = "用户名不能为空";
}else{
//用户名不为空 检测长度是否合法
if(username.length < 6 || username.length > 14){
nameError.innerHTML = "用户名在6-14位之间";
}else{
//用户名不为空,长度也合法 再检测是否有特殊符号
var regExp = /^[a-zA-Z0-9]+$/
var ok = regExp.test(username);
if(ok){
//合法
nameError.innerHTML = "";
}else{
//不合法
nameError.innerHTML = "用户名只能由字母和数字组成";
}
}
}
}
//获得焦点:清空span信息
usernameElt.onfocus = function(){
nameError.innerHTML = "";
}
var passwordElt = document.getElementById("confirmpwd");
var pwdError = document.getElementById("pwdError");
//确让密码失去焦点就验证
passwordElt.onblur = function(){
//获取密码
var userpwd = document.getElementById("userpwd").value;
//获取确认密码
var confirmpwd = document.getElementById("confirmpwd").value;
//检测是否一致
if(userpwd != confirmpwd){
pwdError.innerHTML = "密码和确认密码不一致";
}else if(userpwd == "" && confirmpwd == ""){
pwdError.innerHTML = "密码不能为空";
}else{
pwdError.innerHTML = "";
}
}
//获得焦点:清空span里的信息
passwordElt.onfocus = function(){
pwdError.innerHTML = "";
}
document.getElementById("regbtn").onclick = function(){
//验证用户名 怎么验证用户名?让用户名文本框失去焦点
//重点:使用js代码怎么触发事件
usernameElt.focus(); //触发文本框获取焦点事件
usernameElt.blur(); //触发文本框失去焦点事件
//验证密码 怎么验证密码?让文本框失去焦点
passwordElt.focus(); //触发文本框获取焦点事件
passwordElt.blur(); //触发文本框失去焦点事件
//当所有span的内容都为空就表示表单合法
if(nameError.innerHTML == "" && pwdError.innerHTML == ""){
//提交
var formObj = document.getElementById("userForm");
//调用submit()来完成表单的提交
formObj.submit();
}
}
}
</script>
<form id="userForm" action="">
用户名<input type="text" name="username" id="username"><span id="nameError"></span>
<br>
密码<input type="password" name="userpwd" id="userpwd">
<br>
<!-- 确认密码不需要提交给服务器 name不要写 -->
确认密码<input type="password" id="confirmpwd"><span id="pwdError"></span>
<br>
<!-- 表单项目都合法才能提交 -->
<!-- button不能提交表单,但是js代码可以提交表单 -->
<input type="button" value="注册" id="regbtn">
</form>
</body>
全局刷新和局部刷新
全局刷新:使用form、href等发起的请求是全局刷新。(用户发起请求,视图改变了,跳转视图,使用新的数据添加到页面)缺点如下:
- 传递数据量比较大,占用网络的带宽。
- 浏览器需要重新的渲染整个页面。
- 用户体验不是那么好。
局部刷新:在当前页面中,发起请求,获取数据,更新当前页面的dom对象。对视图部分刷新。特点如下:
- 数据比较小,在网络中传输速度快。
- 更新页面内容,是部分更新页面,浏览器不会全部渲染视图。
- 在一个页面中,可以做多个局部刷新。
- 从浏览器获取的是数据,拿到更新视图。
异步请求对象
在局部刷新中,使用异步请求对象,在浏览器内部发起请求,获取数据。
异步对象(XMLHttpRequest)是在浏览器内部的一种js对象,各大浏览器都能支持异步对象的使用。使用js语法创建和使用这个对象:var xhr = new XMLHttpRequest()
,之后就可以使用xhr对象的属性或者函数,进行异步对象的操作。
使用异步对象实现局部刷新,异步对象主要负责发起请求,传递请求的参数,并从服务器接收数据。局部刷新需要使用以下技术:
- JavaScript:创建XMLHttpRequest对象,调用它的属性或者方法。
- dom:处理dom,更新select的数据。
- css:处理视图,更新,美化。
- servlet:服务器端技术。
- 数据格式:json(它之前是xml
把上面这些技术的综合使用称为Ajax。
Ajax
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法。它不是新的编程语言,是多种技术的综合使用,使用Ajax实现局部刷新。Ajax的核心是JavaScript和xml(json):使用JavaScript操作异步对象XMLHttpRequest 和服务器交换使用json数据格式。
异步对象的属性和方法
创建异步对象,使用js的语法:var xhr = new XMLHttpRequest();
方法:
open(请求方式,服务器端的访问地址,异步还是同步)
send()
:使用异步对象发送请求
属性:
readyState
:请求的状态(请求的过程- 0:表示创建异步对象时,new XMLHttpRequest();
- 1:表示初始异步对象的请求参数,执行open()方法。
- 2:使用send()方法发送请求。
- 3:使用异步对象从服务器接收了数据。
- 4:异步对象接收了数据,并在异步对象内部处理完成后。
status
:网络的状态,和Http的状态码对应。- 200:请求成功
- 404:服务器资源没有找到
- 500:服务器内部代码有错误
responseText
:表示服务器端返回的数据
使用步骤
1)使用js创建异步对象:var xhr = new XMLHttpRequest();
2)给异步对象绑定事件,事件名称是:onreadystatechange
-
在绑定事件中做什么,根据readyState值做请求的处理。
xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //从服务器获取了数据,更新当前页面的dom对象,完成请求的处理 var data = xhr.responseText; //更新dom对象 document.getElementById("#mydiv").innerHTML = data; } }
3)初始请求的参数,执行open()函数
4)发送请求,执行send()
常用的函数
$.ajax()
$.ajax()
是jq中Ajax请求的核心方法,所有的其他方法都是在内部使用此方法。语法:$.ajax({json格式的参数})
,json格式的参数:key是定义好了的,需要开发人员给key赋值,这些key是用来表示ajax请求必须的参数。例如:请求的url地址、是不是异步请求、请求的方式等等。$.ajax()有以下参数:
- url:服务器的地址,例如某个servlet的访问地址。
- type:表示请求的方式:get、post。默认是get,这个值不区分大小写。
- data:表示提交的请求参数,可以是string、数组、json类型的,推荐使用json格式。
- json格式例如:
data:{"name":"lisi","age":20}
。jq在发送请求时,会把json中的key作为请求的参数使用,key对应的值作为参数数据。
- json格式例如:
- dataType:数据格式,可以是html、text、xml、json等等,表示发起请求后,希望服务器端返回的数据格式。
- jq可以尝试使用对应格式处理返回的数据,比如指定了dataType:json表示希望服务器返回的是json格式数据,jq就会把json数据转换成json对象。
- 服务器代码可以得到dataType的内容。
- success:函数function。当服务器端返回了数据,jq处理完数据后,执行这个函数。等同于异步对象的
readyState == 4 && status = 200
的情况。- 例如:
success:function(resp){开发人员处理服务器返回的数据}
。resp是自定义形参,相当于resp = xhr.responseText
- 例如:
- error:函数function。当请求错误时,执行这个函数。
- contentType:表示请求的参数数据格式,这个内容可以不写。例如:application/json。
- async:是一个boolean,表示请求是同步(false)还是异步(true)的,默认是true。
函数get和post
$.get()
这个函数就是执行get请求方式的ajax,语法:$.get(url,请求参数,success函数,dataType)
$.post()
执行post请求的ajax,语法:$.post(url,请求参数,success函数,dataType)