三、jQuery
基本概念
- jQuery是一个javascript库，jQuery凭借着简洁的语法和跨平台的兼容性，极大的简化了js操作DOM、处理 事件、执行动画等操作
- jQuery强调的理念是：‘write less, do more’(写的少，做的多)
jQuery的特点
- 免费开源
- 浏览器兼容性强
- 轻量级
- 链式编程
- 插件扩展性强 (表单验证插件 日期插件 轮播图)
- 写更少,做更多
jQuery演示
-
不需要安装jQuery, 可以通过引入jQuery类库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery的入门</title> <script src="js/jquery-3.5.1.js"></script> <script> /* 需求: 点击按钮获取input文本框中的value值. 实现方式1: 原生的javascript实现 实现方式2:采用jQuery方式实现 */ // 实现方式1: 原生的javascript实现 function getVal01(){ var val = document.getElementById("uid").value; alert(val); } //实现方式2:采用jQuery方式实现 /* 1)引入类库 2)编写一个<script> 在里面定义函数 3)获取input框的jQuery对象*/ function getVal02(){ //$ 代表的是jQuery对象 //# 代表id选择器 //val() 获取value值的方法 var val = $("#uid").val(); alert(val); } </script> </head> <body> <input type="text" name="username" id="uid" value="tom"> <br> <input type="button" value="javaScript方式获取" onclick="getVal01()"> <input type="button" value="jQuery方式获取" onclick="getVal02()"> </body> </html>
jQuery对象 和 DOM对象
DOM对象
-
DOM ( Document Object Model ，文档对象模型)，每一份 DOM 都可以表示成一棵树
var domObj = document.getElementById('id'); // 获得DOM对象 var objHTML = domObj.innerHTML; // 使用Javascript中的属性-innerHTML -
在 js 中，通过 getElementByTagName 或者 getElementById 来获取元素节点。像这样得到的 DOM 元素就 是 DOM 对象。而且 DOM 对象可以使用 js 中的方法，如： innerHTML
jQuery对象
-
jQuery 对象，是通过 jQuery 包装 DOM 对象后产生的对象， jQuery 对象是 jQuery 独有的，它可以使用 jQuery 里面的方法
// 获取id为test的元素内的html代码 $('#test').html(); // .html()是jQ里面的方法 // 上面的代码等同于： document.getElementById('test').innerHTML;
注意事项
- 在jQuery中，无法使用任何DOM对象的方法，例如：$(‘id’).innerHTML，这是错误的写法
- 在js中也无法使用jQ对象里面的方法，例如：document.getElementById(‘id’).html()，这样也是错误的
jQuery对象与DOM对象转换
jQ对象转成DOM对象
-
方法一(常用)： [index]
var $test = $("#test"); // jQ获取到的对象 var node = $test[0]; // 转成DOM对象 node.innerHTML = "你好啊"; // 使用DOM对象的方法 -
方法二： get(index)
var $test = $('#test'); // jQ获取到的对象 var test = $test.get(0); // 转成DOM对象 test.innerHTML = "我来了"; // 使用DOM对象的方法
dom对象转成jQuery对象
-
用 $() 把 DOM 对象包裹起来就是一个 jQ 对象
var test = document.getElementById("test"); // 获取的DOM对象 var $test = $(test); // 转成jQ对象
jQuery与dom之间的转换练习
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery和dom的转换</title> <script src="js/jquery-3.5.1.js"></script> <script> /* 需求: 1) 判断jQuery对象是否能够调用js的属性 ? 不能! 2) 判断dom对象是否能够调用jQuery的方法 ? 不能! 3) jQuery对象如何转换成dom对象 jQuery对象[0] ===>得到一个dom对象 jQuery对象.get(0) ===> 得到一个dom对象 4) dom对象如何转换为jQuery对象 $(dom对象) ===>得到一个jQuery对象 */ function fun(){ //1) 判断jQuery对象是否能够调用js的属性 ? // var $user = $("#uid"); // alert($user.value); //undefined 未获取到 // alert($user.val()); //jack //2) 判断dom对象是否能够调用jQuery的方法 ? //var user = document.getElementById("uid"); //alert(user.val()); //报错,val不是一个方法 //alert(user.value); //jack // 3) jQuery对象如何转换成dom对象 //var $user = $("#uid"); //var user = $user[0]; //jQuery对象转换成dom //var user = $user.get(0); //alert(user.value); //4) dom对象如何转换为jQuery对象 var user = document.getElementById("uid"); var $user = $(user); //dom对象转成jQuery对象 alert($user.val()); } </script> </head> <body> <input type="text" name="username" id="uid" value="jack"> <br> <input type="button" value="按钮" onclick="fun()"> </body> </html>
jQuery的函数与事件
页面加载函数
-
作用
- 当页面加载完毕后,会自动执行该函数
-
Js页面加载方式1
Window.onload = function(){} -
Js页面加载方式2
// 格式1: $(function(){ }) // 格式2: $(document).ready(function(){ }) -
js页面加载和jQuery页面加载的区别
- javaScript的页面加载只执行一次, 执行最后一次加载的
- jQuery的页面加载执行多次,每次都执行
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery页面加载函数</title> <script src="js/jquery-3.5.1.js"></script> <script> /* 需求:页面加载完毕后,打印input文本框中的value值. 页面加载函数的作用: 当页面加载完毕后,会自动执行该函数. 要求: 1.使用原生的js页面加载打印 格式: window.onload = funtion(){ } 2.使用jQuery的页面加载打印 格式1: $(document).ready(function(){ }) 格式2: 推荐 $(function(){ }) 3.对比js页面加载和jQuery页面加载的区别. js页面加载函数只加载一次,编写多个页面加载函数执行最后一次; jQuery页面加载函数,写多次,执行多次. */ //1.js方式页面加载获取value值 // window.onload = function(){ // var value = document.getElementById("uid").value; // alert(value); // alert("第一次加载"); // } // window.onload = function(){ // var value = document.getElementById("uid").value; // alert(value); // alert("第二次加载"); // } //2.jQuery方式页面加载获取value值 $(document).ready(function(){ var v = $("#uid").val(); alert(v); }) $(document).ready(function(){ var v = $("#uid").val(); alert(v); }) $(function(){ var v = $("#uid").val(); alert(v); }) </script> </head> <body> <input type="text" name="username" id="uid" value="rose"> </body> </html>
事件绑定与事件派发
jQuery中常用事件
-
jQuery中的事件与javaScript中的事件用法一样,但是名称都去掉了on
事件名 描述 load 某个页面或图像被完成加载 submit 当表单提交时触发该事件—注意事件源是表单form click 鼠标点击某个对象 dblclick 鼠标双击某个对象 blur 元素失去焦点 focus 元素获得焦点 change 用户改变域的内容 keydown 某个键盘的键被按下 keypress 某个键盘的键被按下或按住 keyup 某个键盘的键被松开 mousedown 某个鼠标按键被按下 mouseup 某个鼠标按键被松开 mouseover 鼠标被移到某元素之上 mouseout 鼠标从某元素移开 mousemove 鼠标被移动
元素绑定事件
-
基本格式
<head> <script> function fn(){ alert("试试就试试!!"); } </script> </head> <input type="button" value="点我试试" id="btn1" onclick="fn()">
元素派发事件
-
基本格式
<head> <script> $(function(){ $("#btn2").click(function(){ alert("jQuery想试试"); }) }) </script> </head> <input type="button" value="点我试试" id="btn2">
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.js"></script>
<script>
/*
需求:
给出两个按钮,分别使用事件绑定的方式,点击触发一个警告框.
第一种方式采用事件绑定;
第二种方式我们采用事件派发.
*/
//1.事件绑定方式触发
function fun1(){
alert("触发函数fun1");
}
//2.事件派发方式触发
$(function(){
$("#btn").click(function(){
alert("派发触发函数...");
})
})
</script>
</head>
<body>
<input type="button" value="事件绑定方式触发" onclick="fun1()"/>
<hr>
<input type="button" value="事件派发的方式触发" id="btn">
</body>
</html>
jQuery选择器
基本选择器
-
语法
选择器名称 语法 解释 标签选择器（元素选择器） $(“html标签名”) 获得所有匹配标签名称的于元素 id选择器 $("#id的属性值") 获得与指定id属性值匹配的元素 类选择器 $(".class的属性值") 获得与指定的class属性值匹配的元素 -
实例： 使用基本选择器给页面元素设置颜色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-3.5.1.js"></script> <style> div { border: 1px solid black; } p { border: 1px solid gray; width: 250px; } #box1,#box2 { width: 400px; height: 250; } div{ width: 300px; height: 120px; } </style> <title>无标题文档</title> <script> /* 小结: 基本选择器 id选择器 $("#id") ===> jQuery对象 类选择器 $(".class值") ====> 得到一类jQuery对象 标签选择器 $("标签名") ====> 得到一类jQuery对象 */ $(function(){ //1.选取id为box1的div,背景色设置为 yellow $("#btn1").click(function(){ $("#box1").css("background-color","yellow"); }) //2.class 为dd的元素,设置背景色为 lightblue $("#btn2").click(function(){ $(".dd").css("background-color","lightblue"); }) //3.选择所有p标签,设置背景颜色为orange $("#btn3").click(function(){ $("p").css("background-color","orange"); }) }) </script> </head> <body> <!-- html 部分 --> <div id="box1"> id为box1的div <p>我是box1的子代 P标签</p> <p>我是box1的子代 P标签</p> <div class="dd"> box1 子代div <p>我是box1的后代 孙子P标签</p> <p>我是box1的后代 孙子P标签</p> </div> </div> <br/> <div id="box2"> id为box2的div <p>我是box2的子代P标签</p> <p>我是box2的子代P标签</p> <div class="dd"> box2 子代div <p>我是box2的后代 孙子P标签</p> <p>我是box2的后代 孙子P标签</p> </div> </div> <br /> <input type="button" value="选取id为box1的div,背景色设置为 yellow" id="btn1"/> <input type="button" value="class 为dd的元素,设置背景色为 lightblue" id="btn2"/> <input type="button" value="选择所有p标签,设置背景颜色为orange" id="btn3"/> </body> </html>
层级选择器
-
语法
选择器名称 语法 解释 后代选择器 $(“A B”) 选择A元素内部的所有B元素（所有子代，包括孙代） 子选择器 $(“A>B”) 选择A元素内部的所有B子元素 (就子代) -
代码演示
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-3.5.1.js"></script> <style> div { border: 1px solid black; } p { border: 1px solid gray; width: 250px; } #box1,#box2 { width: 400px; height: 250; } div{ width: 300px; height: 120px; } </style> <title>无标题文档</title> <script> $(function(){ $("#btn1").click(function(){ //1.选择 body内的所有p元素. $("body p").css("background-color","yellow"); }) $("#btn2").click(function(){ //2.在body内,选择子元素是div的 $("body>div").css("background-color","lightblue"); }) }) </script> </head> <body> <!-- html 部分 --> <div id="box1"> id为box1的div <p>我是box1的子代 P标签</p> <p>我是box1的子代 P标签</p> <div class="dd"> box1 子代div <p>我是box1的后代 孙子P标签</p> <p>我是box1的后代 孙子P标签</p> </div> </div> <br /> <p>我是body内的P标签 1</p> <br/> <div id="box2"> id为box2的div <p>我是box2的子代P标签</p> <p>我是box2的子代P标签</p> <div class="dd"> box2 子代div <p>我是box2的后代 孙子P标签</p> <p>我是box2的后代 孙子P标签</p> </div> </div> <p>我是body内的P标签 2</p> <br /> <input type="button" value="选择 body内的所有p元素." id="btn1"/> <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> </body> </html>
属性选择器
-
语法
选择器名称 语法 解释 属性选择器 $(“A[属性名]”) 包含指定属性的选择器 属性选择器 $(“A[属性名=值]”) 包含指定属性等于指定值的选择器 -
代码演示
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-3.5.1.js"></script> <style> div { border: 1px solid black; } p { border: 1px solid gray; width: 250px; } #box1,#box2 { width: 400px; height: 250; } div{ width: 300px; height: 120px; } </style> <script> $(function(){ //给btn1派发单击事件 $("#btn1").click(function(){ //1.选取含有 属性title 的div元素 $("div[title]").css("background-color","green"); }) //给btn2派发单击事件 $("#btn2").click(function(){ //2.选取属性title值等于lagou的div元素 $("div[title='lagou']").css("background-color","red"); }) }) </script> <title>无标题文档</title> </head> <body> <!-- html 部分 --> <div id="box1"> id为box1的div <p>我是box1的子代 P标签</p> <p>我是box1的子代 P标签</p> <div class="dd" title="edu"> box1 子代div <p>我是box1的后代 孙子P标签</p> <p>我是box1的后代 孙子P标签</p> </div> </div> <br /> <p>我是body内的P标签 1</p> <br/> <div id="box2"> id为box2的div <p>我是box2的子代P标签</p> <p>我是box2的子代P标签</p> <div class="dd" title="lagou"> box2 子代div <p>我是box2的后代 孙子P标签</p> <p>我是box2的后代 孙子P标签</p> </div> </div> <p>我是body内的P标签 2</p> <br /> <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> <input type="button" value="选取 属性title值等于lagou的div元素" id="btn2"/> </body> </html>
基本过滤选择器
-
语法
选择器名称 语法 首元素选择器 :first 获得选择的元素中的第一个元素 尾元素选择器 :last 获得选择的元素中的最后一个元素 偶数选择器 :even 索引为偶数，从 0 开始计数 奇数选择器 :odd 索引奇数，从 0 开始计数 等于索引选择器 :eq(index) 指定索引元素 大于索引选择器 :gt(index) 大于指定索引元素 小于索引选择器 :lt(index) 小于指定索引元素 -
代码演示
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-3.5.1.js"></script> <style> div { border: 1px solid black; } p { border: 1px solid gray; width: 250px; } #box{ width: 400px; height: 50; } #box1,#box2 { width: 400px; height: 250; } div{ width: 300px; height: 120px; } </style> <title>无标题文档</title> <script> //编写页面加载函数 $(function(){ $("#btn1").click(function(){ //选择第一个div元素 $("div:first").css("background-color","yellow"); }) $("#btn2").click(function(){ //选择最后一个p元素 $("p:last").css("background-color","red"); }) $("#btn3").click(function(){ //选择索引值为偶数 的div元素 $("div:even").css("background-color","green"); }) $("#btn4").click(function(){ //选择索引值为奇数 的div元素 $("div:odd").css("background-color","orange"); }) $("#btn5").click(function(){ //选择索引值等于3的div元素 $("div:eq(3)").css("background-color","pink"); }) $("#btn6").click(function(){ //选择索引值大于3的div元素 $("div:gt(3)").css("background-color","gray"); }) $("#btn7").click(function(){ //选择索引值小于3的div元素 $("div:lt(3)").css("background-color","blue"); }) }) </script> </head> <body> <!-- html 部分 --> <div id="box"> 我是第一个div </div> <hr> <div id="box1"> id为box1的div <p>我是box1的子代 P标签</p> <p>我是box1的子代 P标签</p> <div class="dd" title="edu"> box1 子代div <p>我是box1的后代 孙子P标签</p> <p>我是box1的后代 孙子P标签</p> </div> </div> <hr> <p>我是body内的P标签 1</p> <hr> <div id="box2"> id为box2的div <p>我是box2的子代P标签</p> <p>我是box2的子代P标签</p> <div class="dd" title="lagou"> box2 子代div <p>我是box2的后代 孙子P标签</p> <p>我是box2的后代 孙子P标签</p> </div> </div> <p>我是body内的P标签 2</p> <hr> <input type="button" value="选择第一个div元素." id="btn1"/> <input type="button" value="选择最后一个p元素." id="btn2"/> <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/> <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> <input type="button" value="选择索引值等于3的div元素." id="btn5"/> <input type="button" value="选择索引值大于3的div元素." id="btn6"/> <input type="button" value="选择索引值小于于3的div元素." id="btn7"/> </body> </html>
表单选择器
-
表单选择器
选择器名称 语法 解释 表单选择器 :input 匹配所有 input, textarea, select 和 button 元素 文本标签选择器 :text 匹配所有的单行文本框 密码标签选择器 :password 匹配所有密码框 单选标签框选择器 :radio 匹配所有单选框 复选框选择器 :checkbox 匹配所有复选框 提交标签选择器 :submit 匹配所有提交按钮 图片标签选择器 :image 匹配所有图片 重置标签选择器 :reset 匹配所有重置按钮 按钮标签选择器 :button 匹配所有button按钮 文件标签选择器 :file 匹配所有文件框 隐藏域选择器 :hidden 匹配所有隐藏域标签 -
表单对象属性选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 选中选择器 | :checked | 获得单选/复选框选中的元素 |
| 选中选择器 | :selected | 获得下拉框选中的元素 |
-
代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单选择器.html</title> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //1-选取所有的表单子元素个数 :input var len = $(":input").length; alert(len); //22 }) $("#btn2").click(function(){ //2-选择文本框,打印文本框内容 :text var textVal = $(":text").val(); alert(textVal); }) $("#btn3").click(function(){ //3-选择单选框,获取单选框的值 :radio :checked var sex = $(":radio:checked").val(); alert(sex); }) $("#btn4").click(function(){ //4-选择复选框,获取所有复选框,打印长度 :checkbox var len = $(":checkbox").length; alert(len); }) $("#btn5").click(function(){ //5-选择复选框,获取所有复选框,获取用户勾选中的值 :checkbox :checked var chkArr = $(":checkbox:checked"); for(var i = 0; i < chkArr.length ; i++){ var val = $(chkArr[i]).val(); alert(val); } }) $("#btn6").click(function(){ //6-获取下拉选框选中的值 :selected var selectedVal = $(":selected").val(); alert(selectedVal); }) }) </script> </head> <body> <input type="button" value="1-选取所有的表单子元素个数" id="btn1"/><br /> <input type="button" value="2-选择文本框,打印文本框内容" id="btn2"/><br /> <input type="button" value="3-选择单选框,获取单选框的值" id="btn3"/><br /> <input type="button" value="4-选择复选框,获取所有复选框,打印长度" id="btn4"/><br /> <input type="button" value="5-选择复选框,获取所有复选框,获取用户勾选中的值" id="btn5"/><br /> <input type="button" value="6-获取下拉选框选中的值" id="btn6"/><br /> <br> <hr> <form id="form1" action="#"> <input type="button" value="Button"/><br/> <input type="checkbox" name="c" value="ck0"/>1<input type="checkbox" name="c" value="ck1"/>2<input type="checkbox" name="c" value="ck2"/>3<br/> <input type="file" /><br/> <input type="hidden" /><br/> <input type="image" src="img/3.jpg"/><br/> <input type="password" /><br/> <input type="radio" name="a" value="男"/>1<input type="radio" name="a" value="女"/>2<br/> <input type="reset" /><br/> <input type="submit" value="提交"/><br/> <input type="text" /><br/> <select> <option value="sel01">sel01</option> <option value="sel02">sel02</option> <option value="sel03">sel03</option> </select><br/> <textarea rows="5" cols="20"></textarea><br/> <button>Button</button><br/> </form> </body> </html>
jQuery的DOM操作
jQuery操作DOM树中的文本和值
-
语法
API方法 解释 val([value]) 获得/设置元素value属性相应的值 text([value]) 获得/设置元素的文本内容 html([value]) 获得/设置元素的标签体内 -
代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-1</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js"></script> <script type="text/javascript"> //1.获取P元素的HTML代码 function fn1(){ var ht = $("p").html(); alert(ht); //<strong>你好啊,我来了,别跑啊</strong> } //2.获取P元素的文本 function fn2(){ var te = $("p").text(); alert(te); //你好啊,我来了,别跑啊 } //3.设置P元素的HTML代码 function fn3(){ $("p").html("<i>内容被更换了....</i>"); } //4.设置P元素的文本 function fn4(){ $("p").text("内容被更换了....text"); } //5.获取按钮的value值 function fn5(){ var va = $("#btn1").val(); alert(va); } //6.设置按钮的value值 function fn6(){ $("#btn2").val("按钮内容更变.."); } //7.获取当前按钮对象 function fn7(t){ //传递的this代表的是当前input标签的dom对象 //alert(t); //bject HTMLInputElement] //alert(t.value); alert($(t).val()); } </script> </head> <body> <input type="button" value="获取P元素的HTML代码" onclick="fn1()"/> <input type="button" value="获取P元素的文本" onclick="fn2()"/> <input type="button" value="设置P元素的HTML代码" onclick="fn3()"/> <input type="button" value="设置P元素的文本" onclick="fn4()"/> <input id="btn1" type="button" value="获取按钮的value值" onclick="fn5()"/> <input id="btn2" type="button" value="设置按钮的value值" onclick="fn6()"/> <input id="btn3" type="button" value="获取当前按钮对象" onclick="fn7(this)"/> <hr/> <p title="demo" ><strong>你好啊,我来了,别跑啊</strong></p> </body> </html>
jQuery操作 DOM树中的属性
-
语法
API方法 解释 attr(name[,value]) 获得/设置属性的值 prop(name[,value]) 获得/设置属性的值(checked，selected) removeAttr(name) 删除属性值 -
attr与prop的注意问题
- attr与prop是以1.6为界限
- 数组的所有元素设置建议使用prop
- checked 和 selected 使用prop获取
- 其他使用attr获取 获取不到换成prop
-
代码演示
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-8</title> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js"></script> <script type="text/javascript"> //1.设置h1元素的属性'title' function fn1(){ //$("h1").attr("title","火一样的女子"); $("h1").prop("title","冰一样的少年"); } //2.获取h1元素的属性'title' function fn2(){ //var t = $("h1").attr("title"); var t = $("h1").prop("title"); alert(t); } //3.删除h1元素的属性'title' function fn3(){ $("h1").removeAttr("title"); } </script> </head> <body> <input type="button" value="设置h1元素的属性'title'" onclick="fn1()"/> <input type="button" value="获取h1元素的属性'title'" onclick="fn2()"/> <input type="button" value="删除h1元素的属性'title'" onclick="fn3()"/> <h1 title="风一样的少年" ><strong>我是风一样的少年</strong></h1> </body> </html>
jQuery操作class
-
语法
API方法 解释 css(name[,value]) 获取/设置指定的CSS样式 addClass(value) addClass(类样式名)给指定的对象添加新的类样式，指定类样式名字即可 removeClass(value) removeClass(类样式名)删除指定的类样式，不给value则删所有类样式 toggleClass(value) toggleClass(类样式名)切换样式，如果没有类样式，则添加，如果有类样式，则删除 -
代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-9-1</title> <style type="text/css"> .two{ font-weight:bold; /* 粗体字 */ background:red; font-family: "楷体"; } .one{ font-style:italic; color:green; } </style> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js"></script> <script type="text/javascript"> //1.获取字体样式 function fn1(){ // css(name) 获取 var fontStyle = $("h2").css("font-style"); alert(fontStyle); //italic } //2.设置字体样式 function fn2(){ //css(name,value) $("h2").css("font-style","normal"); } //3.追加class类 function fn3(){ //addClass(value) $("h2").addClass("two"); } //4.删除全部class类 function fn4(){ //删除class属性,对应的样式都会消失 removeClass(); $("h2").removeClass(); } //5.删除指定class类 function fn5(){ //removeClass(value样式值); $("h2").removeClass("one"); } //6.重复切换class类 function fn6(){ //toggleClass(value) $("h2").toggleClass("two"); } </script> </head> <body> <input type="button" value="获取字体样式" onclick="fn1()"/> <input type="button" value="设置字体样式" onclick="fn2()"/> <input type="button" value="追加class类" onclick="fn3()"/> <input type="button" value="删除全部class类" onclick="fn4()"/> <input type="button" value="删除指定class类" onclick="fn5()"/> <input type="button" value="重复切换class类" onclick="fn6()"/> <h2 class="one" title="你最喜欢的英雄是?" >你最喜欢的英雄是?</h2> </body> </html>
jQuery创建插入对象
-
语法
API方法 解释 $("<a></a>") 创建A元素对象 父元素.append(element) 添加成最后一个子元素，两者之间是父子关系 父元素.prepend(element) 添加成第一个子元素，两者之间是父子关系 兄弟元素.before(element) 添加到当前元素的前面，两者之间是兄弟关系 兄弟元素.after(element) 添加到当前元素的后面，两者之间是兄弟关系 -
代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js"></script> <script> /* * 1.创建2个带文本和title属性的li节点 * 2.获取ul父节点 * 3.获取第2个li节点 * 4.将第1个li节点添加为ul父节点的最后一个子节点 * 5.将第2个li节点追加为ul父节点的第一个子节点 * 6 最后一个元素之后添加$li_3 */ function fn(){ //1.创建2个带文本和title属性的li节点 $("<A></A>") var $li_1 = $("<li title='zhenji'>甄姬</li>"); var $li_2 = $("<li title='yuji'>虞姬</li>"); //2.获取ul父节点 var $ul = $("ul"); //3.获取第2个li节点 var $li2 = $("li:eq(1)"); //4.将第1个li节点添加为ul父节点的最后一个子节点 //父元素.append($li_1); //$ul.append($li_1); //5.将第2个li节点追加为ul父节点的第一个子节点 //父元素.prepend($li_2); //$ul.prepend($li_2); //6 最后一个元素之后添加$li_3 var $li_3 = $("<li title='lvbu'>吕布</li>"); //兄弟元素.before(xxx) 添加在兄弟之前; 兄弟元素.after(xx)添加在兄弟元素之后. $("li:last").after($li_3); } </script> </head> <body> <p title="王者荣耀">你喜欢的英雄是?</p> <ul> <li title='zhaoyun'>赵云</li> <li title='xiaoqiao'>小乔</li> <li title='luban'>鲁班</li> </ul> <button onclick="fn()">操作</button> </body> </html>
jQuery删除对象
-
语法
API方法 解释 remove() 删除指定元素 empty() 清空指定元素的所有子元素 -
代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-3-1</title> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js"></script> <script> //1.清空第一个节点,但不删除节点 function fn(){ $("li:first").empty(); } //2.删除第二个元素 function fn1(){ $("li:eq(1)").remove(); } //3.使用父节点清空所有子节点 function fn2(){ $("ul").empty(); } </script> </head> <body> <p title="王者荣耀">你喜欢的英雄是?</p> <ul> <li title='zhaoyun'>吕布</li> <li title='xiaoqiao'>刘备</li> <li title='luban'>曹操</li> </ul> <button onclick="fn()">清空第一个节点,但不删除节点</button> <button onclick="fn1()">删除第二个元素</button> <button onclick="fn2()">使用父节点清空所有子节点</button> </body> </html>
jQuery的遍历
- 遍历出来的元素为DOM对象，可以转为jQuery对象再使用
原始方式遍历
-
语法
for(var i=0;i<元素数组.length;i++){ 元素数组[i]; } -
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery的遍历方式1</title> <script src="js/jquery-3.5.1.js"></script> <script> //需求:点击按钮,遍历打印li中的文本值 $(function(){ //btn派发事件 $("#btn").click(function(){ //获取所有的li var $liArr = $("li"); //遍历该liArr for(var i = 0 ; i < $liArr.length ; i++){ //每次遍历到的结果是一个dom对象 var city = $($liArr[i]).html(); alert(city); } }) }) </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>天津</li> </ul> <hr> <input type="button" value="遍历方式1" id="btn"> </body> </html>
jquery对象方法遍历
-
语法
jquery对象.each(function(index,element){});- index 就是元素在集合中的索引
- element 就是集合中的每一个元素对象
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery的遍历方式2</title> <script src="js/jquery-3.5.1.js"></script> <script> //需求:点击按钮,遍历打印li中的文本值 //遍历格式: jQuery对象.each(function(index,element){}) $(function(){ $("#btn").click(function(){ $("li").each(function(index,element){ //alert("index = " + index + " , element = "+element); var liVal = $(element).html(); alert(liVal); }) }) }) </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>天津</li> </ul> <hr> <input type="button" value="遍历方式2" id="btn"> </body> </html>
jquery的全局方法遍历
-
语法
$.each(jquery对象,function(index,element){});- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery的遍历方式3</title> <script src="js/jquery-3.5.1.js"></script> <script> //需求:点击按钮,遍历打印li中的文本值 //遍历格式: $.each(被遍历的jQuery对象,function(index,element){}) $(function(){ $("#btn").click(function(){ //循环 $.each($("li"),function(index,element){ //alert("index = "+index + " , element = "+element); alert($(element).html()); }) }) }) </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>天津</li> </ul> <hr> <input type="button" value="遍历方式3" id="btn"> </body> </html>
jQuery3.0新特性for of语句遍历
-
语法
for(变量 of jquery对象){ 变量； }- 变量:定义变量依次接受jquery数组中的每一个元素
- jquery对象：要被遍历的jquery对象
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery的遍历方式4</title> <script src="js/jquery-3.5.1.js"></script> <script> //需求:点击按钮,遍历打印li中的文本值 //遍历格式: /* for(变量 of jquery对象){ 变量； } */ $(function(){ $("#btn").click(function(){ for(element of $("li")){ //alert(element); alert($(element).html()); } }) }) </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>天津</li> </ul> <hr> <input type="button" value="遍历方式4" id="btn"> </body> </html>
jQuery动画
- jQuery可以通过方法对HTML元素进行效果设置
- 包括隐藏，显示，切换，滑动，淡入淡出，动画等设置
隐藏和显示
-
方法
方法名称 解释 show([speed,[easing],[fn]]) 显示元素方法 hide([speed,[easing],[fn]]) 隐藏元素方法 toggle([speed],[easing],[fn]) 切换元素方法，显示的使之隐藏，隐藏的使之显示 -
参数
参数名称 解释 speed 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) easing 用来指定切换效果，默认是"swing"，可用参数"linear" fn 在动画完成时执行的函数，每个元素执行一次 -
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery的动画显示与隐藏</title> <script src="js/jquery-3.5.1.js"></script> <script> //1.需求1:点击显示,将div展示出来 function fn1(){ // show(速度,展现方式,函数); swing $("div").show(2000,"linear",function(){ alert("展示完毕,函数执行了."); }); } //2.需求2:点击隐藏,将div隐藏起来 function fn2(){ $("div").hide(1000,"swing",function(){ alert("已经隐藏完毕了."); }); } //3.需求3:点击切换,隐藏和显示效果切换 function fn3(){ $("div").toggle(1000); } </script> </head> <body> <input type="button" value="显示" onclick="fn1()"> <input type="button" value="隐藏" onclick="fn2()"> <input type="button" value="切换" onclick="fn3()"> <hr> <div style="width: 200px;height: 200px; background-color: yellow; border: 1px solid red; display: none;"></div> </body> </html>
滑动效果
-
方法
方法名称 解释 slideDown([speed,[easing],[fn]]) 向下滑动方法 (划入，展现) slideUp([speed,[easing],[fn]]) 向上滑动方法 (划出，消失) slideToggle([speed],[easing],[fn]) 切换元素方法，显示的使之隐藏，隐藏的使之显示 -
参数
参数名称 解释 speed 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) easing 用来指定切换效果，默认是"swing"，可用参数"linear" fn 在动画完成时执行的函数，每个元素执行一次 -
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.js"></script> </head> <!-- slideDown([speed,[easing],[fn]])向下滑动方法 (划入) 展现 slideUp([speed,[easing],[fn]])向上滑动方法 (划出) 消失 slideToggle([speed],[easing],[fn])切换元素方法，显示的使之隐藏，隐藏的使之显示 --> <script> function hideFn(){ $("#showDiv").slideUp(1000,"swing",function(){ alert("向上滑动消失"); }); //向上滑动隐藏; } function showFn(){ $("#showDiv").slideDown(); //向下滑动,展示出来 } function toggleFn(){ $("#showDiv").slideToggle(); } </script> <body> <input type="button" value="点击按钮隐藏div" onclick="hideFn()"> <input type="button" value="点击按钮显示div" onclick="showFn()"> <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> <div id="showDiv" style="width:150px;height:150px;background:gold"> </div> </body> </html>
链式编程
-
链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在 一起 ；这样的话，浏览 器就不必多次查找相同的元素。
-
如需链接一个动作， 只需简单地把该动作追加到之前的动作上
-
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红 色，然后向上滑动，再然后向下滑动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拉勾教育-jQuery</title> <script src="js/jquery-3.5.1.js"> </script> <script> //需求:使用链式编程,给p标签设置字体颜色为红色,向上滑动效果,向下滑动效果 $(function(){ $("button").click(function(){ //获取p标签,设置颜色,向上滑动效果和向下滑动效果 $("p").css("color","red").slideUp(2000).slideDown(2000); }) }) </script> </head> <body> <p id="p1">有道无术,术尚可求,有术无道,止于术</p> <button>点击我会触发多个方法</button> </body> </html>
animate自定义动画
-
animate() 方法用于创建自定义动画
-
语法
$(selector).animate({params},speed,callback);- 必需的 params 参数定义形成动画的 CSS 属性
- 可选的 speed 参数规定效果的时长 ；它可以取以下 值：“slow”、“fast” 或毫秒
- 可选的 callback 参数是动画完成后所执行的函数名称
-
代码演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.5.1.js" ></script> <script> /* 语法:$(selector).animate({params},speed,callback); 需求:使用animate实现div高度变为300px ,透明度opacity 0.4, 宽度变为400px,透明度opacity 0.6 , 向右移动300px, 再向下移动300px,弹出框提示动画演示结束. */ $(function(){ $("button").click(function(){ $("div").animate({ height:"300px", opacity:"0.4" },"slow").animate({ width:"400px", opacity:"0.6" },"slow").animate({ left:"300px" },"slow").animate({ top:"300px" },"slow",function(){ alert("动画演示完毕"); }) }) }) </script> </head> <body> <button>开始动画</button> <div style="background:#FF0000;height:100px;width:100px;position:absolute;"></div> </body> </html>
jQuery应用案例–弹幕
style.css
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* 幻灯片容器 */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 下一张 & 上一张 按钮 */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* 定位 "下一张" 按钮靠右 */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);}
/* 标题文本 */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* 数字文本 (1/3 等) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* 标记符号 */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* 淡出动画 */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<html>
<head>
<meta charset="utf-8">
<title>弹幕案例</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="css/style.css">
<!-- 引入jQuery的类库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
//需求:点击发射按钮或回车,把文本框的消息发送到页面中.
$(function(){
//1.点击发射按钮,发送弹幕
$("#btn").click(function(){
//调用生成弹幕方法
danmu();
})
//2.点击回车,发送弹幕
$("#text").keyup(function(e){
//判断按下的是否是回车
if(e.keyCode == 13){
danmu();
}
})
})
//3.生成弹幕
function danmu(){
//1.定义一个数组,存放不同的颜色单词
var colors = ["red","green","orange","hotpink","skyblue","glod"];
//2.随机选中一个颜色
var randomColor = parseInt(Math.random() * colors.length) ;
//3.获取高度(随机高度 650)
var randomY = parseFloat(Math.random()) * 650;
//4.生一个span ,代表的就是弹幕
var $span = $("<span></span>")
//4.1 使用链式编程设置内容,设置文本内容
.text($("#text").val())
//4.2给弹幕设置颜色
.css("color",colors[randomColor])
//4.3设置弹幕的位置
.css("left",1400)
//4.4设置高度 (弹幕的高度是随机的)
.css("top",randomY)
//4.5设计自定义动画animate ,让span从右向左移动,用过花费10秒,移动到最左侧消失
.animate({left:-500},10000,"linear",function(){
$(this).remove();
});
//5.将生成的span添加到 boxDom的div中
$("#boxDom").append($span);
}
</script>
</head>
<body>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">弹幕:</p>
<input type="text" class="text" id="text" />
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
</body>
</html>
注：本内容为个人拉勾教育大数据训练营课程笔记
扫一扫
1333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
