jquery:是一个优秀javascript框架,一个轻量级的js库
兼容css3,及各种浏览器
使用户更方便的处理html,event,实现动画效果
并且方便网站提供ajax交互
使用户的html页面保持html和代码分离
注意:jquery2.x开始不再支持ie6,7,8
jquery的核心理念:write less,do more,写的少,做的多
官方网站:http://jquery.com
jquery的编程步骤:
1.引入jquery的js文件
2.使用jquery的选择器,定位要操作的节点
3.调用jquery的方法进行业务操作
什么是jquery对象:
jquery为了解决浏览器的兼容问题而提供的一种统一
封装后的对象描述
query提供的方法都是针对jquery对象特有的,而大部分
方法的返回类型也是jquery对象,所以方法可以连续调用(方法链)
用法:
jquery对象.方法().方法().方法()....
html中 标签, 节点 ,对象 元素
css 中 样式: 属性和值 id选择器,class选择器,元素选择器,派生选择器,伪类选择器
js 中 javascript对象 内置对象,外置对象,自定义对象 有属性,有方法体的方法
json 中 java中json对象,java中的json字符串 相互转换
javascript中json对象,javascript的json字符串 相互转换
jquery中 jquery的对象,有属性,有方法,操作元素节点
jquery对象有自己的属性和方法
jquery对象与dom对象(原生js)之间的转换
1.dom对象-->jquery对象
实现: $(dom对象)
2.jquery对象-->dom对象
实现: $obj.get(0) 或者 $obj.get()[0];
jquery选择器:
jquery选择器类似于css选择器(定位元素,添加样式)
使用jquery选择器能够将内容与行为分开
jquery选择器的分类
-基本选择器
-层次选择器
-过滤选择器
-表单选择器
一定要学会查jquery的api文档
基本选择器
#id id选择器
特点:最快,尽量使用id选择器,最好别重复
.class 类选择器
特点:根据class属性定位元素,非常常用,很多的样式框架都用此样式
element 标记选择器,html选择器,元素选择器
特点:改变标记的默认样式
selector1,selector2,...selectorN 合并选择器
特点: 所有选择器的合集
* 所有页面元素,很少使用
特点:页面中的所有元素都适用(慎用)
层次选择器
select1空格select2
根据select1找到节点后,再去select1的子节点中寻找
符合select2的节点,在给定的祖先元素下匹配所有后代元素
特点: 很好用,重点掌握
select1>select2 在给定的父元素下匹配所有的子元素
select1+select2 +符号表示下一个兄弟节点
select1~select2 ~符号表示下面所有的兄弟
过滤选择器:过滤选择器以":"或"[]"开始
1.基本能过滤选择器
:first 第一个元素
:last 最后一个元素
:not(selector) 把selector排除在外
:even 挑选偶数行
:odd 挑选奇数行
:eq(index) 下标等于index的元素
:gt(index) 下标大于index的元素
:lt(index) 小表小于index的元素
2.内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或文本元素
:has(selector) 匹配含有选择器所匹配的元素
:parent 匹配含有子元素或文本的元素
3.可见性过滤选择器
:hidden 匹配所有不可见元素,或type为hidden的元素
:visible 匹配所有可见元素
4.属性过滤选择器
[attribute] 匹配具有attribute属性的元素
[attribute=value] 匹配属性等于value的元素
[attribute!=value]匹配属性不等value的元素
5.子元素过滤选择器
:nth-child(index/even/odd) 将为每一个父元素匹配子元素,
index是从1开始的整数,表示对应的子元素
:eq(index) 匹配一个给定索引的元素,index从0开始的整数
6.表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden
jquery操作dom 增删改
创建dom节点
//js原生写法
var div_ele=document.createElement("div");
var txt_node=document.createTextNode("hello");
div_ele.appendChild(txt_node);
document.body.appendChild(div_ele);
//jquery写法:
语法:$(html)
如果创建一个div,并添加到body的最后一个节点
var $obj=$("<div>hello</div>");
$("body").append($obj);
等价于:
$("body").append("<div>hello</div>");
插入节点的若干方法
append() 作为最后一个子节点添加进来
prepend() 作为第一个子节点添加进来
after() 作为下一个兄弟节点添加进来
before() 作为上一个兄弟节点添加进来
删除节点
remove() 移除
remove(selector) 按照选择器定位后删除
empty() 清空节点
复制节点
clone() 克隆
clone(true) 复制节点也具有行为(将处理一并复制)
样式操作:
attr("属性名","属性值") 获取或设置属性
addClass("类样式名") 追加样式
removeClass("类样式名") 移除样式
toggleClass("类样式名") 切换样式
hasClass("类样式名") 是否有某个样式
css("样式名") 获取样式的值
css("样式名","样式值") 设置多个样式
遍历节点:
children()/children(selector) 只考虑直接子节点
next()/next(selector) 下一个兄弟节点
prev()/prev(selector) 上一个兄弟节点
siblings()/siblings(selector) 其他兄弟
find(selector) 查找满足选择器的所有后代
parent() 父节点
jquery的事件处理
使用jquery实现事件绑定:
语法:
$obj.bind("事件类型",事件处理函数);
比如:
$obj.bind("click",function(e){});
简写方式:
$obj.click(function(e){});
获取事件对象event
$obj.click(function(e){});
方法的参数中的e就是事件对象,但已经经过jquery对底层
的事件进行了封装
注意,封装后jquery事件对象e,就已经可以兼容各个浏览器
e.target 事件触发的那个dom对象(在哪个对象上触发了事件)
e.pageX e.pageY 获取鼠标触发事件时的坐标
事件冒泡:
在子节点产生的事件会依次向上抛给父节点
在原生js中终止事件冒泡,需要知道浏览器的差异
在jquery中不需要了解浏览器差异,只需要e.stopPropagation()
终止事件传播
合成事件:
hover(mouseenter,mouseleave);模拟鼠标悬停事件
toggle() 在多个事件响应中切换
模拟事件操作:
语法:
$obj.trigger(事件类型);
比如:
$obj.trigger("focus");
简写形式:
$obj.focus();
jquery动画:
显示,隐藏的动画效果
show()/hide()
通过同时改变元素的宽度和高度来实现显示或隐藏
语法:
$obj.show(执行时间,回调函数);
执行时间:slow,normal,fast ,毫秒数
回调函数:动画执行完毕后要执行的函数
同理:$obj.hide();
上下滑动式的动画实现
slideDown()/slideUp()
通过改变高度来实现显示和隐藏的效果
用法同show方法
淡入,淡出式动画:
fadeIn()/fadeOut()
通过改变不透明度opacity样式实现显示和隐藏
用法同show方法
自定义动画:
animate()
语法:
animate(js对象,执行时间,回调函数);
说明:
js对象:用{}描述动画执行之后元素的样式
执行时间:毫秒数
回调函数:动画执行结束后要执行的函数
比如:
$("div").click(function(){
$(this).animate({left:"500px"},4000);
$(this).animate({top:"300px"},2000).fadeOut("slow");
});
jquery的类数组(重要)
什么是类数组:jquery封装的多个对象
类:指的是类似
具备自己特有的操作方法
类数组的操作:
length属性
each(fn)遍历数组,fn用来处理dom对象,
在fn中this表示正被遍历的那个dom对象,
fn函数可以添加一个参数 i 用于表示正在遍历
的dom对象的下标(从0开始)
eq(index) 将下标等于index的dom对象取出来
get() 返回一个dom对象组成的数组
ajax:
什么是ajax:(Asynchronous javascript and xml)
异步 JavaScript 和 xml
ajax是一种用来改善用户体验的技术,其实质上,使用
XMLHttpRequest对象异步的向服务器发送请求,
服务器返回部分数据,而不是返回完整页面,以页面
无刷新的效果更新页面中局部内容
一.原生ajax的用法
步骤如下:
1.html页面或jsp页面中触发某个事件调用js方法
2.编写js方法:
a.创建XMLHttpRequest对象
1)ie浏览器
2)非ie浏览器
b.调用open方法
参数1:提交的方式
参数2:提交到服务器的url
参数3:true异步,false同步
c.给XMLHttpRequest对象注册onreadystatechange事件
判断readyState的值是4,和status值是200,然后获取
服务端传递回来了xml或json或文本,然后dom编程更改
html页面或jsp页面的局部内容
d.如果post提交,还要添加消息头
xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
e.调用send方法发送请求
a.如何获取,创建ajax对象(XMLHttpRequest对象)
var xmlHttpRequest;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
//非ie浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{
//ie浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
}
等价于:
function createXMLHttpRequest(){
if("ActiveXObject" in window || window.ActiveXObject){
//ie浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
//非ie浏览器
xmlHttpRequest=new XMLHttpRequest();
}
}
xmlHttpRequest对象的属性和方法:
abort() 取消请求 xmlHttpRequest.abort();
getAllResponseHeaders();获取响应的所有的http头
getResponseHeader();获取指定的http头
open(method,url,异步/同步) 创建请求
send() 发送请求
setRequestHeader() 设置请求http头
onreadystatechange 发生任何状态变化时的事件控制对象
readyState: 请求的状态
0: 尚未初始化
1: 正在发送请求
2: 请求完成
3: 请求成功 ,正在接受数据
4: 接收数据成功
status:服务器返回的http请求响应回来的状态码
200:成功
202:请求被界都,但处理尚未完成
400:错误的请求
404:资源未找到
405:service方法调用错误
500:服务端java代码异常
responseText 服务器返回的文本
responseXML 服务器返回的的xml,可以当做dom处理
b.调用open方法
1.open请求,请求的方式是get
xmlHttpRequest.open("get","xxxServlet",true);
true:异步
false:同步
2.open请求,请求的方式是post
xmlHttpRequest.open("post","xxxServlet",true);
xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
注意:
setRequestHeader的作用:因为http协议要求发送post请求时,
必须有content-type消息头,但是默认情况ajax对象不会添加
该消息头,所以需要调用此方法添加消息头
发送请求:
get方式: xmlHttpRequest.send(null);
post方式: xmlHttpRequest.send(name=value&name1=value1...);
注意:post方式传数据到服务器用send方式事项
get方式传送数据到服务的用法:
xmlHttpRequest.open("get","xxxServlet?name=value&name1=value1",true);
用ajax对象跟服务器传递数据时,如果参数中带有中文,可能产生乱码
永远记住:
只要是post提交,request.setCharacterEncoding("UTF-8");
只要是get提交,
方式一:
汉字=new String(乱码.getBytes("ISO8859-1"),"UTF-8");
适合tomcat7以及以前
方式二: 不建议使用
步骤一:在tomcat主目录中conf/server.xml文件中
<connector URIEncoding="utf-8" >
这个配置指定tomcat按照utf-8编码
步骤二:使用encodeURI方法对请求中的汉字做utf-8编码
此方法只针对ie浏览器使用,其他浏览器不用此
方法,
ie:
var uri="xxxServlet?name=张三";
xmlHttpRequest.open("get",encodeURI(uri),true);
二,jquery的ajax用法
load()方法:将服务器返回的数据字节添加到符合的节点之上.
语法:
$obj.load(请求的地址,请求的参数);
请求的参数:
方式一:
"username=tom&age=22"
方式二:
{"username":"tom","age":22}
有请求参数时,load方法发送post请求,否则发送get请求
get()方法:发送get请求
语法:
$.get(请求的地址,请求的参数,回调函数,服务器反回的数据类型);
说明:
回调函数添加的参数是服务器返回的数据
服务器返回的数据类型:
html:html文本
text:文本
JSON:josn数据格式对象
xml:xml文档
script:javascript脚本
post()方法:发送post请求
语法:
$.post(请求的地址,请求的参数,回调函数,服务器反回的数据类型);
说明:
回调函数添加的参数是服务器返回的数据
服务器返回的数据类型:
html:html文本
text:文本
JSON:josn数据格式对象
xml:xml文档
script:javascript脚本
ajax方法:异步请求服务器
语法:
$.ajax({});
说明:{}内可以设置选项参数
- url:请求的地址
- type:请求的方式(get,pot,put,delete)
- data:请求的参数
- dataType:服务器返回的数据类型
- success:服务器处理正常对应的回调函数
- error:服务器出错对应的回调函数
- async: true(缺省),当值为false时发送同步请求
来源：https://blog.csdn.net/qq_44374349/article/details/98882178