|
第01节 基础理论
1、概念说明
1. 什么是 JQuery ? 有什么作用呢?
JQuery 是一个前端的框架，封装了一堆的 JavaScript 的代码。
JQuery 可以实现 "用最少的代码,做最多的事情" 简化 JavaScript 的书写效果。
?
2. 推荐网站
https://www.w3school.com.cn/jquery/index.asp
https://jquery.com/
2、快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的快速入门</title>
</head>
<body>
<div id="divid">
嘻嘻，我是div，你是啥?
</div>
<hr>
<!-- 引入JQuery代码 -->
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
/*
方式1：采用 JavaScript 完成实现，采用ES6版本实现
*/
let divElement = document.querySelector("#divid");
document.write("输出对象:<br>");
document.write(divElement+"<br>");
document.write("输出对象的内容值:<br>");
document.write(divElement.innerHTML+"<br>");
document.write("<hr>");
/*
方式2：采用JQuery 方式实现
*/
let divJqElement = $("#divid");
document.write("输出对象:<br>");
document.write(divJqElement+"<br>");
document.write("输出对象的内容值:<br>");
document.write(divJqElement.html()+"<br>");
</script>
第02节 基础语法
1、对象转换
需求：
现在想要使用彼此的功能，JavaScript 当中，想要去使用 JQuery的功能。例如: html()
又想要在 JQuery 里面去使用 JavaScript 的功能。例如 innerHtml 属性
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象转换</title>
</head>
<body>
<div id="divid">
嘻嘻，我是div，你是啥?
</div>
<hr>
<!-- 引入JQuery代码 -->
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
//1. 把 JavaScript的对象，转换成为 JQuery 的对象
let divJs01Element = document.querySelector("#divid");
//使用js当中的属性
document.write(divJs01Element.innerHTML + "<br>");
//转换成为 JQuery
let divJq01Element = $(divJs01Element);
document.write(divJq01Element.html() + "<br>");
document.write("<hr>");
//2. 把 JQuery 的对象，转换成为 JavaScript 的对象
let divJq02Element = $("#divid");
//使用Jq当中的函数
document.write(divJq02Element.html() + "<br>");
//转换成为JS
let divJs02Element = divJq02Element[0];
document.write(divJs02Element.innerHTML+"<br>");
//转换成为JS
let divJs022Element = divJq02Element.get(0);
document.write(divJs022Element.innerHTML+"<br>");
</script>
小结
1. JavaScript ---> JQuery:
let JQuery的对象 = $(JS的对象);
?
2. JQuery ---> JavaScript
方式一： ? let JS的对象 = JQuery的对象[索引值];
方式二: ? let JS的对象 = JQuery的对象.get(索引值);
2、事件处理
语法：
1. 事件的使用
$("选择器").事件的名称(function(){
.....
})
?
2. 事件的绑定和解绑
A. 绑定事件
JQuery的对象.on(事件的名称,执行的功能);
B. 解绑事件
JQuery的对象.off(事件的名称);
?
3. 事件支持链式调用,例如:
$("选择器").事件的名称(function(){
.....
}).事件的名称(function(){
? ? ? ?.....
? });
?案例1：点击显示和点击隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的事件处理1</title>
</head>
<body>
<button id="showbtn">点我展示妹子</button>
<button id="hiddenbtn">点我隐藏妹子</button>
<br><hr>
<img src="../image/meinv01.png" width="320" height="560" id="picid">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
//设置点击显示按钮的时候，图片展示
$("#showbtn").click(function () {
//通过css样式去控制显示
$("#picid").css("display","block");
});
//设置点击隐藏按钮的时候，图片隐藏
$("#hiddenbtn").click(function () {
//通过css样式去控制隐藏
$("#picid").css("display","none");
});
</script>
?案例2：事件的绑定和解绑操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的事件处理2</title>
</head>
<body>
<button id="showbtn">点我展示妹子</button>
<button id="hiddenbtn">点我隐藏妹子</button>
<button id="bindbtn">事件的绑定</button>
<button id="unbindbtn">事件的解绑</button>
<br>
<hr>
<img src="../image/meinv01.png" width="320" height="560" id="picid">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
//设置点击显示按钮的时候，图片展示
$("#showbtn").click(function () {
//通过css样式去控制显示
$("#picid").css("display", "block");
});
//设置点击隐藏按钮的时候，图片隐藏
$("#hiddenbtn").click(function () {
//通过css样式去控制隐藏
$("#picid").css("display", "none");
});
//设置点击 事件绑定按钮之后，给隐藏按钮 绑定事件。
$("#bindbtn").click(function () {
//通过css样式去控制显示
$("#hiddenbtn").on("click",function () {
//通过css样式去控制隐藏
$("#picid").css("display", "none");
});
alert("点击了绑定...");
});
//设置点击 事件解绑按钮之后，给隐藏按钮 解绑事件。
$("#unbindbtn").click(function () {
//通过css样式去控制显示
$("#hiddenbtn").off("click");
alert("点击了解绑...");
});
</script>
案例3：事件的链式调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理3</title>
</head>
<body>
<!-- 鼠标移入小图，则大图展示，鼠标移出小图，则大图消失 -->
<img src="../image/meinv_small.png" id="smallid" width="120" height="160">
<img src="../image/meinv_big.png" id="bigid" width="480" height="640" style="display: none">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$("#smallid").mouseover(function () {
//展示大图的效果
$("#bigid").css("display","block");
}).mouseout(function () {
//隐藏大图的效果
$("#bigid").css("display","none");
});
</script>
第一章 JQuery重要语法
第01节 入口函数
1、说明
什么是入口函数，入口函数有什么作用?
入口是当整个页面加载完毕之后，才能执行的代码。
我们页面的期待的加载顺序是: 先加载 HTML 再加载 CSS 最后才能去加载 JavaScript
但是页面当中默认的加载顺序是：从HTML 页面的文档开头一直到HTML 页面的文档结尾。
所以需要保证 JavaScript 一定要在 最后加载，就需要使用到 入口函数。
?
入口函数的作用: 让入口函数当中的代码，在整个页面加载完毕之后，才去执行。
2、格式一
基础语法
?
$(document).ready(function(){
.....
});
?
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数01</title>
</head>
<body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
//将按钮的文本信息，展示到控制台当中
console.log($("#btn").html());
});
</script>
<button id="btn">我是一个按钮</button>
</body>
</html>
3、格式二
基础语法
$(function(){
......
});
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数02</title>
</head>
<body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//将按钮的文本信息，展示到控制台当中
console.log($("#btn").html());
});
</script>
<button id="btn">我是一个按钮</button>
</body>
</html>
第02节 隐式迭代
1、说明
在 JQuery当中，如果是同类型的对象，在做设置等操作的时候，可以省略循环遍历的过程，一次编写，循环执行。
相比于 JavaScript 而言，简化了很多，不需要去循环遍历相同的对象了。
2、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐式迭代01</title>
</head>
<body>
<ul>
<li>上传简历</li>
<li>编辑简历</li>
<li>进入企业端</li>
<li>我的消息</li>
</ul>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//给上面的 li 标签，全部设置样式，字体颜色为蓝色
$(function () {
$("li").css("color","blue");
});
</script>
</body>
</html>
第03节 排他思想
1、说明
什么是排他思想?
选择我的时候，就干掉其他的兄弟。
基础语法:
siblings("选择器")
2、案例
案例一：点击当前的为红色，其他的为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排他思想01</title>
</head>
<body>
<ul>
<li>上传简历</li>
<li>编辑简历</li>
<li>进入企业端</li>
<li>我的消息</li>
</ul>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//给上面的 li 标签，全部设置样式，字体颜色为蓝色，同时设置事件处理
$("li").css("color","blue").click(function () {
//设置当前点击的为 红色，其他的兄弟为 蓝色
$(this).css("color","red").siblings(this).css("color","blue");
});
});
</script>
</body>
</html>
案例二：鼠标滑入展示效果，鼠标滑出隐藏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排他思想02</title>
<style>
li {
list-style: none; /*去掉小点点 */
display: inline; /*设置为行内元素 */
}
</style>
</head>
<body>
<ul>
<li>上传简历</li>
<li>编辑简历</li>
<li>进入企业端</li>
<li>我的消息</li>
<li>特别美女</li>
</ul>
<div>
<img class="meinv" src="../image/meinv01.png" width="300" height="400" style="display: none">
<img class="meinv" src="../image/meinv02.png" width="300" height="400" style="display: none">
<img class="meinv" src="../image/meinv03.png" width="300" height="400" style="display: none">
<img class="meinv" src="../image/meinv04.png" width="300" height="400" style="display: none">
<img class="meinv" src="../image/meinv05.png" width="300" height="400" style="display: none">
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//给上面的 li 标签，全部设置样式，字体颜色为蓝色，同时设置事件处理
$("li").css("color", "blue").mouseover(function () {
//设置当前鼠标移入的为 红色，其他的兄弟为 蓝色
$(this).css("color", "red").siblings(this).css("color", "blue");
//获取到对应索引位置的 图片信息
let imgElement = $("img").get($(this).index("li"));
//当前的图片信息展示，其他的图片信息隐藏
$(imgElement).show().siblings(imgElement).hide();
});
});
</script>
</body>
</html>
第二章 JQuery选择器
第01节 基础选择器
1、元素选择器
语法
$("元素的名称")
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
</head>
<body>
<p> 我是P111 </p>
<p> 我是P222 </p>
<p> 我是P333 </p>
<div> 我是DIV111 </div>
<div> 我是DIV222 </div>
<div> 我是DIV333 </div>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$(function () {
$("p").css("color","red");
$("div").css("color","blue");
});
</script>
2、ID选择器
语法
$("#ID的名称")
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
</head>
<body>
<p> 我是P111 </p>
<p id="p2id"> 我是P222 </p>
<p> 我是P333 </p>
<div> 我是DIV111 </div>
<div> 我是DIV222 </div>
<div id="div3id"> 我是DIV333 </div>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$(function () {
$("#p2id").css("color","red");
$("#div3id").css("color","blue");
});
</script>
3、类选择器
语法
$(".类选择器的名称")
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
</head>
<body>
<p> 我是P111 </p>
<p class="suibian"> 我是P222 </p>
<p> 我是P333 </p>
<div class="suibian"> 我是DIV111 </div>
<div> 我是DIV222 </div>
<div class="suibian"> 我是DIV333 </div>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$(function () {
$(".suibian").css("color","red");
});
</script>
第02节 层级选择器
1、子代选择器
语法 说明，只是包括儿子，不包括孙子
$("父元素的名称 > 子元素的名称");
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
</head>
<body>
<ul>
<li> ul-li-1 </li>
<li> ul-li-2 </li>
<li> ul-li-3 </li>
<ol>
<li> ul-ol-li-1 </li>
<li> ul-ol-li-2 </li>
<li> ul-ol-li-3 </li>
</ol>
</ul>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$(function () {
$("ul>li").css("color","red");
});
</script>
2、后代选择器
语法 说明，只是包括儿子，包括孙子
$("父元素的名称 ? 子元素的名称");
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
</head>
<body>
<ul>
<li> ul-li-1 </li>
<li> ul-li-2 </li>
<li> ul-li-3 </li>
<ol>
<li> ul-ol-li-1 </li>
<li> ul-ol-li-2 </li>
<li> ul-ol-li-3 </li>
</ol>
</ul>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$(function () {
$("ul li").css("color","blue");
});
</script>
3、兄弟选择器
语法
$("自己元素的名称 + 兄弟元素的名称"); ? ? ?//距离我最近的兄弟
$("自己元素的名称 ~ 兄弟元素的名称"); ? ? ?//距离我最近的所有兄弟
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
</head>
<body>
<div>
div1111
</div>
<p>
p11111
</p>
<p>
p22222
</p>
<script src="../js/jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
$(function () {
//如果是 + 表示距离最近的兄弟有效果
//$("div+p").css("color","red");
//如果是 ~ 表示所有的兄弟有效果
$("div~p").css("color","red");
});
</script>
第03节 过滤选择器
1、首尾选择器
语法
$("元素名称:first") ? ? //首元素选择
$("元素名称:last") ? ? ?//尾元素选择
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<style>
table{
margin: auto;
}
th,td{
width: 200px;
text-align: center;
padding: 5px;
border: 1px solid #FF9900;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>26</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>27</td>
</tr>
</table>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//表示第一行，被选中，字体颜色变成红色
$("tr:first").css("color","red");
//表示最后一行，被选中，字体颜色变成蓝色
$("tr:last").css("color","blue");
});
</script>
2、奇偶选择器
语法
$("元素名称:even") ? ? //选择的是偶数
$("元素名称:odd") ? ? ?//选择的是奇数
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<style>
table{
margin: auto;
}
th,td{
width: 200px;
text-align: center;
padding: 5px;
border: 1px solid #FF9900;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>26</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>27</td>
</tr>
</table>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//表示偶数，被选中，背景颜色变成橙色
$("tr:even").css("background-color","#FF9900");
//表示奇数，被选中，背景颜色变成绿色
$("tr:odd").css("background-color","#00FF00");
});
</script>
3、比较选择器
语法
$("元素名称:eq(index)") //选择的是等于这个索引值的
$("元素名称:gt(index)") //选择的是大于这个索引值的
$("元素名称:lt(index)") //选择的是小于这个索引值的
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<style>
table{
margin: auto;
}
th,td{
width: 200px;
text-align: center;
padding: 5px;
border: 1px solid #FF9900;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>26</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>27</td>
</tr>
</table>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//表示索引为2的被选中，背景颜色变成橙色
$("tr:eq(2)").css("background-color","#FF9900");
//表示索引大于2的被选中，背景颜色变成绿色
$("tr:gt(2)").css("background-color","#00FF00");
//表示索引小于2的被选中，背景颜色变成浅灰色
$("tr:lt(2)").css("background-color","#666666");
});
</script>
第04节 表单选择器
1、基础选择器
语法
$(":input") //表示所有的 input 标签
$(":text") //表示所有的 type="text" 的标签
$(":radio") //表示所有的 单选
$(":checkbox") //表示所有的 多选
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
</head>
<body>
<form method="get" action="#">
<input type="text" name="username" placeholder="请输入账号"> <br>
<input type="text" name="password" placeholder="请输入密码"> <br>
<input type="number" name="age" placeholder="请输入密码"> <br>
性别：
男<input type="radio" name="sex" value="boy" checked>
女<input type="radio" name="sex" value="girl"> <br>
兴趣爱好:
二次元<input type="checkbox" name="hobby" value="er">
美女<input type="checkbox" name="hobby" value="meizi">
游戏<input type="checkbox" name="hobby" value="game">
搞钱<input type="checkbox" name="hobby" value="money"><br>
选中你所在的城市:
<select>
<option> 北京</option>
<option> 上海</option>
<option> 广州</option>
<option> 深圳</option>
<option> 武汉</option>
<option> 杭州</option>
</select><br>
<input type="submit" value="提交到后台服务器">
</form>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//所有的 input 标签，背景颜色设置为 粉色。
$(":input").css("background-color","pink");
//所有的 type="text" 标签,背景颜色,设置为 橙色
$(":text").css("background-color","#FF9900");
//所有的 单选项 选中的效果
$(":radio").change(function () {
console.log("选中的是:" + this.value);
});
//所有的 多选框 选中的效果
$(":checkbox").change(function () {
console.log("选中的是:" + this.value);
});
</script>
2、高级选择器
语法
$("input:enabled") //可以被操作的input 元素标签
$(":disabled") //被禁用掉的 input 元素标签
$(":selected") //被选取的 input 元素标签
$(":checked") //被选中的 input 元素标签
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
</head>
<body>
<form method="get" action="#">
<input type="text" name="username" placeholder="请输入账号"> <br>
<input type="text" name="password" placeholder="请输入密码" disabled> <br>
<input type="number" name="age" placeholder="请输入年龄"> <br>
性别：
<input type="radio" name="sex" value="boy" checked><span>男</span>
<input type="radio" name="sex" value="girl"><span>女</span> <br>
兴趣爱好:
<input type="checkbox" name="hobby" value="er"><span>二次元</span>
<input type="checkbox" name="hobby" value="meizi"><span>美女</span>
<input type="checkbox" name="hobby" value="game"><span>游戏</span>
<input type="checkbox" name="hobby" value="money"><span>搞钱</span><br>
选中你所在的城市:
<select>
<option> 北京</option>
<option> 上海</option>
<option> 广州</option>
<option selected> 深圳</option>
<option> 武汉</option>
<option> 杭州</option>
</select><br>
<input type="submit" value="提交到后台服务器">
<input type="button" value="隐藏被选中的">
</form>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//可以被操作的 input
//$(":enabled").css("background-color","red");
//被禁用的 input
$(":disabled").css("background-color","blue");
//被选取的input元素标签
$("option:selected").css("background-color","yellow");
//被选中的input元素标签
$("input[type=button]").click(function () {
$("input:checked+span").hide();
$(":checked").hide();
});
</script>
第三章 JQuery的DOM操作
第01节 操作文本
1、基础语法
存值:
html("数据值")
text("数据值")
取值:
html()
text()
2、案例代码
操作 html() 类型的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作文本</title>
</head>
<body>
<div>
我是DIV,你是啥?
</div>
<span>
</span>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//获取到html 输出到控制台
let html = $("div").html();
console.log("---> " + html)
//存储文本到标签当中
let message = "兴哲,又在打酱油！";
$("span").html(message);
});
</script>
操作 text() 类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作文本</title>
</head>
<body>
<div>
我是DIV,你是啥?
</div>
<span>
</span>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//获取到文本 输出到控制台
let text = $("div").text();
console.log("---> " + text)
//存储文本到标签当中
let message = "兴哲,又在打酱油！";
$("span").text(message);
});
</script>
3、两者区别
说明
1. 获取值的区别
html() 获取到的是 元素里面的内容，包含有标签。
text() 获取到的是 纯文本内容，不包含标签。
?
2. 存放至的区别
html() 存储的内容，会被浏览器解析得到。以HTML的语法解析
text() 存储的内容，不会被浏览器解析得到。以纯文本的语法解析
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作文本</title>
</head>
<body>
<div>
<p>
我是DIV,你是啥?
</p>
</div>
<span id="sp01">
</span>
<br><hr>
<span id="sp02">
</span>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//获取到html 输出到控制台
let text = $("div").text();
let html = $("div").html();
console.log("-text--> " + text);
console.log("-html--> " + html);
//存储文本到标签当中
let message = "<a style='color:red'>兴哲,又在打酱油</a>";
$("#sp01").text(message);
$("#sp02").html(message);
});
</script>
第02节 操作属性
1、基础语法
方式一:
? attr(name) ? ? ? ? ? //获取值
? attr(name,value) //设置值，修改值
?
方式二：
prop(name) //获取值
prop(name,value) //设置值，修改值
2、案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性</title>
</head>
<body>
<button id="getvalAttr"> 点我获取值(attr) </button>
<button id="getvalProp"> 点我获取值(prop) </button>
<br><hr>
<button id="setvalAttr"> 点我修改值(attr) </button>
<button id="setvalProp"> 点我修改值(prop) </button>
<br><hr>
<img id="picid" src="../image/meinv01.png" width="300" height="400">
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//点我获取值(attr)
$("#getvalAttr").click(function () {
let v = $("#picid").attr("width");
alert(v);
});
//点我获取值(prop)
$("#getvalProp").click(function () {
let v = $("#picid").prop("width");
alert(v);
});
//点我修改值(attr)
$("#setvalAttr").click(function () {
$("#picid").attr("width",500);
});
//点我修改值(prop)
$("#setvalProp").click(function () {
$("#picid").prop("width",100);
});
});
</script>
第03节 操作样式
1、基础语法
1. css(name) //根据样式的名称, 去获取样式
2. css(name,value) //设置css样式
3. addClass(value) //给指定的对象,去添加样式
4. removeClass(value) //给指定的对象,删除样式
5. toggleClass(value) //开关,如果之前没有,则添加。如果之前有,则删除
2、案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作样式</title>
<style>
.yangshi{
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div style="border: 1px solid #FF9900">
车牌号: 川A88888
</div>
<br> <br>
<button id="btn1"> 采用 css(name) 获取样式 </button> <br> <br>
<button id="btn2"> 采用 addClass(value) 设置样式 </button><br> <br>
<button id="btn3"> 采用 removeClass(value) 设置样式 </button><br> <br>
<button id="btn4"> 采用 toggleClass(value) 设置样式 </button><br> <br>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//采用 css(name) 获取样式
$("#btn1").click(function () {
let name = $("div").css("border");
alert(name);
});
//采用 addClass(value) 设置样式
$("#btn2").click(function () {
$("div").addClass("yangshi");
});
//采用 removeClass(value) 设置样式
$("#btn3").click(function () {
$("div").removeClass("yangshi");
});
//采用 toggleClass(value) 设置样式
$("#btn4").click(function () {
$("div").toggleClass("yangshi");
});
});
</script>
|