Jquery&Ajax
秦博达
Jquery&Ajax
第1章 Jquery概述
1.1 jquery介绍
JQuery是对js语言进行的封装,使代码更加简洁(宗旨:Write Less,Do More!)
1.2 jquery版本
JQuery有三大版本:
a.1.x版本(目前用途最广泛)
b.2.x版本(不兼容IE678,用的很少)
c.3.x版本(即不兼容IE678,而且其他浏览器必须也是最新)
JQuery的命名是非常规范:
JQuery-版本号.js(开发版本)
JQuery-版本号-min.js(生成版本)
第2章Jquery基本语法
2.1 jquery环境引入
引入格式:
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
</head>
2.2 jquery基础语法
a.基本语法_页面加载事件
<head>
<meta charset="UTF-8">
<title>2.JQuery基础_页面加载事件</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<!--我们要编写jQuery/js代码,必须再写一个<script标签>不能在引入的那个<script>写代码-->
<script type="text/javascript">
/*1.页面加载事件*/
/*js版本的页面事件*/
window.onload = function () {
//页面加载完毕
alert("js的页面加载完毕事件")
}
/*jQuery的页面事件-完整格式*/
$(document).ready(function () {
//页面加载完毕
alert("jQuery的页面加载完毕事件")
})
/*jQuery的页面事件-简化格式*/
$(function () {
alert("jQuery的页面加载完毕事件-----")
})
</script>
</head>
b.基础语法_获取标签对象
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//页面加载事件
$(function () {
/*1.获取标签对象-js*/
// document.querySelector("img");
// document.querySelector(".imgClass");
// let imgObj = document.querySelector("#imgID");
// imgObj.src = "../img/11.png"
/*2.获取标签对象-jQuery*/
// $("img")
// $(".imgCLass")
let $imgObj = $("#imgID");
});
</script>
</head>
<body>
<img class="imgClass" id="imgID" src="../img/1.png" width="50%"/>
</body>
2.3 jquery对象与dom对象的区别
a.通过js获取的对象,我们称为js对象
通过jQuery获取的对象,我们称为jQuery对象
这两个对象,虽然代表的标签是一样的,但是这两个对象的函数时不通用!!!
b.js对象和jQuery对象能相互转换吗??? "a" --> ["a"]
js对象 ---> jQuery对象 : let $对象 = $(js对象)
JQuery对象 --> js对象: let js对象 = $对象[0]
注意: JS对象只能访问js的属性和函数,JQuery对象只能访问jQuery的属性和函数
千万不能混用!!!!
<script type="text/javascript">
//页面加载事件
$(function () {
//获取div-jQuery
let $divObj = $("div");
console.log($divObj.text());;
console.log($divObj.html());
//获取div-js
let divObj = document.querySelector("div");
console.log(divObj.innerText);
console.log(divObj.innerHTML);
//js对象和jquery对象的转换
console.log($divObj);
console.log(divObj)
//jQUery-->js对象
let divObj1 = $divObj[0];
//js -->jQuery对象
let $divObj1 = $(divObj);
console.log(divObj1);
console.log($divObj1);
});
</script>
第3章 Jquery选择器
js中: document.querySelector("css的选择器");
jQuery中: $("css的选择器");
3.1 基本选择器
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
/*jQuery的选择器*/
//1.页面加载事件
$(function () {
//2.标签选择器
let $spanObjs = $("span");
console.log($spanObjs.text());
//3.类选择器
let $spanFemales = $(".female");
console.log($spanFemales.text());
//4.id选择器
let $spanObj = $("#main");
console.log($spanObj.text());
});
</script>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female">新垣结衣</span>
<span class="female">岛琦结衣</span>
<span class="female hero">郭俊卿</span>
<span class="male hero">杨思根</span>
<span class="male hero">黄继光</span>
<span class="hero">郑成功</span>
<span id="main">主城</span>
<span id="east">东港</span>
</body>
3.2 层级选择器
并列选择器: (选择器1,选择器2)
后代选择器: (选择器1 选择器2)
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//1.页面加载事件
$(function () {
//2.并列选择器
let $allObjs = $("#gbl,.jjx");
console.log($allObjs.text());
//3.后代选择器
let $divspanObj = $("div span");
console.log($divspanObj.text());
});
</script>
</head>
<body>
<div>
<span>烟幕弹</span>
<p>
<span id="gbl">高爆雷</span>
</p>
</div>
<p class="jjx">急救箱</p>
<span id="cld">催泪弹</span>
</body>
3.3 属性选择器
属性选择器: [属性名='属性值']
注意:属性选择器可以有以下几种写法:
[属性名]: 选择所有标签,只要含有该属性即可
[属性名='属性值']:选择所有标签,只要其属性名=属性值即可
标签[属性名='属性值']:选择某种标签,要求其属性名=属性值
标签[属性名1='属性值1'][属性名2='属性值2']:选择某种标签,要求其属性名1=属性值1,并且属性名2=属性值2
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
/*jQuery的选择器*/
//1.页面加载事件
$(function () {
//2.属性选择器
let $nameObjs = $("[name]");
console.log($nameObjs.length);
let $nameObjs1 = $("input[name]");
console.log($nameObjs1.length);
let $nameObjs2 = $("input[name='userName']");
console.log($nameObjs2.length);
let $nameObjs3 = $("input[name='userName'][type='text']");
console.log($nameObjs3.length);
});
</script>
</head>
<body>
<label for="userName">姓名</label>
<input id="userName" type="text" name="userName" value="超级管理员"/><br/>
<label>密码</label>
<input type="password" name="userPass" value="123456"/><br/>
</body>
3.4 对象遍历
JS中的三种遍历:
fori,forin,forof
jQuery的遍历方式:
//第一种,调用$对象的each方法
$对象.each(function(i,e){
//遍历jQuery对象,function中有2个参数
//a.i代表当前遍历出的标签对象索引值
//b.e代表当前遍历出的标签对象(js对象)
});
$对象.each((i,e)=>{
//遍历jQuery对象,function中有2个参数
//a.i代表当前遍历出的标签对象索引值
//b.e代表当前遍历出的标签对象(js对象)
});
//第二种,调用$.each()方法
$.each($对象,function(i,e){
//遍历jQuery对象,function中有2个参数
//a.i代表当前遍历出的标签对象索引值
//b.e代表当前遍历出的标签对象(js对象)
})
$.each($对象,(i,e)=>{
//遍历jQuery对象,function中有2个参数
//a.i代表当前遍历出的标签对象索引值
//b.e代表当前遍历出的标签对象(js对象)
})
//其他奇葩的方式
$对象.each(function(){
this.innerText;
$(this).text()
})
<head>
<meta charset="UTF-8">
<title>8.jQuery的遍历</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//1.页面加载
$(function () {
//2.获取<li>标签
let $lis = $("li");
//3.$对象.each(function)
$lis.each(function (i, e) {
console.log(i);
console.log(e);
console.log(e.innerText);
console.log($(e).text());
});
console.log("--------------");
//$.each($对象,function);
$.each($lis,function (i, e) {
console.log(i);
console.log(e);
console.log(e.innerText);
console.log($(e).text());
});
console.log("--------------");
//4.each遍历:函数式编程
$lis.each((i, e) => {
console.log(i);
console.log(e);
console.log(e.innerText);
console.log($(e).text());
});
//5.fori遍历
console.log("--------------");
for(let i = 0;i < $lis.length;i++) {
let liObj = $lis[i];
console.log(liObj.innerText);
}
console.log("--------------");
//6.forof
for(let liObj of $lis.toArray()){
console.log(liObj.innerText);
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
第4章 Jquery的dom操作
4.1 jquery操作内容
js中操作内容:
js对象.innerText = 值;
js对象.innerHtml = 值;
jQuery中操作内容:
$对象.text("值");
$对象.html("值");
<head>
<meta charset="UTF-8">
<title>9.jQuery操作元素内容</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function () {
//1.获取span
console.log($("span").text());
console.log($("span").html());
$("span").text("<h2>花果山</h2>");
$("span").html("<h2>花果山</h2>");
//2.获取div
console.log($("div").text());
console.log($("div").html());
$("div").text("<h2>水帘洞</h2>");
$("div").html("<h2>水帘洞</h2>");
});
</script>
</head>
<body>
<span>花果山</span>
<div><h1>水帘洞</h1></div>
</body>
4.2 jquery操作属性
js中操作属性:
js对象.原生属性名 = 值;
js对象.getAttribute(自定义属性名);
js对象.setAttribute(自定义属性名,属性值);
js对象.removeAttribute(自定义属性名);
jQuery中操作属性:
$对象.prop("原生属性名"[,"属性值"]);
$对象.attr("自定义属性名"[,"属性值"]);
特殊的属性value,使用特殊的方法
$对象.val([值]); 给value属性赋值或者取值
<head>
<meta charset="UTF-8">
<title>10.jQuery操作元素属性</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//1.页面加载事件
$(function () {
//2.$对象.val()
console.log($("input[type='password']").val());
$("#userName").val("超级管理员");
console.log("value="+$("#userEdu").val());
console.log("value="+$("#userEdu").val(1));
//3.$对象.prop(原生属性名);
$("#male").prop("checked","checked");
$("input[type='checkbox']").prop("checked","checked");
//4.$对象.attr(自定义属性)
$("input[type='file']").attr("data","123321");
console.log($("input[type='file']").attr("data"));
})
</script>
</head>
<body>
<form action="#" method="get">
<input type="text" name="userId" value="007" hidden="hidden" id="userId"/><br/>
姓名<input type="text" name="userName" value="管理员" id="userName" data-msg="哈哈哈"/> <br/>
密码<input type="password" name="userPass" value="123" disabled id="userPass"/><br/>
生日<input type="date" name="userBirth" disabled="disabled" id="userBirth"/><br/>
性别<input type="radio" name="gender" value="male" id="male"/>男 
<input type="radio" name="gender" value="female" id="female"/>女<br/>
爱好<input type="checkbox" name="hobby" value="smoke" id="smoke"/>
<label for="smoke">抽烟 </label>
<input type="checkbox" name="hobby" value="drink" id="drink"/>
<label for="drink">喝酒 </label>
<input type="checkbox" name="hobby" value="perm" id="perm"/>
<label for="perm">烫头 </label><br/>
头像<input type="file" name="userPic"/><br/>
学历<select name="userEdu" id="userEdu">
<option value="">-请选择-</option>
<option value="1">小学</option>
<option value="2" selected>初中</option>
<option value="3">高中</option>
</select>
</form>
</body>
4.3 jquery操作样式
js中操作样式:
a.单个样式: js对象.style.样式名 = 样式值;
b.批量操作: js对象.style.cssText = "css的多个样式";
c.操作类型: js对象.className = "类名";
d.批量操作: js对象.classList 获取类名的集合,然后通过add,remove,toggle,contains
jQuery中操作样式:
a.单个样式: $对象.css("样式名"[,"样式值"]);
b.批量操作: $对象.css({"样式1":"值1","样式2":"值2",...});
c.操作类名: $对象.addClass(类名)
$对象.removeClass(类名)
$对象.toggleClass(类名)
<head>
<meta charset="UTF-8">
<title>11.JQuery操作元素样式</title>
<style>
#p1 {
background-color: red;
}
.mp {
color: green
}
.mpp {
background-color: lightgray;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//1.加载
$(function () {
//2.单个样式
console.log($("#p1").css("background-color"));
$("#p1").css("background-color","blue");
//3.批量样式
$("#p2").css({"color":"yellow","font-size":"50px","background-color":"black"});
//4.类名操作
$("#p3").addClass("mp");
$("#p3").removeClass("mpp");
$("#p4").toggleClass("mp");
$("#p4").toggleClass("mp");
})
</script>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3" class="mpp">3. 通过class设置样式</p>
<p id="p4">4. 切换class样式</p>
</body>
4.4 jquery操作元素
js中操作元素:
添加元素: js对象.innerHtml += "新的标签";
删除元素: js对象.innerHtml/outerHtml = "";
jQuery中操作元素:
添加元素:
$对象.html($对象.html()+"新的标签");
删除元素:
$对象.html("");
1. $(标签) 创建一个标签
2. $.prepend() 在内部前面插入元素
3. $.append() 在内部后面追加
4. $.empty() 清空内容
5. $.remove() 删除自己
<head>
<meta charset="UTF-8">
<title>12.JQuery操作元素</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//1.加载
$(function () {
// 1.前面添加幼稚园选项
let $optionObj = $("<option value='0'>幼稚园</option>");
$("#userEdu").prepend($optionObj);
// 2.后面添加大学选项
let $optionObj1 = $("<option value='4'>大学</option>");
$("#userEdu").append($optionObj1);
// 3.移出所有选项
$("#userEdu").empty();
// 4.删除下拉列表
$("#userEdu").remove();
});
</script>
</head>
<body>
<form action="#" method="get">
学历
<select name="userEdu" id="userEdu">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
</select>
</form>
</body>
扩展:jQuery动画
$对象.show();
$对象.hide();
$对象.slideUp()
$对象.slideDown()
$对象.fadeIn()
$对象.fadeOut()
$对象.fadeTo(时间,透明度)
<head>
<meta charset="UTF-8">
<title>13.JQuery的动画</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
function xianshi() {
// $("#imgID").show();
// $("#imgID").slideDown();
$("#imgID").fadeIn();
}
function yincang() {
// $("#imgID").hide();
// $("#imgID").slideUp();
// $("#imgID").fadeOut();
$("#imgID").fadeTo(3000,0.1);
}
</script>
</head>
<body>
<img id="imgID" src="../img/11.png" width="30%"></br>
<input type="button" value="点我显示" onclick="xianshi()">
<input type="button" value="点我隐藏" onclick="yincang()">
</body>
第5章 jQuery 绑定事件
5.1 jquery绑定事件
js中的事件绑定:
js对象.on事件名 = function(){}
jQuery中的事件绑定:
$对象.事件名(function(){})
其他两种方式:
$对象.on("事件名",function(){})
$对象.off("事件名"); 解绑事件,只能解绑由上面on方式绑定的事件
还有事件触发:
$对象.事件名(); 触发该事件(自动化测试)
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
function offevent() {
alert("段落3...")
}
$(function () {
//1.$.事件名(函数)
$("#p1").click(function () {
alert("段落1被点击了.")
});
//2.$.on("事件名",函数)
$("#p2").on("click",function () {
alert("段落22222...");
})
$("#p3").on("click",function () {
alert("段落3333...");
})
//3.$.off("事件名");
$("#p3").off("click");
//4.$.事件名();
$("#p1").click();
});
</script>
</head>
<body>
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
<p id="p3">我是段落3解绑定事件</p>
</body>
5.2 常用事件
1. ready 页面加载完成(jQuery的加载事件,不仅语法简单,而且可以绑定多个函数,js不行!!!)
2. blur 失去焦点
3. change 表单控件的value值改变时
4. mouseover mouseout hover 鼠标移入移出
5. click 单击
<head>
<meta charset="UTF-8">
<title>1.JQuery的引入</title>
<!--引入JQuery文件-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
// 1. ready 页面加载完成
$(document).ready(function () {
alert("页面OK了111");
});
$(function () {
alert("页面OK了111");
})
// 2. blur 失去焦点 focus自己练习
$(function () {
$("#userName").blur(function () {
alert("输入框失去焦点了..");
})
})
// 3. change 表单控件的value值改变时
$(function () {
$("#userEdu").change(function () {
alert("下拉框的值改变了..."+this.value)
})
})
// 4. mouseover mouseout hover 鼠标移入移出
$(function () {
$("#city").mouseover(function () {
// this.style.backgroundColor = "yellow";
$(this).css("backgroundColor","yellow");
});
$("#city").mouseout(function () {
// this.style.backgroundColor = "pink";
$(this).css("backgroundColor","pink");
});
//hover = mouseover+mouseout
$("#imgID").hover(
function () {
$(this).fadeTo(2000,0.1);
},
function () {
$(this).fadeTo(2000,1.0);
}
);
})
// 5. click 单击
$(function () {
$("#btn").click(function () {
alert("我点....")
});
})
</script>
</head>
<body>
<h1 id="h1">我是大标题</h1>
姓名<input type="text" name="userName" id="userName"/><br/>
学历
<select name="userEdu" id="userEdu">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
</select>
<ul id="city" style="background-color: green">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
<img src="../img/11.png" width="20%" id="imgID">
<input type="button" id="btn" value="点击按钮"></input>
</body>
第6章 Ajax概述
6.1 作用介绍
发送异步请求:
发送请求后,我们可以干其他事情,当请求有了结果(响应)了,自动回调一个函数
6.2 适用场景
1.百度搜索(京东搜索,淘宝搜索)
2.用户名注册
第7章 原生JS异步通信(了解)
7.1 js原生ajax实现(了解)
<head>
<meta charset="UTF-8">
<title>16.(了解)js的原生ajax</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
function doAjax() {
//使用原生js发送ajax
//1.创建异步请求的发送引擎
let http = new XMLHttpRequest();
//2.绑定引擎的状态改变事件
http.onreadystatechange = function () {
//3.当请求已经接受,并且状态为200(成功!!!)
if(http.readyState == 4 && http.status == 200){
let res = http.responseText;
console.log("res="+res);
}
}
//3.绑定请求地址和请求方式
http.open("get","../data/demo20.txt",true);
//4.发送请求
http.send();//开始发送数据
//.....
}
</script>
</head>
<body>
<img src="../img/111.png" onclick="doAjax()" width="30%">
</body>
第8章 Jquery的Ajax插件
8.1 jquery的Ajax语法
jQuery的ajax有三种方式:
完整格式(最常用):
$.ajax({
type:"get/post", -- 请求方式
url:"www.baidu.com", -- 请求路径
dataType: "text/json", -- 预期服务器返回的数据类型
data: "age=18&name='张三'"或者json对象, -- 给服务器发送的数据
async: true, -- 表示是否使用异步
success:function(data){}, -- 表示成功之后的回调函数,参数是服务器响应的数据
error:function(err){} -- 表示请求失败后的回调函数,参数是失败的详细信息
});
两种省略格式(不是很常用):
$.get(url,data,function(data){});
$.post(url,data,function(data){});
8.2 jquery的ajax
<head>
<meta charset="UTF-8">
<title>17.jQuery的ajax</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
/*完整的ajax*/
function doAjax() {
$.ajax({
type:"get",
url:"../data/student.txt",
// data:"要发送的数据"
dataType:"json",
async:true,
success:function (data) {
console.log("请求成功:");
for(let key in data){
console.log(key+".."+data[key]);
}
},
error:function (err) {
console.log("请求失败:"+err);
}
});
}
function doAjax02() {
$.ajax({
type:"get",
url:"../data/data.txt",
// data:"要发送的数据"
dataType:"json",
async:true,
success:function (data) {
console.log("请求成功:");
for(let d of data){
console.log(d);
}
},
error:function (err) {
console.log("请求失败:"+err);
}
});
}
/*get的ajax*/
function doGet() {
$.get("../data/demo20.txt",null,function (data) {
console.log("请求成功:"+data);
});
}
/*post的ajax*/
function doPost() {
$.post("../data/demo20.txt",null,function (data) {
console.log("请求成功:"+data);
});
}
</script>
</head>
<body>
<input type="button" value="发送完整的jQuery的Ajax" id="btn1" onclick="doAjax()"/><br/>
<input type="button" value="发送get方式的Ajax" id="btn2" onclick="doGet()"/><br/>
<input type="button" value="发送post方式的Ajax" id="btn3" onclick="doPost()"/><br/>
</body>
第9章 异步通信综合案例
9.1 案例 搜索候选
<body>
<div class="content">
<input type="text" name="word" onkeyup="searchWord(this)">
<input type="button" value="搜索一下">
<div class="show" id="show">
</div>
</div>
<script type="text/javascript">
function searchWord(obj) {
//发送ajax,得到结果之后,找出以obj.value开头的字符串
//1.发送ajax
$.ajax({
type:"get",
url:"../data/data.txt",
// data:null,
dataType:"json",
async:true,
success:function (data) {
console.log(data);
//清空
$("#show").empty();
$("#show").slideUp();
//遍历
let b = false;
for(let key of data){
//判断
if (key.startsWith(obj.value)) {
$("#show").append($("<div>"+key+"</div>"));
b = true;
}
}
if(b){
//让show显示
$("#show").slideDown();
}else{
//让show隐藏
$("#show").slideUp();
}
},
error:function (data) {
console.log("请求失败...")
}
});
}
</script>
</body>
总结
1. 能够使用Jquery基本选择器
$("标签") $(".类名") $("#id") $("选择器1 选择器2")
$("选择器1,选择器2") $("选择器1[属性名='属性值']")
2. 能够使用Jquery对象完成dom操作
获取操作,内容操作,属性操作,样式操作,元素操作
"3. 掌握Jquery事件绑定"
js的绑定: js对象.on事件名 = function(){}
jQuery的: $对象.事件名(function(){})
4. 理解原生JS异步通信原理
"5. 掌握Jquery的异步通信"
准完整格式:
$.ajax({
type:"get/post",
url:"路径",
data:"要发送的数据(字符串和json)",
dataType:"text/json",
async:true,
success:function(data){},
error:function(err){}
});
省略格式:
$.get(url,data,function(data){});
省略格式:
$.post(url,data,function(data){});
"=================6. 能够完成异步通信案例=============="
类似资料：