一、jQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery官网:https://jquery.com/
jQuery版本区别:
- Production:精简压缩版本,适用于产品正式上线
- Development:未压缩版本,适用于开发环境
jQuery的使用:
只需要在html用引用就行<script src="js/jquery-3.4.1.js"></script>
二、jQuery选择器
在js中操作DOM是一个很繁琐的操作。但是在jQuery中,提供了更简单方便的方式查找或者定位元素。
1、基础选择器
名称 | 选择器 | 例子 |
---|---|---|
#id | ID选择器 | $("#ul"),id为ul的元素 |
element | 标签选择器 | $(“li”),标签为li的所有元素 |
.class | 类选择器 | $(".boy"),class为boy的所有元素 |
* | 通配符选择器 | $("*"),所有的元素 |
selector1,selector2… | 组合选择器 | $("#ul,.boy,.div"),id为ul的和class为boy的和div |
<ul id="ul">
<li class="boy">张三</li>
<li>李四</li>
<li class="boy">王二</li>
<li>麻子</li>
</ul>
<div></div>
1、ID选择器
console.log($("#ul"));
2、标签选择器
console.log($("li"));
3、类选择器
console.log($(".boy"));
4、通配符选择器
console.log($("*"));
5、组合选择器
console.log($("#ul,.boy,.div"));
2、属性选择器
名称 | 选择器 | 例子 |
---|---|---|
$("[class]") | 属性选择器 | $("[class]"),有class属性的的标签 |
<body>
<div class="ahh">啊哈哈1</div>
<div class="hha">啊哈哈2</div>
<p class="ahh"></p>
<span></span>
<script>
// 所有存在class属性的选择器
console.log($("[class]"));
//带有class属性的div
console.log($("div[class]"));
// 所有的class属性为ahh的
console.log($("[class='ahh']"));
// 所有的class属性为ahh的div
console.log($("div[class='ahh']"))
</script>
</body>
3、层次选择器
名称 | 选择器 | 举例 |
---|---|---|
ancestor descendant | 后代选择器 | $(“div ul”),div下的所有ul元素 |
parent > child | 子代选择器 | $(“div>ul”),div的直接ul子元素 |
prev + next | 相邻选择器 | $(“ul+p”),ul的下一个p元素 |
prev ~ sibling | 同辈选择器 | $(“ul~ol”),ul的同级别的ol元素 |
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>
<ul>
<li>列表5_1</li>
<li>列表5_2</li>
<li>列表5_3</li>
<li>列表5_4</li>
</ul>
</li>
</ul>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<p>啊哈哈</p>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
</div>
1、后代选择器
// 后代选择器 所有子元素
console.log($("div ul"));// div的所有ul子元素
2、子代选择器
// 子代选择器,直接子元素
console.log($("div>ul"));// div的直接ul子元素
3、相邻选择器
如果每日有相邻的元素,返回0长度的数组
// 相邻选择器
console.log($("ul+p"));// ul的下一个ol元素,如果ul的下一个元素不是ol,则返回0长度数组
4、同辈选择器
// 同辈选择器
console.log($("ul~ol")) // ul同辈的所有ol元素
4、表单选择器
表单选择器,就是单单用来获取表单的
名称 | 选择器 | 例子 |
---|---|---|
:input | 表单选择器 | $(":input"),所有的表单元素 |
:text | 文本框选择器 | $(":text"),所有的文本框 |
:password | 密码框选择器 | $(":password"),所有的密码框 |
:radio | 单选框选择器 | $(":radio"),所有的单选框 |
:checkbox | 复选框选择器 | $(":checkbox"),所有的复选框 |
:submit | 提交按钮选择器 | $(":submit"),所有的提交按钮 |
:reset | 重置按钮选择器 | $(":reset"),所有的重置按钮 |
:button | 按钮选择器 | $(":button"),所有的按钮 |
:file | 文件域选择器 | $(":file"),所有的文件域 |
<form action="myform" name="myform">
姓名:<input type="text" name="username" value="啊哈哈"><br>
姓名:<input type="text" name="username" value="啊哈哈"><br>
密码:<input type="password" name="password" value=""><br>
性别:<input type="radio" name="sex" value="1" checked>男<input type="radio" name="sex" value="0">女 <br>
爱好:<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="eat">吃东西 <br>
来自:
<select name="sel" id="sel">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="山西">山西</option>
</select>
简介:<textarea name="work" id="" cols="30" rows="10"></textarea><br>
头像:<input type="file"><br>
<input type="submit"><input type="reset"><button>按钮</button>
</form>
1、表单选择器
用于获取当前表单中的所有表单元素
console.log($(":input"));
2、文本框选择器
获取当前表单的所有文本框
console.log($(":text"));
3、密码框选择器
获取当前表单的阿所有密码框
console.log($(":password"))
4、单选框选择器
获取当前表单中的所有单选框
console.log($(":radio"));
5、复选框选择器
获取当前表单中的所有复选框
console.log($(":checkbox"));
6、提交按钮选择器
获取当前表单中的所有提交按钮
console.log($(":submit"));
7、重置按钮选择器
获取当前表单中的所有重置按钮
console.log($(":reset"));
8、按钮选择器
获取当前表单中的所有按钮
console.log($(":button"));
9、文件域选择器
获取当前表单中的所有文件域
console.log($(":file"));
5、表单过滤器
有时候只想获取某个表达的一部分,例如被选中的复选框,就可以使用表单过滤器过滤
名称 | 例子 |
---|---|
:checked | $(":checked"),所有被选中的单选框,复选框,下拉列表框 |
:selected | $(":selected"),被选中的下拉列表框的值 |
eq() |
1、checked
想要获取被选中的单选框、复选框和下拉列表,可以使用
console.log($(":checked"))
只要获取input标签,被选中的(input标签不包括下拉列表框)
console.log($("input:checked"));
获取单选框被选中的
console.log($(":radio:checked"));
获取复选框被选中的
console.log($(":radio:checked"));
2、selected
获取被选中的下拉列表框的值
console.log($(":selected"));
三、jQueryDOM操作
jQuery中也提供了对DOM的操作,而且使用起来更加简单
1、属性操作
HTML标签的中属性分为两种,一种是HTML中定义的属性,一种是自己自定义的属性。例如:id就是固有属性,我在标签中加了一个ahh属性,那么ahh属性就是自定义属性。
方法 | 说明 |
---|---|
attr() | 操作固有属性和自定义属性 |
prop() | 操作如有属性 |
<div id="div1" abc="abc_div1"></div>
<input type="text" value="我是一个表单元素">
<input type="radio" name="sex" value="男" checked="checked">男
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡觉
<input type="checkbox" name="hobby" value="eat">吃东西
1、获取固有属性
如果是固有属性,使用
attr
或者prop
没有任何区别
console.log($("#div1").attr("id"));// 获取id属性
console.log($("#div1").prop("id"));// 获取id属性
2、获取自定义属性
自定义属性只能使用
attr
获取,prop
获取不到
console.log($("#div1").attr("abc"));// 获取abc属性
console.log($("#div1").prop("abc"));// 获取abc属性,获取不到
3、获取表单元素属性
console.log($("[type='text']").attr("value"));// type为text的表单的value属性
console.log($("[type='text']").prop("value"));
4、获取固有属性中的boolean类型属性
如果获取固有的boolean类型属性,则有点不同。attr获取到的是写在HTML代码中的值,而prop获取到的是浏览器解析后的值。
// 获取radio的checked属性,获取到的是源代码中的设置样式,checked
console.log($("[type='radio']").attr("checked"));
// 获取radio的checked属性,获取到的是浏览器解析后的样式,true
console.log($("[type='radio']").prop("checked"));
5、获取checkbox(复选框)的checked属性
这个也稍微有点不同,如果获取的是复选框的,那么只能获取到第一个
// 获取radio的checked属性,获取到的是源代码中的设置样式,undefined
console.log($("[type='checkbox']").attr("checked"));
// 获取radio的checked属性,获取到的是浏览器解析后的样式,true
console.log($("[type='checkbox']").prop("checked"));
6、设置固有属性
同样设置固有属性,两种方式结果都一样
// 设置固有属性,设置class属性,值为div1
$("#div1").attr("class","div1");
$("#div1").prop("class","div1");
7、设置自定义属性
同样,prop不能获取自定义属性,也就不能设置自定义属性
// 设置自定义属性,设置ahh属性,属性值为ahh
$("#div1").attr("ahh","ahh"); // 成功
$("#div1").prop("ahh","ahh");// 失败
8、设置boolean类型的属性
设置和获取的时候一样,赋值不同,attr设置checked,prop设置boolean值
// 设置boolean属性
$("[value='code']").attr("checked","checked"); // 成功
$("[value='code']").prop("checked",true); // 成功
9、取消boolean类型的属性
$("[value='sleep']").prop("checked",false);// 推荐
2、样式操作
对于元素的样式,也是一种属性,但是由于样式使用的很多,就对样式进行了专有的方法处理。
方法 | 说明 |
---|---|
attr() | 操作属性 |
addClass() | 追加class |
removeClass() | 移除class |
css() | 设置css样式 |
<style>
.p1{
background-color: red;
}
.size{
font-size: 30px;
}
.border{
border: 5px solid #000000;
}
</style>
<p>啊哈哈</p>
1、attr()
calss也是属性,所以也可以使用cttr操作
$("p").attr("class","p1");
2、addClass()
追加class,对元素在添加一个class
$("p").addClass("size border");
3、removeClass()
移除class
$("p").removeClass("border");
4、css()
直接添加css属性,多个样式之间使用
,
分开。
$("p").css({"height":"50px","text-align":"center","line-height":"50px"})
3、操作元素值
对于元素也可以操作
方法 | 说明 |
---|---|
html() | 操作HTML内容 |
text() | 操作元素文本内容 |
val() | 操作元素value值 |
<p><span>啊哈哈</span></p>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
1、获取非表单元素内容,包含HTML
console.log($("p").html());
2、获取非表单元素内容,不包含HTML
console.log($("p").text());
3、非表单元素标签赋值,不带HTML
$("#d1").html("HelloWorld");
$("#d2").text("HelloWorld");
4、非表单元素赋值,带HTML
text,不能识别元素标签,会把元素标签当作内容赋值
$("#d3").html("<h3>HelloWorld</h3>");// 识别元素标签
$("#d4").text("<h3>HelloWorld</h3>");// 不识别元素标签
5、表单元素取值
console.log($("[type='text']").val());
6、表单元素赋值
console.log($("[type='text']").val("Hello World"));
4、添加元素
jQuery中也有封装好的添加元素的方法。当然了,添加元素前需要先创建元素。
1、创建元素
jQuery中提供了一种特别方便的创建元素的方式
var div = $("<div>我是一个</div>"); // 创建一个元素
2、添加元素
方法 | 说明 |
---|---|
父元素.prepend(新元素) | 在父元素的开头插入新元素 |
新元素.prependTo(父元素) | 把新元素添加到父元素的开头处 |
父元素.append(新元素) | 在父元素类追加新元素 |
新元素.appendTo(父元素) | 把新元素追加到父元素中 |
元素1.before(新元素) | 在元素1前添加新元素 |
元素1.after(新元素) | 在元素1后添加新元素 |
<ul>
<li>张三</li>
<li>李四</li>
<li>王二</li>
<li>麻子</li>
</ul>
var ul = $("ul");
1、prepend
var li = $("<li>添加到第一个位置</li>");
ul.prepend(li); // 添加到第一个位置,在ul里添加元素
2、prependTo
li.prependTo(ul); // 添加到第一个位置,把li添加到ul中
3、append
li = $("<li>添加到最后位置</li>");
ul.append(li); // 添加到最后位置,在ul里添加元素
4、appendTo
li.appendTo(ul); // 添加到最后位置,把li添加到ul最后位置
5、before
var p = $("<p>我是一个p标签</p>");
ul.before(p); // 把p添加到ul之前
6、after
p = $("<p>我也是一个p标签</p>");
ul.after(p) // 把p标签添加到ul后面
5、删除元素
删除元素有两种,一种是直接删除元素,连标签一起删除,还有一种是删除元素中的内容
方法 | 说明 |
---|---|
remove() | 删除元素,连带元素标签一起删除 |
empty() | 删除元素中的内容 |
1、remove
删除所以为2的
li
元素
var lis = $("li");
lis.eq(2).remove();
2、empty
清空索引为3的
li
元素中的内容
lis.eq(3).empty();
6、遍历元素
在jQuery中获取的元素,都是数组的形式
方法 | 说明 |
---|---|
each() | 遍历元素 |
for循环 | for循环 |
1、each,2个参数
两个参数:
i:元素的索引
e:DOM对象元素
lis.each(function (i,e) {
console.log(i,e);
});
2、each,没有参数
lis.each(function () {
console.log(this); // DOM对象
console.log($(this)); // jQuery对象
});
3、for循环
for (var i = 0;i<lis.length;i++){
console.log(lis.eq(i));
console.log(lis.get(i));
}
四、jQuery事件操作
jQuery中也提供了很多操作事件的方法
1、ready()
加载事件,和DOM的onload类似,不过也有不同。ready是在网页加载完DOM结构后就执行,而onload不但要等待DOM结构加载完毕,还要等待页面中的资源加载完毕才会执行。
ready(),有三种形式
1、ready
$(document).ready(function () {
console.log("啊哈哈",b);
});
2、$
$(function () {
console.log("啊哈哈",b)
});
3、jQuery
jQuery(function () {
console.log("啊嘿嘿",b)
})
2、事件绑定
为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
方法 | 描述 |
---|---|
bind | 绑定事件 |
绑定事件:
blur, focus, load, resize, scroll, unload, click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
<button id="but1">按钮1</button>
<button id="but2">按钮2</button>
<button id="but3">按钮3</button>
<button id="but4">按钮4</button>
<button id="but5">按钮5</button>
<button id="but6">按钮6</button>
<button id="but7">按钮7</button>
1、不带参数的绑定事件
第一个参数是事件,第二个参数触发事件后执行的函数
// 不带参数
$("#but1").bind("click",function () {
console.log("按钮1被点击了");
});
2、带参数的绑定事件
第一个参数是事件,第二个参数是传入的数据(对象类型), 第三个参数触发事件后执行的函数
$("#but2").bind("click",{name:"张三",age:20},function (e) {
console.log(e);
console.log(e.data.name,e.data.age);
console.log("按钮2被点击了")
});
3、简单的写法[推荐]
$("#but3").click(function () {
console.log("按钮3被点击了");
});
4、绑定多个事件,执行同一个函数
第一个参数是事件(多个事件中间使用空分开),第二个参数触发事件后执行的函数
$("#but4").bind("click mouseout",function () {
console.log("but4")
});
5、绑定多个事件,执行不同函数-1
$("#but5").bind("click",function () {
console.log("按钮5被点击了");
}).bind("mouseout",function () {
console.log("按钮5失去光标");
});
6、绑定多个事件,执行不同函数-2
$("#but6").bind({"click":function () {
console.log("按钮6被点击了")
},
"mouseout":function () {
console.log("按钮6失去光标")
}
});
7、绑定多个事件,执行不同函数-3
$("#but7").click(function () {
console.log("按钮7被点击了")
}).mouseout(function () {
console.log("按钮7失去光标")
})
五、Ajax操作
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1、ajax
参数 | 说明 |
---|---|
type | 请求方式[GET、POST] |
url | 请求的URL |
async | 是否同步。默认为ture,同步 |
data | 发送的数据,对象类型 |
dataType | 相应数据类型 |
contentType | 请求头 |
success | 请求成功回调函数 |
error | 请求失败,调用函数 |
$.ajax({
type:"get", // 请求方式
url:"js/data.json", // 请求地址(模拟本地文件)
data:{ // 请求数据
page:"1",
limit:"10"
},
dataType:"json", // 相应格式
success:function (result) { // 请求成功回调函数
console.log(result)
}
})
2、GET
上面的Ajax操作有点繁琐,所以出了单独针对GET请求的方式以取代复杂的Ajax
1、没有参数,没有回调函数
$.get("js/data.json");
2、有参数,没有回调函数
$.get("js/data.json",{name:"ahh"});
3、没参数,有回调函数
$.get("js/data.json",function (result) {
console.log(result);
});
4、有参数,有回调函数
$.get("js/data.json",{name:"ahh"},function (result) {
console.log(result);
});
3、POST
和GET一样,用以取代繁琐的Ajax
1、没有参数,没有回调函数
$.post("js/data.json");
2、有参数,没有回调函数
$.post("js/data.json",{name:"ahh"});
3、没参数,有回调函数
$.post("js/data.json",{name:"ahh"},function (result) {
console.log(result);
});
4、有参数,有回调函数
$.post("js/data.json",function (result) {
console.log(result);
});
4、getJSON
getJSON是专门用来获取获取JSON的
1、没有参数,没有回调函数
$.getJSON("js/data.txt");
2、有参数,没有回调函数
$.getJSON("js/data.txt",{name:"ahh"});
3、没参数,有回调函数
$.getJSON("js/data.txt",{name:"ahh"},function (result) {
console.log(result);
});
4、有参数,有回调函数
$.getJSON("js/data.txt",function (result) {
console.log(result);
});