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的元素

$("#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中发生某些事件时所调用的方法。

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dbclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload

JQuery DOM操作

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

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

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


AJAX简介

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

XHR请求步骤

  1. 初始化XHR对象
  2. 设置XHR对象的请求方法、URL、是否异步
  3. 发送请求
  4. 监听XHR对象的状态变化
  5. 处理返回结果
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以字符串的形式返回的状态
readyStatexhr请求的状态码:0~4
0:请求未初始化
1:与服务器建立连接
2:请求已接收
3:请求处理中
4:请求已完成
onreadystatechangereadyState发生改变时执行该函数

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,腾讯开源,效率很高!

模版使用:

  1. 引入模版js文件
  2. 定义模版:<script>标签中定义
  3. 数据+模版生成HTML: template() 方法
  4. 将生成的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>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页