js和jQuery复习加上ajax

最新推荐文章于 2025-12-28 17:42:14 发布

原创最新推荐文章于 2025-12-28 17:42:14 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #javascript

前端知识同时被 2 个专栏收录

4 篇文章

订阅专栏

java学习第二阶段

4 篇文章

订阅专栏

本文详细介绍了JavaScript的基础概念，如函数创建、DOM操作方法，包括getElementById、getElementsByTag等，并深入讲解了jQuery框架，涵盖了选择器、DOM操作、AJAX请求的实战应用。

1. js基础

1.1 函数的两种创建方式

var 函数名 = function(参数列表){函数体};
function 函数名(参数列表){函数体}
//整个页面加载完成时候执行
window.onload=function(){}

1.2 获取dom对象

document.
 1. getElementById(id名)通过元素的id获取指定对象
 2. getElementByTagName(标签名)根据传入的标签名来获取指定的元素，返回对象数组
 3. getElementsByClassName(class名)获取指定class对象
 4. getElementsByName(name名)获取指定name对象

1.3 常见操作

 1. innerHTML设置内置的html代码
 2. innerText设置内置的文本
 3. value获取该元素的值
 4. getAttribute(属性名)获取指定名
 5. setAttribute(属性名，属性值)设定属性名和属性值
 6. childNodes()获取所有子元素
 7. parentNode()获取当前元素的父元素
 8. nextElementSibling()获取当前元素的下一个兄弟元素
 9. previousElementsSibling()获取当前元素的上一个元素
 10. className()修改指向的class名

1.4 常见事件

 1. click鼠标点击事件
 2. mouseover鼠标进入事件mouseenter
 3. mouseout鼠标移出事件mouseleave
 4. blur元素失去焦点
 5. focus元素获得焦点
 6. mousemove鼠标移动时触发
 7. 原对象e e.clientX获得x坐标e.clientY获得y坐标
   
 8. e.stopPropagation()阻止时间冒泡
 9. change当值改变时触发

//事件注册的另一种方式
对象.addEventListener("click",function(){})

1.5 动态的元素添加和删除

//动态的元素添加和删除
document.createElement("tagName")创建一个新的元素对象
以下是调用父元素的方法

 1. appendChile(新元素)将新元素添加到父元素的最后
 2. insertBefore(新元素，老元素)添加到老元素的前面
 3. replaceChild(新元素，老元素)替换掉某个老元素
 4. removeChild()删除掉某个指定的子元素

1.6 window对象的常用方法

//window对象的常用方法
 1. prompt()方法用于显示可提示用户进行输入的对话框。有一个返回值
 2. alert()界面弹框
 3. confirm()弹出一个确认框，返回一个boolean类型结果
 4. window.setInterval(function(){ spanTime.innerHTML=formatDate(new
    Date()); },1000)定时器一秒执行一次
 5. clearInterval(定时器id)清楚指定的定时器
 6. setTimeout延迟执行某一段JS代码
 7. clearTimeout清除定时器

1.7 js创建对象的方式

**//js创建对象的方式**
var obj = new Object();
var obj = {成员名:成员值,成员名:成员值,...}

2. jQuery框架

**jQuery框架**
$(function(){})页面加载完执行

jQuery选择器$("选择器的名称")

css(设置对象的css样式)

2.1 过滤选择器

**过滤选择器$("基本选择器:过滤选择器")**
first 第一个
last 最后一个
odd 奇数
even 偶数
eq(数字) 选择指定第几个
$("li:first").css("background","green")
$("li:eq(0)").css("background","green")
$("li:last").css("background","green")
$("li:odd").css("background","green")
$("li:even").css("background","red")
选择方法
first()
last()
not() 除了...之外
eq(数字)

2.2 选择器

选择器

 1. children()方法：获取当前元素所有的子元素，默认已经排除了空的文本节点当某个方法返回的结果中存在多项的，这样的方法在使用时可以通过参数进行进一步的过滤
 2. find("选择器")：在当前元素的所有后代元素中查找符合条件的元素，如果不传参数表示不获取任何元素
 3. jquery对象所有的操作都是通过方法调用实现的，没有属性的访问
 4. parent()：选中当前元素的父元素
 5. parents():选中当前元素的所有先辈元素（包含父元素在内），可以传递参数选择器进行过滤
 6. next():选中紧邻当前元素的下一个兄弟元素prve() 选择紧邻的上一个兄弟元素
 7. siblings() 选中除了自己外的所有兄弟元素 事件跟js一样
 8. $("input[name='mobile']")

2.3 jQuery的DOM操作

//jquery的DOM操作

 1. text()方法：用来对DOM对象进行内部文本的读取和设置 如果传参表示设置，如果不传参表示获取
 2. html()方法：作用和text()方法一样，在设置文本式可以存在子标签
 3. val()用来获取或设置表单元素的值
 4. attr()用来获取或设置对象的属性值如果传入两个参数则表示设置元素的属性，如果只传入一个属性名，则表示获取该属性的值，可以用来操作元素的自定义属性
 5. prop()也是用来获取或设置元素的属性，和attr的区别是prop主要用来操作
 6. boolean类型的属性，例如选项是否选中，按钮是否被禁用
 7. show() hide()控制元素的显示和隐藏index()获取元素的索引值
 8. css():用来获取或设置元素的样式，样式的动态设置是通过行内样式的方式完成的
 9. addClass("className"):为当前元素添加一个类样式（推荐使用的）
 10. hasClass("className")判断当前元素是否存在某个class
 11. removeClass("className")移除元素的某个类样式
 12. each();用来进行循环迭代
 13. width()height()获取元素宽高

//元素的动态添加和删除
append
after before
remove()方法删除

2.4 jQuery的其他操作

submit提交按钮一定是同步请求
304 没有去服务器而是去浏览器的缓存中

通过原生js来实现异步请求
1.创建一个异步请求的核心对象
var xhr = new XMLHttpRequest();

2.调用对象的open方法来准备好一个异步请求
xhr.open(method(请求方式),url(资源路径));

3.在请求发送之前为xhr对象绑定一个事件来监控请求的状态
4次状态；请求准备完毕，请求已经发送到服务器；服务器正在处理请求；请求处理完成
xhr.readyState获取请求状态
xhr.status获取请求状态码
xhr.responseTest获取响应结果



4.对用对象的send方法将请求发送出去
xhr.send();//get请求没有请求体

异步请求响应复杂数据
JSON.parse(JSON字符串)解析为一个JS对象

阿里提供的fastJSON
JSON静态方法
JSON.toJSONString(Object obj)将一个JAVA对象转成JSON字符串

jackson工具
Person p1=new Person(1,"张三",18);
ObjectMapper mapper=new ObjectMapper();String json = mapper.writeValueAsString(p1);
System.out.println(json);
String str="{\"id\":1,\"name\":\"张三\",\"age\":18,\"car\":null}";
Person person = mapper.readValue(str, Person.class);
System.out.println(person);

Gson工具
Gson gson=new Gson();
Person p1=new Person(1,"张三",18);
//1.将JAVA对象转成JSONString json = gson.toJson(p1);
System.out.println(json);
//2.将JSON字符串转成JAVA对象String str="{\"id\":1,\"name\":\"张三\",\"age\":18}";
Person person = gson.fromJson(str, Person.class);
System.out.println(person);

2.5 jQuery发送ajax请求

语法：
$.ajax({    
	url:请求的资源路径,    
	type:"get/post",设置请求方式    
	data:{参数名1:参数值1,参数名2:参数值2,.....},请求发送的参数 可以针对get也可以针对post    
	dataType:"text/json",设置预期响应的结果类型  
	text表示简单的字符串  
	json表示响应一个对象或对象数组    
	success:function(res){  响应成功后的回调函数        
		//在回调函数中对响应的结果进行处理        
		res参数表示响应的结果数据           
	}，    
	beforeSend:function(){        
		//请求发送之前的处理   
	}，    
	complete:function(){        
		//请求完成后所做的处理   
	}
})