Jquery的高级进阶、以及使用教程
2024-07-02 19:57:14
Jquery概述
Jquery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。
Jquery与js的区别
Jquery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是Jquery对象而不是js对象。
jq与js对象之间的相互转换
- Jquery对象与js对象相互转换
js --> jq
$(js对象) 或者Jqueryjs对象)
jq --> js
jq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>jq与js对象相互转换</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div><script>// 通过js方式修改文本内容let elementById = document.getElementById('myDiv');elementById.innerHTML = '通过js方式修改的';// 通过jq方式修改文本内容let $myDiv = $('#myDiv');$myDiv.html("通过jq方式修改的")// js对象和jq对象的：属性和方法不同通用
</script>
</body>
</html>
页面加载事件
- 页面加载事件
js
window.οnlοad=function(){}
jq
$(function(){})
区别
js：只能定义一次，如果定义多次，后加载会进行覆盖
jq：可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>页面加载事件</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body><script>// js页面加载事件/* window.οnlοad=function () {alert('js加载事件1');}window.οnlοad=function () {alert('js加载事件2');}*/// jq页面加载事件$(function () {alert('jq加载事件1')})$(function () {alert('jq加载事件2')})
</script>
</body>
</html>
Jquery对象与dom对象的区别
Jquery选择器
基本选择器
标签（元素）选择器
* 语法：$(“html标签名”) 获得所有匹配标签名称的元素id选择器
* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素类选择器
* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>基本选择器</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body><span class="female">拉克丝</span>
<span class="female">辛德拉</span>
<span class="female hero">女刀锋</span><span class="male hero">钢铁侠</span>
<span class="male hero">超人</span><span id="boss">灭霸</span><script>// 1.获取span标签的jquery对象$('span')// 2.获取class有hero的jquery对象$('.hero')// 3.获得id="boss"的jquery对象$('#boss')
</script>
</body>
</html>
层级关系选择器
后代选择器
* 语法：$(“A B”) 选择A元素内部的所有B元素并集选择器
* 语法：$(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>层级关系选择器</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi"><span>儿子：雍正</span><p><span>孙子：乾隆</span></p>
</div>
<div>牛顿</div><script>// 1. 获取所有的p,span的文本console.log($('p span').text());//孙子：乾隆// 2. 获取div的后代span的文本console.log($('#kangxi span').text());//儿子：雍正 孙子：乾隆//3.获取div标签的文本console.log($('div').text()); // 儿子：雍正 孙子：乾隆 牛顿
</script>
</body>
</html>
属性选择器
属性选择器
* 语法：$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器复合属性选择器
* 语法：$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>属性选择器</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body><input type="text" name="username" value="用户名"/><br/><input type="text" name="nickname" value="昵称"/><br/><script>// 1.获取type='text'的input标签$('input[type="text"]');// 2.获取type='text' 且 name="nickname" 的input标签$('input[type="text"] [name="nickname"]');
</script>
</body>
</html>
过滤选择器
首元素选择器
* 语法： :first 获得选择的元素中的第一个元素尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素偶数选择器
* 语法： :even 偶数，从 0 开始计数奇数选择器
* 语法： :odd 奇数，从 0 开始计数指定索引选择器
* 语法： :eq(index) 指定索引元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>过滤选择器</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul><li>大娃（红娃）</li><li>二娃（橙娃）</li><li>三娃（黄娃）</li><li>四娃（绿娃）</li><li>五娃（青娃）</li><li>六娃（蓝娃）</li><li>七娃（紫娃）</li>
</ul><script>// 1.获取第一个元素$('li:first');// 2.获取偶数索引元素$('li:even');// 3.获取指定索引2的元素$('li:eq(2)');//获取大于索引2的元素$('li:gt(2)');
</script>
</body>
</html>
对象遍历
语法：
jq对象.each(function(index,element){})
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>对象遍历</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="city"><li>北京</li><li>上海</li><li>天津</li>
</ul><script>$('li').each(function (index, element) {console.log(index);console.log(element);console.log(element.innerHTML); // 遍历的元素是js对象console.log($(element).html()); // 升级为jq对象console.log(this); // 当前遍历的元素，相当于element 补充})
</script></body>
</html>
Jquery的dom操作
Jquery操作内容
text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性html(): 获取/设置元素的标签体超文本内容
* 相当于js： innerHTML属性
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>dom操作内容</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div><script>// 1.text()操作内容//获取纯文本的内容console.log($('#myDiv').text());//设置纯文本内容$('#myDiv').text('<h2>提莫一米五</h2>');//<h2>提莫一米五</h2>// 2.html()操作内容//获取超文本的内容console.log($('#myDiv').html());//设置超文本内容$('#myDiv').html($('#myDiv').html() + `<h2>提莫一米五</h2>`);//提莫一米五
</script>
</body>
</html>
Jquery操作属性
val()： 获取/设置元素的value属性值
* 相当于：js对象.valueattr(): 获取/设置元素的属性
removeAttr() 删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute()prop():获取/设置元素的属性
removeAttr() 删除属性
jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
例如：checked selected等
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>dom操作属性</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>爱好<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">打球<br/><input type="reset" value="清空按钮"/><input type="submit" value="提交按钮"/><br/>
</form><!--
1. val()： 获取/设置元素的value属性值* 相当于：js对象.value2. attr(): 获取/设置元素的属性removeAttr() 删除属性* 相当于：js对象.setAttribute() / js对象.getAttribute()3. prop():获取/设置元素的属性removeAttr() 删除属性jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作例如：checked selected等
--><script>// 1.获取文本框value属性console.log($('#username').attr('value'));//查看$('#username').attr('value', '盖伦');//新增or修改$('#username').removeAttr('value'); // 删除// 2.获取爱好的checked属性console.log($('#hobby').prop('checked'));//true【如果该属性存在返回true，该属性不存在返回false】
</script>
</body>
</html>
Jquery操作样式
直接修改jq对象样式属性
语法：
jq对象.css()
css(样式名) 获取
css(样式名,样式值) 设置
优点：支持css语法
举例：font-size添加/删除jq对象样式
语法：
jq对象.addClass()
jq对象.removeClass()切换jq对象样式
语法：
jq对象.toggleClass() 无添加，有删除
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>dom操作样式</title><script src="../js/jquery-3.2.1.min.js"></script><style>#p1 {background-color: red;}.mp {color: green}.mpp {background-color: lightgray;}</style></head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4.<button id="toggle">切换</button>class样式
</p><script>let $p1 = $('#p1');//获取p1let $p2 = $('#p2');//获取p2let $p3 = $('#p3');//获取p3let $p4 = $('#p4');//获取p4// 1. 设置一个css样式$p1.css('background-color', "red");// 2. 批量设置css样式$p2.css({'border': '1px solid red', 'font-size': '20px'});// 3. 通过class设置样式$p3.addClass('mp mpp');$p3.removeClass('mpp');// 4. toggleClass() 切换一个class$('#toggle').click(function () {$p4.toggleClass('mpp')})
</script></body>
</html>
Jquery操作元素
$(标签) 创建一个标签
$(‘- xxx
- ’)
$.prepend() 在父标签中将子标签放在第一个位置
$.append() 在父标签中将子标签放在最后一个位置
$.empty() 清空子元素
$.remove() 删除自己
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>dom操作元素</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star"><li>拉克丝</li><li>金克斯</li>
</ul><script>//let $star = $('#star'); // 无序列表// 1.前面添加马尔扎哈$('#star').prepend($('<li>马尔扎哈</li>'))// 2.后面添加风女$('#star').append($('<li>风女</li>'))// 3.移出所有列表项$('#star').empty();// 4.删除无序列表$('#star').remove();
</script>
</body>
</html>
Jquery绑定事件
js对象.事件属性=function(){}
jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>jq事件绑定</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br><script>// js事件绑定document.getElementById('jsBtn').onclick=function () {alert('js事件绑定')}// jq事件绑定$('#jqBtn').click(function () {alert('jq事件绑定')})
</script>
</body>
</html>
案例练习
隔行换色
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>01-案例-隔行变色</title><script src="../js/jquery-3.2.1.min.js"></script></head>
<body>
<table id="tab1" border="1" width="800" align="center" ><tr bgcolor="#ffd770"><th width="100px" ><button id="toggle">全选</button></th ><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>5</td><td>牛奶制品</td><td>牛奶制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>6</td><td>大豆制品</td><td>大豆制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>7</td><td>海参制品</td><td>海参制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>8</td><td>羊绒制品</td><td>羊绒制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>9</td><td>海洋产品</td><td>海洋产品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>10</td><td>奢侈用品</td><td>奢侈用品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr>
</table>
<script>//隔行换色$(`tr:gt(0):even`).css('background-color', 'skyblue');//偶数索引，奇数行$(`tr:gt(0):odd`).css('background-color', 'pink');//奇数索引，偶数行let oldcolor;//鼠标移入事件$('tr:gt(0)').mouseover(function () {//记录之前的颜色oldcolor = $(this).css('background-color');//设置新的颜色$(this).css('background-color', 'red');});//鼠标移出事件$('tr:gt(0)').mouseout(function () {oldcolor = $(this).css('background-color', oldcolor);});//设置开关按钮$('#toggle').click(function () {$('input[type="checkbox"]').each(function (index, element) {element.checked = !element.checked;})})
</script></body>
</html>
商品全选
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>案例-商品全选</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选1. 全选 点击全选按钮,所有复选框都被选中2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script>//全选【ID选择器记得加#】$('#btn1').click(function () {$(`input[type="checkbox"]`).prop('checked', true);});//反选，必须遍历$('#btn2').click(function () {$('input[type="checkbox"]').each(function (index, element) {//element是js对象//使用的是js的方式element.checked = !element.checked;})})</script>
</body>
</html>
QQ表情选择
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>QQ表情选择</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.emoji {margin: 50px;}ul {overflow: hidden;}li {float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img {cursor: pointer;}</style><script src="../js/jquery-3.2.1.min.js"></script></head>
<body>
<div class="emoji"><ul><li><img src="../img/01.gif" height="22" width="22" alt=""/></li><li><img src="../img/02.gif" height="22" width="22" alt=""/></li><li><img src="../img/03.gif" height="22" width="22" alt=""/></li><li><img src="../img/04.gif" height="22" width="22" alt=""/></li><li><img src="../img/05.gif" height="22" width="22" alt=""/></li><li><img src="../img/06.gif" height="22" width="22" alt=""/></li><li><img src="../img/07.gif" height="22" width="22" alt=""/></li><li><img src="../img/08.gif" height="22" width="22" alt=""/></li><li><img src="../img/09.gif" height="22" width="22" alt=""/></li><li><img src="../img/10.gif" height="22" width="22" alt=""/></li><li><img src="../img/11.gif" height="22" width="22" alt=""/></li><li><img src="../img/12.gif" height="22" width="22" alt=""/></li></ul><p id="word"><strong>请发言：</strong><img src="../img/12.gif" height="22" width="22" alt=""/></p>
</div><script>//class选择器$('.emoji img').click(function () {//alert('1');//append表示向ID为word中追加内容，this代表的是当前 img标签 clone是克隆【将克隆的img追加进来】$('#word').append($(this).clone());})</script></body>
</html>
Jquery的高级进阶、以及使用教程相关推荐
- 单片机入门到高级进阶路径(附教程+工具）
一.先帮大家解答几个问题: 1. 单片机是什么? 答:单片机就是一个微型CPU,把程序烧录芯片里面,通过控制不同的外围电路实现不同产品的功能. 2. 学单片机编程对数学英语有要求吗? 答:数学会基本的 ...
- python高级教程_Python高级进阶教程
这个系列的教程是在刘金玉编程的<零基础python教程>基础上的高级进阶应用. 教程列表: Python高级进阶教程001期 pycharm+anaconda3+pyqt5可视化界面开发环 ...
- 一本好书 C++高级进阶教程
PS:这是shx为我推荐的, <C++高级进阶教程_checklist by 66> 66一 第1章 C++基础知识 1.1 关于C++标准 1.2 文字常量和常变量 1.3 const的 ...
- ES系统封装教程 高级进阶版 提供Wind7，xp系统下载 （by 星空武哥）
重新改了一下,由于一些地址链接有问题,现在所有下载软件都已经没问题了. 欢迎访问我的博客http://blog.csdn.net/lsyz0021 ES系统封装教程 高级进阶版,提供我自己封装的Wi ...
- k8s之Pod详解（五）【Kubernetes(K8S) 入门进阶实战完整教程，黑马程序员K8S全套教程（基础+高级）】
参考于Kubernetes(K8S) 入门进阶实战完整教程,黑马程序员K8S全套教程(基础+高级) Pod Pod的结构 每个Pod中都可以包含一个或者多个容器 这些容器可以分为两类: 用户自定义用的 ...
- Git log diff config高级进阶
Git 历史相关和 git config 高级进阶 前一段时间分享了一篇<更好的 git log>简要介绍怎么美化 git log 命令,其中提到了 alias命令,今天再继续谈谈 git ...
- Flutter高级进阶实战 仿哔哩哔哩APP学习笔记
Flutter高级进阶实战 仿哔哩哔哩APP学习笔记 近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
- shell编程，实战高级进阶教学
shell编程从入门到高级教程 一.shell编程初识 1.1 shell能做什么 1. 自动化批量系统初始化程序 (update,软件安装,时区设置,安全策略...) 2. 自动化批量软件部署程序 ...
- JAVA网格化服务架构,高级进阶必看 Java服务网格化系列-Kubernetes
Java开发的前景毋庸置疑,一直处于编程排行榜首位的Java语言,吸引越来越多的年轻人去学习这门有含金量的技术,对于有基础的学习者或者开发者来说,进阶学习更深入的知识对未来的职业发展非常有帮助,然而能 ...
最新文章
- Nokia House”或“NoHo
- oracle的tns错误,Oracle TNS-12514错误的解决步骤
- [PCB设计] 1、硬件原理图设计规范（一）——基本原则
- java分子分母题,JAVA黄金分割点练习题
- iOS开发实例 | Demo：数独小游戏
- amazeUI的icon图标库
- (附源码)springboot宠物管理系统 毕业设计121654
- matlab线性方程组求解
- pcap头文件位置 Linux,pcap文件头的组织格式
- As I Please--PartⅠ
- 【c语言学习课堂笔记第三天】：int函数有符号整型和无符号整型
- UserWarning: torch.meshgrid: in an upcoming release, it will be required to pass the index ing argu
- 编写代码实现：模拟用户登入情景
- linux 防火墙 阻止ip_linux iptables防火墙如何禁止指定IP访问
- matlab怎么画极轴,matplotlib常见图表绘制——极坐标图-雷达图、极轴图
- 类的静态数据成员和静态成员函数浅析
- python字符串索引局部变量_4. 列表一学完，Python 会一半，滚雪球学 Python【七日打卡】...
- dockerfile gosu 解释
- 《C++ 开发从入门到精通》——2.2 分析C++的程序结构
- 张总让我去维护一团屎山，我去了......