miracle just wanna be better

jQuery&ajax

2019-08-05
miracle
JavaScript

jQuery

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选择器的分类

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器

基本选择器

  1. #id id选择器 特点:最快,尽量使用id选择器,最好别重复
  2. .class 类选择器 特点:根据class属性定位元素,非常常用,很多的样式框架都用此样式
  3. element 标记选择器,html选择器,元素选择器 特点:改变标记的默认样式
  4. selector1,selector2,…selectorN 合并选择器 特点: 所有选择器的合集
  5. 所有页面元素,很少使用 特点:页面中的所有元素都适用(慎用)

层次选择器

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>");
  1. 插入节点的若干方法
    • append() 作为最后一个子节点添加进来
    • prepend() 作为第一个子节点添加进来
    • after() 作为下一个兄弟节点添加进来
    • before() 作为上一个兄弟节点添加进来
  2. 删除节点
    • remove() 移除
    • remove(selector) 按照选择器定位后删除
    • empty() 清空节点
  3. 复制节点
    • clone() 克隆
    • clone(true) 复制节点也具有行为(将处理一并复制)
  4. 样式操作:
    • attr(“属性名”,”属性值”) 获取或设置属性
    • addClass(“类样式名”) 追加样式
    • removeClass(“类样式名”) 移除样式
    • toggleClass(“类样式名”) 切换样式
    • hasClass(“类样式名”) 是否有某个样式
    • css(“样式名”) 获取样式的值
    • css(“样式名”,”样式值”) 设置多个样式
  5. 遍历节点:
    • 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文件中
    这个配置指定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时发送同步请求

上一篇 JavaScript

下一篇 maven构建

Comments

Content