JQuery和AJAX学习笔记

最新推荐文章于 2024-04-28 04:05:42 发布

xianyuLuo.

最新推荐文章于 2024-04-28 04:05:42 发布

阅读量298

点赞数

分类专栏：前端文章标签： js jquery

本文链接：https://blog.csdn.net/Free_time_/article/details/107827270

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery简介

jquery字面上的意思就是javascript和查询，用于辅助开发的js库。jquery极大的简化了js编程。在<script>标签中使用src属性引入jquery.js地址，然后就可以正常使用jquery语法了。一般使用1.x版本，可以看巨头公司是使用的哪个版本就知道了。

控制台输出“hello world”

$(document).ready(function (){
	console.log("hello world")
});

隐藏id=test的元素

$("#test").hide()

jquery功能

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX

JQuery选择器

语法	含义
`$("*")`	选取所有元素
`$(this)`	选取当前HTML元素
`$("p.intro")`	选择 class 为 intro 的p标签
`$("p.first")`	第一个p标签
`$("ul li:first")`	ul 标签的第一个 li 标签元素
`$("[href]")`	带有 href 属性的元素
`$("a[target='x']")`	target值为x的a标签
`$(":button")`	type="button"的input标签和button标签

jquery选择器允许对HTML元素组或者单个元素进行操作。
jquery选择器可以基于元素id、类、类型、属性、属性值等选择HTML元素，也可以基于已存在的css选择器；除此之外，它还有一些自定义的选择器！

JQuery事件

jquery是为事件处理特别设计的！！！

页面对于不同访问者的响应叫做事件，事件处理程序是指当HTML中发生某些事件时所调用的方法。

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

JQuery DOM操作

jquery中非常重要的部分就是DOM操作能力。下面三个简单实用的用于DOM操作的jquery方法：

text()：设置或者获取所选元素的文本内容
html()：同上（会包含HTML标记）
val()：设置或者返回表单字段的值
attr()：获取指定属性的值

以上四个方法均可以设置所选元素的值、表单值、属性值

AJAX简介

ajax = async javascript and xml（异步ja和xml）；ajax不是新的编程语言，而是一种使用现有标准的新方法；ajax是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术；ajax是基于XHR技术和服务器交换数据！

XHR请求步骤

初始化XHR对象
设置XHR对象的请求方法、URL、是否异步
发送请求
监听XHR对象的状态变化
处理返回结果

var xhrhtml = new XMLHttpRequest();
xhrhtml.open("get", "https://www.qq.com", true);
xhrhtml.send();

xhrhtml.onreadystatechange = function () {
	if(xhrhtml.readState == 4 && xhrhtml.status == 200){
		document.write(xhrhtml.responseText);
		console.log("suceess")
	}
	else {
		console.log("Faild")
	}
}

XHR属性

属性	含义
status	返回状态码
responseText	以文本形式返回的数据
responseXML	以XMl形式返回的数据
statusText	以字符串的形式返回的状态
readyState	xhr请求的状态码：0～4 0：请求未初始化 1：与服务器建立连接 2：请求已接收 3：请求处理中 4：请求已完成
onreadystatechange	`readyState`发生改变时执行该函数

XHR方法

方法	含义
open()	设置请求方法、URL、是否异步
send()	发送请求
setRequestHeader()	请求头

可以通过JSON.parse()将responseText转为json格式

关于AJAX和JQuery

jquery提供了多个与ajax有关的方法
jquery解决了ajax在不同浏览器之间的兼容性问题
jquery封装了jquery式的ajax方法

$.ajax({
	type: "GET",
	url: "htpps://www.qq.com"，
	dataType: "jsonp",
	data: { },
	success: function(data, status){
		if(status == 200){
			console.log("success")
		}
		console.log("data is "data)
	}
});

JQuery中封装的Ajax方法

方法	含义
`$.ajax()`	执行ajax请求，异步
`$.get()`	执行get请求
`$.getJSON()`	执行get请求，并返回json格式数据
`$.post()`	执行post请求
`$.param()`	创建对象的序列化形式
`ajaxsend()`	ajax请求发送之前执行
`ajaxstart()`	第一个ajax请求开始时执行
`ajaxstop()`	所有ajax请求完成时执行
`ajaxsuccess()`	ajax请求成功时执行
`ajaxError()`	ajax请求失败时执行
`ajaxComplete()`	ajax请求完成时执行
`ajaxload()`	从服务器加载数据，并把返回数据放到指定元素中

Template模版

artTemplate，腾讯开源，效率很高！

模版使用：

引入模版js文件
定义模版：<script>标签中定义
数据+模版生成HTML： template() 方法
将生成的HTML渲染到页面

template()方法：

将数据和模版结合起来，返回HTML
通过模版ID来引用模版

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天气查询</title>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
	<script type="text/javascript" src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style type="text/css">
		#container1{
			height: 400px;
			width: 300px;
			background-color: #409EF0;
			text-align: center;
			margin: auto;
			padding: 10px;
		}
		#container2{
			font-size: 30px;
			color: #FFFFFF;
		}
		#container3{
			color: #FFFFFF;
		}
		ul{
			list-style: none;
			text-align: left;
		}
		#query,#city{
			border-radius: 8px;
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function(){
		  	$("#query").click(function(){
		  		var city = $("#city").val();
		   		$.ajax({
		   			type: "GET",
		   			url: "http://api.tianapi.com/txapi/tianqi/index",
		   			data: {
		   				key: "xxxxxxxxxxxxxxxx",
		   				city: city
		   			},
		   			success: function(data, status){
		   				console.log(city, data);
		   				var html = template("resultTemp", data);
		   				var container = document.querySelector("#container3");
		   				container.innerHTML = html;
		   			}
		   		});
		 	});
		});
	</script>

	<script type="text/html" id="resultTemp">
		<ul>
			<li><b>城市</b>：{{newslist[0]["area"]}}</li>
			<li><b>日期</b>：{{newslist[0]["date"]}}</li>
			<li><b>天气</b>：{{newslist[0]["weather"]}}</li>
			<li><b>当前气温</b>：{{newslist[0]["real"]}}</li>
			<li><b>最低气温</b>：{{newslist[0]["lowest"]}}</li>
			<li><b>最高气温</b>：{{newslist[0]["highest"]}}</li>
			<br>
			<li><b>生活提示</b>：{{newslist[0]["tips"]}}</li>
		</ul>
	</script>
</head>
<body>
	<div id="container1">
		<div id="container2">
			全国天气查询
		</div>
		<hr>
		<input type="text" name="city" id="city" placeholder="请输入城市名称">
		<button id="query">查询</button>
		<div id="container3">
			<ul>
				<li><b>城市</b>：</li>
				<li><b>日期</b>：</li>
				<li><b>天气</b>：</li>
				<li><b>当前气温</b>：</li>
				<li><b>最低气温</b>：</li>
				<li><b>最高气温</b>：</li>
				<br>
				<li><b>生活提示</b>：</li>
			</ul>
		</div>
	</div>
</body>
</html>

xianyuLuo.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery和AJAX学习笔记

JQuery简介jquery字面上的意思就是javascript和查询，用于辅助开发的js库。jquery极大的简化了js编程。在<script>标签中使用src属性引入jquery.js地址，然后就可以正常使用jquery语法了。一般使用1.x版本，可以看巨头公司是使用的哪个版本就知道了。控制台输出“hello world”$(document).ready(function (){ console.log("hello world")});隐藏id=test的元素$("#te
复制链接

扫一扫

专栏目录