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>