JQuery and AJAX study notes

Introduction to JQuery

jqueryLiterally means javascriptand 查询, a jslibrary used to aid development . jqueryGreatly simplifies jsprogramming. <script>Use the srcattribute to introduce the jquery.jsaddress in the label , and then you can use the jquerysyntax normally . Generally use the 1.x version, you can see which version the giant company uses.

The console outputs "hello world"

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

Hidden id=testelement

$("#test").hide()

jquery function

• HTML element selection
• HTML element manipulation
• CSS operations
• HTML event function
• JavaScript special effects and animation
• HTML DOM traversal and modification
• AJAX

JQuery selector

grammar	meaning
$("*")	Select all elements
$(this)	Select the current HTML element
$("p.intro")	Select the p tag with class intro
$("p.first")	First p tag
$("ul li:first")	The first li tag element of the ul tag
$("[href]")	Elements with href attribute
$("a[target='x']")	a tag with target value x
$(":button")	input tag and button tag with type="button"

jquery选择器Allows operations on groups of HTML elements or individual elements.
jquery选择器It can be based on 元素id, 类, 类型, 属性, 属性值and other select HTML elements can also be based on existing css选择器; in addition, it also has some custom selectors!

JQuery events

jquery is specially designed for event handling! ! !

The response of the page to different visitors is called an event, and the event handler refers to the method that is called when certain events occur in the HTML.

Mouse event	Keyboard events	Form event	Document/window events
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

JQuery DOM manipulation

A very important part of jquery is DOM manipulation capabilities. The following three simple and practical jquery methods for DOM manipulation:

• text(): Set or get the text content of the selected element
• html(): Same as above (will contain HTML markup)
• val(): Set or return the value of the form field
• attr(): Get the value of the specified attribute

The above four methods can set the value of the selected element, form value, attribute value

---

Introduction to AJAX

ajax = async javascript and xml(Asynchronous ja and xml); ajaxnot a new programming language, but a new method using existing standards; it ajaxis a technology that can update part of the web page without reloading the entire page; it ajaxis based on XHRtechnology and server Exchange data!

XHRRequest step

1. Initialize the XHR object
2. Set the request method, URL, and whether the XHR object is asynchronous
3. send request
4. Monitor state changes of XHR objects
5. Processing return result

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 attributes

Attributes	meaning
status	Return status code
responseText	Data returned as text
responseXML	Data returned in XMl form
statusText	Status returned as a string
readyState	The status code of the xhr request: 0～4 0: The request is not initialized 1: The connection is established with the server 2: The request has been received 3: The request is being processed 4: The request has been completed
onreadystatechange	readyStateExecute the function when a change occurs

XHR method

method	meaning
open()	Set the request method, URL, whether it is asynchronous
send()	send request
setRequestHeader()	Request header

Can JSON.parse()be responseTextconverted to jsonformat

About AJAX and JQuery

• jqueryProvides multiple ajaxrelated methods
• jquerySolved the ajaxcompatibility issue between different browsers
• jqueryEncapsulated jquerytype ajaxmethod

$.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)
	}
});

Ajax method encapsulated in JQuery

method	meaning
$.ajax()	Perform ajax request, asynchronous
$.get()	Execute get request
$.getJSON()	Execute get request and return json format data
$.post()	Execute post request
$.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>