简介
- 它是JS的前端框架之一。
市场上主流的JS框架很多：vue、Jquery、prototype、Ext.js、node.js、AngularJS….等等。
- Jquery的设计思想，是将原本的dom操作封装成一个Jquery对象，通过调用Jquery函数来操作dom节点。
- Jquery屏蔽了浏览器兼容问题。
- Jquery封装了Ajax技术。
- Jquery拥有非常强大的选择器。
jquery：中使用$(选择器)获取节点。
JS：中使用document对象的函数来获取节点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
console.log("Jquery的页面加载即刻执行...");
$("button:eq(0)").click(function(){
console.log("按钮被点击");
})
});
</script>
<script type="text/javascript">
window.onload = function() {
console.log("JS页面加载即执行...");
document.getElementById('btn').onclick = function() {
console.log("按钮被点击...");
}
}
</script>
|
选择器
用于查找指定的某个节点或者某一些节点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| 1.基本选择器
id选择器
类选择器
标签选择器
属性选择器
=：完全匹配
!=：完全不匹配
^=：以某个字符开头
$=：以某个字符结尾
*=：包含某个字符
比如：$('div[title$=v]').css("color","red");//查找 div标签中带有title属性并且title属性的值是以v结尾的
//多属性选择器。
//查找input标签，必须包含id属性和name属性的值必须以man结尾
//prop()：设置当前节点的属性和属性值
$('input[id][name$=man]').prop("value","张三");
伪类选择器
li:first-child：//查找第一个子元素
li:last-child：//查找最后一个子元素
li:nth-child(2)：//查找指定位置的元素
li:empty：//查找空元素
|
筛选器/过滤选择器(重点)
| 大于 |
大于等于 |
等于 |
小于 |
小于等于 |
不等于 |
| gt |
ge |
eq |
lt |
le |
!= |
| > |
>= |
= |
< |
<= |
!= |
1
2
3
4
5
6
7
8
| $('li:first')：获取第一个元素
$('li:last')：获取最后一个元素
$('li:even')：获取奇数
$('li:odd'):：获取偶数
$('li:eq(0)')：获取下标为0的元素
$('li:gt(4)')：获取下标大于4的元素
$('li:lt(2)')：获取下标小于2的元素
$('li:not(li:empty)')：获取除了空节点的所有元素。
|
表单元素选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
$(":disabled") //获取所有不可修改的节点
$('input:checked') //获取所有已选中的多选框
$('input:selected')//获取选中的下拉选框
总结：
表单元素选择器 与 属性过滤选择器 本质上的差别就是少些了一个input
比如：
属性选择器：$("input[type=text]").css("background-color","red");
表单选择器：$(":password").css("background-color","red");
|
层次选择器 筛选、过滤器
1
2
3
4
5
6
7
8
9
10
11
12
| first()：返回第一个节点元素
last()：返回最后一个节点元素
next():返回下一个兄弟元素
nextAll(selector)：默认返回当前节点同级别的下面的所有节点，可以按照selector进行筛选
prev()：返回当前节点同级别的上一个元素
prevAll(selector)：默认返回当前节点同级别的上面的所有节点，可以按照selector进行筛选
parent()：返回的是当前节点的直接父元素
parents(selector)：返回当前节点所有的祖宗元素，可以按照selector进行筛选
eq(1)：匹配指定下标的节点元素
find(selector)：筛选指定selector的元素节点
siblings(selector)：返回当前节点前后所有兄弟元素。可以按照selector进行筛选
children(selector)：返回当前节点的所有子元素，可以按照selector进行筛选，只能查找直接子元素
|
事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| 1.鼠标事件
click(function callback)：单击事件。
dblclick(function callback)：双击事件。
mouseenter(function callback)：鼠标移入
mouseleave(function callback)：鼠标移出
mouseover(function callback)：鼠标移入
mouseout(function callback)：鼠标移出
hover(function callback,function callback)：鼠标移入移出的整合
2.键盘事件
keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开
3.表单事件
focus：获取焦点事件
blur：失去焦点事件
change：值改变事件
submit：表单提交事件，在表单提交之前所触发的事件，多用于表单验证。
4.事件绑定函数
bind({})：可以绑定多个事件(已过时)
on({})：可以绑定多个事件
one({})：可以绑定多个事件,事件只能触发一次。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(function() {
$('li').on({
click: function() {
console.log("我被点击了...");
},
mouseenter: function() {
console.log("我进入了...");
},
mouseleave: function() {
console.log("我出去了...");
}
})
})
|
DOM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| 1.样式操作
css();方法设置或返回被选元素的一个或多个样式属性。
css(param):获取样式属性值
css("","")：设置单个样式
css({})：设置多个样式
addClass()：添加样式
removeClass()：删除样式
toggleClass()：切换样式
2.内容操作
text()：只更改文本内容，不会将HTML标签解析。
html()：改文本内容，会将HTML标签解析。
val()：获取或设置input节点的value属性值
3.属性的操作
attr();获取或设置节点的属性
attr("")：获取指定属性的值
attr("","")：设置属性值
attr({})：设置多个属性值
prop();类似于attr
4.节点的操作
1.增加节点：
a)创建新的节点
$("<li></li>")
b)将新节点追到到指定节点中
obj.append($("<li></li>"));
2.删除节点
remove():删除一个节点
empty();不删除节点，只将节点的内容置空
3.复制节点
clone()：只复制节点和内容不复制事件
clone(true)：复制节点的一切
4.替换节点
replaceWith:替换一个节点
replaceAll：替换一个节点
|
动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 将一个元素显示或者隐藏，或者按照既定的样式进行显示。
1.隐藏/显示
hide():
show():
2.淡入/淡出
fadeOut:淡出
fadeIn：淡入
fadeToggle：淡入淡入的切换
3.滑动
slideUp：向上滑动
slideDown：向下滑动
slideToggle：滑动切换
4.自定义动画【了解】
animate()
|
循环 each
语法：
1
2
3
4
5
| $.each(数组,function(下标,每份){
})
选中的数组.each(function(下标,每份){
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#b1").on("click",function(){
var texts = $(":text");
$.each(texts,function(index,item){
console.log(index,item.value);
})
$(":text").each(function(i,iteam){
console.log(i,iteam.value);
})
});
$("#b2").on("click",function(){
var jsonArr = [{"name":"张三","age":"22"},
{"name":"li4","age":"22"},
{"name":"wang5","age":"22"},]
$.each(jsonArr,function(index,item){
console.log(item.name+item.age);
})
})
})
</script>
</head>
<body>
<p>文本框</p>
<input type="text" value="刘备" /><br>
<input type="text" value="关羽" /><br>
<input type="text" value="张飞" /><br>
<input type="button" id="b1" value="点击">
<input type="button" id="b2" value="点击">
</body>
<script>
</script>
</html>
|
JSON
JavaScript Object Notation 简称js对象符号。
简单理解：一大堆字符串。用于后端与前端进行数据交互的一种技术。属于中间数据转换的一种语言。
语法：{"属性":"属性值"}
ajax
Asynchronous JavaScript and XML = 异步 JavaScript 和 XML
是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| var xhr = new XMLHttpRequest();
XmlHttpRequest对象常用重要属性:
open(methodType,url)：设定发送请求的方式和请求的地址。
setRequestHeader()：设置请求的消息头
onreadystatechange：注册一个监听器【绑定一个事件处理函数】
readyState：返回网络协议状态值
0：未初始化状态【对象已经创建，尚未调用open方法】
1：初始化状态【xhr调用了open方法】
2：发送数据【send已经被调用】
3：数据传输中【已经接受部分数据】
4：响应结束【接收了所有的数据】
status：浏览器返回的状态码
200：浏览器接收完毕，数据正常接收
responseText：服务器返回的数据。
send()：发送请求，请求中可以包含请求数据
|
原生方式
用原生方式写 动态监测输入用户名是否被注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <html>
<head>
<meta charset="utf-8"/>
<title>获取XmlHttpReuqest对象</title>
<script type="text/javascript">
function check_username() {
var xhr = new XMLHttpRequest();
xhr.open("post", "checkusername");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt.length);
if (txt.trim() == "用户名被占用") {
document.getElementById('username_msg').innerText = txt;
document.getElementById('username_msg').style.color = "red";
} else {
document.getElementById('username_msg').innerText = txt;
document.getElementById('username_msg').style.color = "green";
}
}
}
}
xhr.send("username=" + document.getElementById('user-name-label').value);
}
</script>
</head>
<body>
<h1>判断用户名是否被占用</h1>
<form action="#" method="#">
用户名：<input type="text" id="user-name-label" name="username" onblur="check_username();"/>
<span id="username_msg"></span>
</form>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/checkusername")
public class CheckUserNameServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if(username.equals("1224976993@qq.com")){
response.getWriter().println("用户名被占用");
}else{
response.getWriter().println("用户名可以使用");
}
}
}
|
Jquery对Ajax支持
Jquery对原生的ajax做了很好的封装特性。
提供了基于ajax()方法对服务器访问的函数。
函数以及语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| 函数：
1.ajax({}) : jquery提供的最基础的ajax访问函数，如 load,get,post函数都是基于ajax()函数的
语法：
$.ajax({});
ajax()函数的常用属性：
ajax({
url: 浏览器请求地址
async: 同步 | 异步 默认是异步，true是异步， false是同步
type: 请求的方式
dataType: 响应的数据类型 text【文本】 html【html内容】 json【后台解析过的对象】
success: 成功后的回调函数
error: 失败后的回调函数
}):
2.load：方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
load(url,{},function(data){})
url:浏览器请求地址
{}:要发送给服务器的数据
function(data) : 成功后的回调函数,data是服务器返回的数据
3.get
语法：
$.get(url,function(data){})
$.parseJSON(data)：将指定格式的字符串转换为JSON对象
4.post
语法：
post(url,{},function(data){})
5.serialize()
将表单序列化，然后浏览器引擎会将表单的数据转换为form data
发送给服务器。
|
例子：
1
2
3
4
5
6
7
8
9
| $.ajax({
url:"user", //访问user链接
type:"post", //post方式访问
data: $('#addForm').serialize(), //需要发送的数据(可多个 需要大括号包围、自定义key：value)；serialize()表示序列化。
dataType:"text", //函数返回的值将由jQuery进一步处理
success:function(data){ //成功后，返回的的数据
console.log(data);
}
})
|
prop与attr
获取在匹配的元素集中的第一个元素的属性值。
$("#xxxx").prop("checked");
设置或返回被选元素的属性值。
$("img").attr("src");
转跳到某个页面
window.location.href="/index";
md5加密
var loginPassword = $.md5($("#loginPassword").val());
dom对象与jq对象转换
1
2
3
4
5
6
7
8
9
10
| dom对象---> jq对象
语法：
$(dom对象)
用$包一下即可
---
jq对象--->dom对象
语法：
jq对象[0] 或者 jq对象.get(0)
|
下拉列表注意点
1
| <option value="1234567">文本内容</option>
|
1
2
3
4
5
6
7
8
| $("xxx").text();
<!-- 输出的是整个下拉别表的文本内容 -->
$("xxx").val();
<!-- 输出的是 value值 1234567 -->
$("xxx :selected").text();
<!-- 这个才是输出下拉列表选中的内容，注意：冒号前面要空格 -->
|
