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>