jQuery
1.jQuery的介绍
1.1jQuery的定义
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大地简化了JavaScript编程。
1.2jQuery的作用
jQuery和JavaScript它们的作用一样﹐都是负责网页行为操作﹐增加网页和用户的交互效果的﹐只不过jQuery简化了JavaScript编程﹐jQuery实现交互效果更简单。
1.3.jQuery的优点
jQuery兼容了现在主流的浏览器﹐增加了程序员的开发效率
jQuery简化了JavaScript编程﹐代码编写更加简单
2.jQuery的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入jquery对应的js文件 -->
<script src="jquery.min.js"></script>
<script>
// window.onload= function(){
// // 当前页面全部加载完成，onload事件才会触发
// var oDiv = document.getElementById("div1");
// alert(oDiv);
// }
// $符号就是jquery的象征
// $本质上就是函数只不过这个函数名（$）
$(document).ready(function(){
var $div = $('#div01');
alert('jquery获取的div:' + $div)
})
// jQuery的简写
$(function(){
var $div1 = $('div1');
alert($div1)
})
</script>
</head>
<body>
<div id="div1">哈哈</div>
</body>
</html>
3.jQuery选择器
1.标签选择器
2.类选择器
3.id选择器
4.层级选择器
5.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 获取标签对象
var $p = $("p");
alert($p.length)
$p.css({"color": "green"});
var $div1 = $(".div1");
alert($div1.length);
$div1.css({"color": "red"});
var $box = $("#box1");
alert($box.length);
var $h = $("div h1");
alert($h.length);
// 属性选择器，先根据
var $input = $("input[type=text]");
alert($input.length);
});
// jquery选择器获取标签，和css选择器匹配标签的方式一致
</script>
</head>
<body>
<p>hello my name is hemingkang</p>
<p>nihao</p>
<div class="div1">haha</div>
<div id="box1">xiaokang</div>
<div>
<h1>哈哈</h1>
</div>
<input type="text">
<input type="button">
</body>
</html>
4.选择集过滤
4.1选择集过滤就是在选择标签的集合里面过滤自己需要的标签
4.2选择集过滤的操作
has(选择器名称)方法，表示选取包含指定选择器的标签
eq(索引)方法，表示选取指定索引的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 通过jquery选择器获取html的标签
// 获取包含指定选择器的父标签
var $divs = $("div");
$divs.has(".kang").css({"background":"red"});
// 根据下标选择指定的标签
$divs.eq(1).css({"background": "green"});
});
</script>
</head>
<body>
<div>
<p class="kang">哈哈</p>
</div>
<div>
<input type="button" value="按钮">
</div>
</body>
</html>
5.选择集转移
选择集转移就是以选择的标签作为参照，然后获取转移后的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 获取div作为参照物，获取其他标签
var $div = $("#box1");
// 获取当前标签的上一级标签
$div.prev().css({"color":"red","font-size":"25px"});
// 选择上面所有的同级标签
$div.prevAll().css({"text-indent":"50px"});
// 选择下一个同级标签
$div.next().css({"color":"green"});
$div.nextAll().css({"text-indent":"30px"});
// 选择同级的其他标签
$div.siblings().css({"text-decoration":"underline"});
// 选择父标签
$div.parent().css({"background":"gray"});
// 获取所有的子标签
$div.children().css({"color":"green"});
// 查找指定的子标签
$div.find("#p1").css({"color":"red"});
})
</script>
</head>
<body>
<div>
<p>我</p>
<h3>三级标题</h3>
<div id="box1"><span id="p1">我是</span><span>一个子标签</span>康康</div>
<div>郭伟</div>
<div>杨楷文</div>
<p>网站</p>
</div>
</body>
</html>
6.获取和设置标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 获取标签
var $div = $("div");
// html方法的使用
$div.html("<a href='https://www.baidu.com'>百度</a>");
// append方法 追加内容
$div.append("<a>何明康</a>");
})
</script>
</head>
<body>
<div>哈哈</div>
</body>
</html>
7.获取和设置元素属性
能够知道获取和设置元素属性的操作
prop方法设置标签属性，样式属性用css方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 获取标签
var $p = $("p");
var $text = $("#he");
// 获取样式属性，例：获取字体样式大小
var $px = $p.css("font-size");
alert($px);
$p.css({"font-size":"30px","background":"green"});
// 除了样式属性的相关操作使用css方法，其他属性的操作都是prop方法
// 获取属性
var $name = $text.prop("type")
alert($name);
var $type = $text.prop("name")
alert($type);
// 设置属性
// $text.prop({"value":"18"});
// value属性可以使用val方法
alert($text.val())
})
</script>
</head>
<body>
<p>我是一个段落标签</p>
<input type="text" name="kang" id="he" value="18">
</body>
</html>
8.jquery事件
8.1 常用事件
click（）鼠标点击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover()鼠标进入（进入子元素也触发）
mouseout()鼠标离开 （离开子元素也触发）
ready() DOM加载完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
// 等页面加载完成以后取标签元素
// $(document).ready(function(){
// });
$(function(){
// 获取ul里面的所有标签
var $li = $("ul li");
// 获取button标签
var $btn = $("#btn1");
// 获取text标签
var $text = $("#txt1");
// 获取div标签
var $div = $("div");
$li.click(function(){
// 获取当前点击的标签对象
// this.style.color = "red";
// jquery的写法
$(this).css({"color": "red"});
// 获取点击的索引
alert($(this).index());
});
$btn.click(function(){
// 获取文本框的内容
alert($text.val());
});
// 给text文本框添加焦点事件
$text.focus(function(){
// 获取得到焦点的文本框，然后设置样式属性
$(this).css({"background":"red"});
});
// 失去焦点事件
$text.blur(function(){
$(this).css({"background":"white"});
});
// 给div设置鼠标悬停（进入）事件
$div.mouseover(function(){
$(this).css({"background":"green"});
});
$div.mouseout(function(){
$(this).css({"background":"white"});
});
});
</script>
</head>
<body>
<div>
<ul>
<li>里门</li>
<li>凯文</li>
<li>博讯</li>
</ul>
<input type="text" id="txt1">
<input type="button" id="btn1" value="你点我">
</div>
</body>
</html>
9.事件代理
事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向他的父级一级一级的传递），把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 获取标签
var $btn = $("#btn1");
var $div = $("div");
$btn.click(function(){
alert("我是按钮");
// 扩展： 取消冒泡事件，就是不让事件向父级控件传递
// 默认事件进行冒泡
return false;
});
// $div.click(function(){
// alert("我是div");
// });
// 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
var $ul = $("div ul");
$ul.delegate("li","click",function(){
$(this).css({"color":"red"});
});
});
</script>
</head>
<body>
<div>
<p id="p1">康康</p>
<input type="button" value="按钮" id="btn1">
<ul>
<li>谢谢</li>
<li>不客气</li>
<li>你好</li>
</ul>
</div>
</body>
</html>
10.javascript对象
10.1JavaScript对象的介绍
javascript中的所有事务都是对象：字符串、数值、函数、等都可以认为是对象，此外，JavaScript允许自定义对象，对象可以拥有属性和方法。
10.2JavaScript创建对象操作
创建自定义javascript对象有两种方式：
通过顶级Object类型实例化一个对象
通过对象字面量创建一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 自定义JavaScript对象有两种方式
// 1. 使用顶级类型Object创建自定义对象
var oPerson = new Object();
// 添加属性
oPerson.name = "limen";
oPerson.age = 20;
//添加方法
oPerson.show = function(){
alert("你怎么还一个人！")
};
// 通过对象获取属性和调用方法
alert(oPerson.name);
oPerson.show();
// 2. 使用字面量创建自定义的对象
var oStudent = {
name: "超哥",
age: 20,
show:function(){
alert("我喜欢一个人！")
}
}
alert(oStudent.name)
oStudent.show()
</script>
</head>
<body>
</body>
</html>
11.json
11.1json的介绍
json是JavaScript Object Notation的首字母缩写﹐翻译过来就是javascript对象表示法﹐这里说的json就是类似于javascript对象的字符串﹐它同时是一种数据格式﹐目前这种数据格式比较流行﹐逐渐替换掉了传统的xml数据格式。
11.2json的格式
1.对象格式
2.数组格式
对象格式:
对象格式的json数据﹐使用一对大括号({})﹐大括号里面放入key:value形式的键值对﹐多个键值对使用逗号分隔。
对象格式的json数据:
{
"name":"tom",
"age":18
}
格式说明:
json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
数组格式:
数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。
数组格式的json数据:
["tom",18,"programmer"]
实际开发的json格式比较复杂,例如:
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":"North Andover, MA"
}
}
json数据转换成JavaScript对象
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。
示例代码:
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
// 操作属性
alert(oPerson.name);
alert(oPerson.age);
- json就是一个javascript对象表示法，json本质上是一个字符串。
- json有两种格式：1. 对象格式, 2. 数组格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- json: 就是类似于JavaScript对象的字符串。本质上就是一个字符串，同时还是一种数据格式
json的数据格式有两种：
1.对象格式： 最外层的表现形式是一对大括号，key名和字符串数据都要使用双引号
2.数组格式： 最外层是一对中括号，每项数据之间使用逗号进行分隔
-->
<script>
// 服务器把json数据给浏览器，当js解析json数据的时候为了方便，把json数据解析成一个javascript对象
// 对象格式的json数据
var sJson1 = '{"name":"hekang","age":21}';
// 把json数据转成JavaScript对象
var oPerson = JSON.parse(sJson1);
console.log(oPerson);
console.log(oPerson.name);
var sJson2 = '[{"name":"kang","age":21},{"name":"li","age":20}]';
var aArray = JSON.parse(sJson2);
console.log(aArray[0].age);
console.log(aArray[1].name);
// 扩展： 浏览器给python服务器的json数据，python服务器程序可以解析成字典或者列表
</script>
</head>
<body>
</body>
</html>
12.ajax
学习目标
- 能够知道ajax的作用
12.1 ajax的介绍
ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。
这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。
12.2 ajax的使用
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。
<script>
// 向web服务器发送ajax请求，本质上是一个http协议的请求
$.ajax({
// 请求的资源地址,不指定IP地址和端口号表示请求的是自己的服务器资源数据
url: "data.json",
// 请求方式： GET POST
type: "GET",
// 指定对服务器数据解析的格式
dataType: "JSON",
data: {"name":"hekang"},
// data : 表示发送给web服务器的参数
// 请求成功执行的函数
success:function(data){
console.log(data.name);
},
// 请求失败执行的函数
error:function(){
},
// 是否使用异步 默认表示使用异步
async: true
});
ajax方法的参数说明:
- url 请求地址
- type 请求方式，默认是'GET'，常用的还有'POST'
- dataType 设置返回的数据格式，常用的是'json'格式
- data 设置发送给服务器的数据，没有参数不需要设置
- success 设置请求成功后的回调函数
- error 设置请求失败后的回调函数
- async 设置是否异步，默认值是'true'，表示异步，一般不用写
- 同步和异步说明
- 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
- 异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。
ajax的简写方式:
$.ajax按照请求方式可以简写成$.get或者$.post方式
ajax简写方式的示例代码:
<script>
// 发送get方式的ajax请求的简写
$.get("data.json",{"age":21},function(data){
// 如果按照json格式进行解析，js这块能得到一个JavaScript对象
alert(data.age);
}, "JSON").error(function(){
alert("网络问题，请求失败");
});
</script>
$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
- url 请求地址
- data 设置发送给服务器的数据，没有参数不需要设置
- success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: "success"
- xhr 底层发送http请求XMLHttpRequest对象
- dataType 设置返回的数据格式
- "xml"
- "html"
- "text"
- "json"
- error 表示错误异常处理
- func 错误异常回调函数
小结
- ajax 是发送http请求获取后台服务器数据的技术
- ajax的简写方式可以使用$.get和$.post方法来完成
浙公网安备 33010602011771号