jQuery
- jQuery 是一个优秀的 JavaScript 的轻量级框架之一，封装了 DOM 操作、事件、页面动画、异步操作等功能。特别值得一提的是基于 jQuery 的插件非常丰富，大多数前端业务场景都有其封装好的工具框架。
1. 历史版本
- 1.x：兼容 IE678，使用最为广泛的，官方只做 BUG 维护，功能不再新增。对一般项目来说，使用 1.x 版本就可以了。最终版本：1.12.4（2016年5月20日）
- 2.x：不兼容 IE678，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x。最终版本：2.2.4（2016年5月20日）
- 3.x：不兼容 IE678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。
- 开发版本与生产版本，命名为 jQuery-x.x.x.js 为开发版本，命名为 jQuery-x.x.x.min.js 为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。
- 注意：更高级的版本去掉了很多函数，所以不兼容低级版本。
- 很多公司为了安全起见，不会展示所用的 jq 版本号。
2. jQuery 环境引入
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jquery环境引入</title>
</head>
<body>
<script src="../js/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () {
console.log("页面加载完了,欢迎来到Jquery世界!");
});
</script>
</body>
</html>
3. jQuery 基础语法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jquery基础语法</title>
</head>
<body>
<script src="../js/jquery-1.11.3.js"></script>
<script>
let myf = function(){
console.log("页面加载完成时调用方法执行");
};
$(document).ready(myf);
$(myf);
$(function(){
console.log("页面加载完成自动执行,匿名函数");
});
</script>
</body>
</html>
- 注意：js 对象和 jq 对象的属性和方法不通用。
- 开发规范：jq 对象用
$ 修饰，不用 $ 修饰的是 js 对象。
4. jQuery 对象与 DOM 对象的区别
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jquery对象与dom对象</title>
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="md">演示jquery对象和dom对象的区别<br/></div>
<script>
let div = document.querySelector("#md");
console.log(div.innerText);
console.log(div.innerHTML);
let $div = $("#md");
console.log($div.text());
console.log($div.html());
console.log($div.innerText);
console.log($div.innerHTML);
console.log($(div).text());
console.log($(div).html());
console.log($div[0].innerText);
console.log($div[0].innerHTML);
</script>
</body>
</html>
- Console：
- jq 的本质是数组，每个元素都是 js 对象，所以转换用
[0]
5. jQuery 选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="../js/jquery-1.11.3.js"></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">Java</span>
<span id="east">JavaScript</span>
<script>
let $spans = $("span");
console.log($spans.text());
console.log($spans[5].innerText);
let $hero = $(".hero");
console.log($hero.text());
let $main = $("#main");
console.log($main.text());
</script>
</body>
</html>
- Console：
a. 层级关系
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>层级关系</title>
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div><span>地址</span>
<p><span id="gbl">爱好</span></p></div>
<span id="cld">性别</span>
<script>
console.log($("p,span").text());
console.log($("div span").text());
</script>
</body>
</html>
- Console：
b. 属性选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script src="../js/jquery-1.11.3.js"></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/>
<script>
console.log($("label[for]").text());
console.log($('input[type="text"]').val());
console.log($('input[type="text"]')[0].value);
console.log($("input[type='password'][name='userPass']").val());
</script>
</body>
</html>
- Console：
c. 对象遍历
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对象遍历</title>
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
<script>
let $lis = $("li");
$lis.each(function (i, e) {
console.log(`---${this === e}---${i}---${e.innerText}---${$(this).text()}--- `);
});
$lis.each(function(){
console.log($(this).text());
});
console.log(this);
$lis.each((i,e)=>{
console.log(`---${this === window}---${i}---${e.innerText}---${$(e).text()}- --`);
});
for(let i =0;i<$lis.length;i++){
console.log(`---${i}---${$lis[i].innerText}---${$($lis[i]).text()}---`);
}
for(let e of $lis.toArray()){
console.log(`---${e.innerText}---${$(e).text()}---`);
}
</script>
</body>
</html>
- Console：
6. jQuery 的 DOM 操作
a. 操作内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jquery操作内容</title>
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<span>span1</span>
<div>div1<br/></div>
<script>
let $spans = $("span");
let $divs = $("div");
console.log($spans.text());
console.log($divs.text());
console.log($spans.html());
console.log($divs.html());
$spans.text("<h2>设置文本内容</h2>");
$divs.text("<h2>设置文本内容</h2>");
$spans.html("<h2>设置html内容</h2>");
$divs.html("<h2>设置html内容</h2>");
</script>
</body>
</html>
- Console：
b. 操作属性
val()：获取/设置元素的 value 属性值
相当于：js 中的 对象 .valueattr(): 获取/设置元素的属性
removeAttr()：删除属性
相当于：js 中的 对象.setAttribute() / js对象.getAttribute()prop()：获取/设置元素的属性
removeAttr()：删除属性
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>操作属性</title>
<script src="../js/jquery-1.11.3.js"></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" checked="checked" id="female"/>女<br/>
爱好<input type="checkbox" name="hobby" value="smoke" id="smoke"/><label for="smoke">抽烟 </label>
<input type="checkbox" name="hobby" value="drink" checked id="drink"/><label for="drink">喝酒 </label>
<input type="checkbox" name="hobby" value="perm" checked="checked" 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>
<script>
let $un = $("#userName");
console.log($un.val());
$un.val("超级管理员");
let $ue = $("#userEdu");
console.log($ue.val());
$ue.val(1);
let $hobbys = $('input[name="hobby"]');
$hobbys.each(function(){
console.log(this.checked);
});
console.log(`--------------- prop----------------`);
$hobbys.each(function(){
console.log($(this).prop("checked"));
});
console.log(`--------------- attr----------------`);
$hobbys.each(function(){
console.log($(this).attr("checked"));
});
console.log($un.prop("data-msg"));
console.log($un.attr("data-msg"));
</script>
</body>
</html>
- 页面内容 + Console：
- 用
attr() 获取布尔值时，选中返回 checked，未选中返回 undefined。jq 在1.6版本之后，提供另一组 API：prop 通常处理属性值为布尔类型操作。例如：checked selected 等。
- 用
prop() 获取自定义属性时，返回的不是自定义属性的值，而是 undefined，所以此时应该用 attr()。适用范围比较：
c. 操作样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>操作样式</title>
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<style>
#p1 {
background-color: red;
}
.mp {
color: green
}
.mpp {
background-color: lightgray;
}
</style>
<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>
<script>
let $p1 = $('#p1');
let $p2 = $('#p2');
let $p3 = $('#p3');
let $p4 = $('#p4');
$p1.css("color","white");
$p2.css({"color":"green","background-color":"gold","border":"1px solid red"});
console.log($p2.css("background-color"));
$p4.addClass("mp");
$p4.addClass("mpp");
$p4.removeClass("mpp");
$p4.toggleClass("mpp");
$p4.toggleClass("mpp");
</script>
</body>
</html>
- Console：
d. 操作元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>操作元素</title>
<script src="../js/jquery-1.11.3.js"></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>
<script>
let $select = $("#userEdu");
let $option = $('<option value="0">幼稚园</option>');
$select.prepend($option);
$select.append('<option value="4">大学园</option>');
$select.empty();
$select.remove();
</script>
</body>
</html>
- 页面效果：
7. jQuery 绑定事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
<p id="p3" onclick="offevent()">我是段落3解绑定事件</p>
<script>
let $p1 = $("#p1");
let $p2 = $("#p2");
$p1.click(function(){
console.log(this.innerText);
console.log($(this).text());
});
$p1.click();
$p2.on("click",function(){
console.log(this.innerText);
console.log($(this).text());
});
function offevent(){
$p1.off("click");
$p2.off("click");
}
</script>
</body>
</html>
- Console：
a. 常用事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>常用事件</title>
<script src="../js/jquery-1.11.3.js"></script>
<style>
#city {
list-style: none;
line-height: 30px;
}
</style>
</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">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
<button id="btn">点击按钮</button>
<script>
$(function () {
$("#h1").text("修改文本内容");
});
$("#userName").blur(function () {
console.log($(this).val());
});
$("#userEdu").change(function () {
console.log($(this).val());
});
$("#city li").hover(
function () {
$(this).css("background-color", "pink");
}, function () {
$(this).css("background-color", "white");
});
$("#btn").click(function () {
$("#userEdu").val($("#userName").val());
});
</script>
</body>
</html>
- Console：
原文链接：https://qwert.blog.csdn.net/article/details/105378292
