jQuery与AJAX的学习总结

一、 jQuery

1.了解jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.下载jQuery

在jQuery官网下载我们需要的jQurey框架，http://jquery.com/download/

 

3.导入jQuery到的项目

在项目中的WebContent中建一个文件夹（js）,把下载好的jQurey框架放入此文件夹

 

　　然后在我们的jsp页面导入jQuery

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

然后我们就可以在jsp页面写jQuery代码了

4.jQuery的一些常用方法

$();——工厂函数（jQuery的核心之一，用于创建jQuery对象等）

$(function(){......});==$(document).ready(function(){...});——在页面加载完之后执行括号中的代码

选择器_#id——通过id获取jQuery对象，例如$("#a01");

选择器_.class——通过class获取jQuery对象，例如$(".b01");

选择器_选择多个元素——获取多个jQuery对象，例如$("#a01,#a02");

选择器_标签名——通过标签名获取jQuery对象，例如$("div");通常为一个集合，保存的对象为DOM对象

常见的jQuery函数_text()——获取或改变对象的文本，获取$("#id").text(),改变$("#id").text("xxxxx")

常见的jQuery函数_html()——获取或改变对象的html代码,同上

常见的jQuery函数_val()——获取或改变对象的value值，同上

常见的jQuery函数_css()——获取或改变对象的css属性，同上

常见的jQuery函数_attr()——(attribute)获取或改变对象的属性,例如获取name $("#a01").attr("name");  改变name$("#a01").attr("name","xxxx");

5.jQuery中的一些常用事件

click——点击

dblclick——双击

mouseover——鼠标悬浮

mouseout——鼠标移开

blur——失去焦点

focus——得到焦点

ready——加载完成

scroll——窗口滚动

6.包装集

1.包装集_length——长度
2.包装集_index(obj)——获取对象在数组中是第几位（从0开始） 
3.包装集_get(index)或者[index]__会由jquery对象变成DOM对象  ——arrayList.get(n) 或者arrayList[n]（n为你想获取的对象在数组的位置）
5.包装集_clone() / appendTo——例如 $("a").clone().appendTo(document.body);
6.包装集_not()[去掉]
7.包装集_filter()[仅保留]
8.包装集_slice(2,4)[取中间] 此例为第3，第4
9.包装集_each(遍历)  例如 $("div").each(function(){alert($(this).text());})

7.层次选择器

层次选择器_$(a b)   [后代元素，不管层次]
层次选择器_$(a>b)  [子元素]
层次选择器_$(a+b)   [紧邻同辈，注意被看到a+b就认为返回内容是包含a和b2个，返回的是b]

层次选择器_$(a~b)   [相邻同辈，同辈就行，不需要紧邻]

二 、AJAX

1.了解ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.ajax应用与json

$.ajax();——直接调用jQuery的ajax方法

 

JSON——JSON 键/值对 例如 {"firstName": "John"}

 

 

$.ajax({　　　　（ajax方法里面放的JSON）
　　url:'B',     （目标地址）

　　type:'GET',　　（发送请求的类型  POST  or  GET）

　　data:{userName:name},　　（发送数据， 发送data主要有三种方式1.json数组(推荐1)，2.url拼接，3，表单的序列化serialize(强烈推荐)）

 

　　dataType:'text',　　（response 返回数据的类型）

　　success:function(result){　　（成功后执行的回调函数）

　　alert(result);
　　},

　　error:function(XMLHttpRequest){　　（发生错误时执行的回调函数）

　　　　if(XMLHttpRequest.status==404){
　　　　　　alert("找不到服务器[404]");
　　　　}else if(XMLHttpRequest.status==500){
　　　　　　alert("服务器忙，请稍后再试[500]");
　　　　}else{
　　　　　　alert("服务器错误"+'['+XMLHttpRequest.status+']');
　　　　}

　　}

 

　　timeout:3000　　（超时的标准）

});

 

转载于:https://www.cnblogs.com/wanxin88/p/7234380.html