爱站程序员基地前端之jQuery
[toc]
1. jQuery介绍
jQuery
是一个
JavaScript
库。它封闭了原生的js代码，能够在书写更小的代码完成js操作。类似
Python
中的模块，但是在前端中叫类库。
它兼容多个浏览器。
jQuery
的宗旨:
write less do more
jQuery官方网站
1.1 jQuery版本
- 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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
jQuery
版本选择
3.x
的版本，下载时有里有压缩和不压缩之分，在生产环境使用压缩版本。
1.2 jQuery导入
jQuery
需要导入才能使用
本地导入:<head><script src=\'jquery-3.6.0.min.js\'></script></head>网络导入免费jquery CDN网站:https://www.bootcdn.cn/jquery/<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1.3 jQuery基本语法
jQuery(选择器).action() 这么写比较复杂 jQuery可以简写为$$(选择器).action()
原生
js
代码和
jQuery
代码对比
// jS代码:let pEle = document.getElementsByTagName(\'p\')[0]pEle.style.color=\'green\'// jQuery代码:jQuery(\'p\').css(\'color\',\'blue\')
1.4 jQuery中查找标签
1.4.1 基本选择器
//html代码:<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div id="d1"></div><p class="c1">春来江水绿如蓝</p><span></span></body>//jqueryID选择器$(\'#d1\')类选择器$(".c1")标签选择器$(\'span\')//jquery取的值为jquery对象, 表现形式为数组。jQuery对象变成标签对象:$(\'#d1\')[0] //因为为数组可以切片取值标签对象转jquery对象：使用$()括号起来就行：$(document.getElementById(\'d1\'))
1.4.2 组合选择器
//HTML代码<body><div id="d1">div<span>div-->span</span><p id="d2">div-->p<span>div-->p-->span</span></p><span>div-->span</span></div><div class="c1"></div></body>// jquery代码:$(\'div#d1\') // 找id为d1的div标签$(\'div.c1\') // 找class为c1的div标签$(\'#d1,.c1,p\') // 同一级别 id为d1的标签,class为c1的标签和p标签$(\'div span\') //后代$(\'div>span\') //儿子$(\'div+span\') //毗邻$(\'div~span\') //弟弟这些选择器和CSS的一模一样。
1.4.3 基本筛选器
//HTML代码<body><ul><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li class="c1">106</li><li>107</li><li id="d1">108</li><li>109</li></ul></body>//jquery:$(\'ul li:first\') //第一个元素标签$(\'ul li:last\') //最后一个元素标签$(\'ul li:eq(2)\') //索引值是2的标签$(\'ul li:even\') //索引值是偶数的标签(包含0)$(\'ul li:odd\') //索引值是奇数的标签$(\'ul li:gt(2)\') //索引值大于2的标签$(\'ul li:lt(2)\') //索引值小于2的标签$(\'ul li:not("#d1")\') //取反，id不是d1的标签//HTML<div><p>div--p</p></div><div>div not p</div>//jquery:$(\'div:has("p")\') //div里有p标签的 has包含 有
1.4.4 属性选择器
//HTML<body><input type="text" username="hello"><input type="text" username="hi"><p username="hello"></p></body>//jQuery:$(\'[username]\') //有username的标签$(\'[username="hi"]\') //有username并且等于hi的标签$(\'p[username="hello"]\') //username等于hello的p标签
1.4.5 表单筛选器
//HTML<body><p>username<input type="text" ></p><p>password<input type="password" ></p><button>提交</button></body>//jquery:$(\'input[type="text"]\') //input标签里类型是text的$(\'input[type="password"]\') //input标签里类型是password的//上面的写的法有点复杂在表单筛选器中，可以简写$(\':text\')$(\':password\')//还有一些简写：$(\':file\')$(\':radio\')$(\':checkbox\') //使用时它不仅会拿到checked也会把selected也能拿到，如果只想拿到checked则加一些条件限制一下$(input:checked)$(\':submit\')$(\':reset\')$(\':button\')上面的只可以在表单筛选器中使用
1.4.6 筛选器方法
<body><!--<p>username<input type="text" ></p>--><!--<p>password<input type="password" ></p>--><!--<button>提交</button>--><span id="d1">span</span><span>span</span><div id="d2"><span>div-->span</span><p>div-->p<span id="d3">div->p->span</span></p><span>div-->span</span></div><span>span</span><span>span</span><span class="c1">span</span></body>// jQuery代码:$(\'#d1\').next() //同级别下一个$(\'#d1\').nextAll() //同级下面的全部$(\'#d1\').nextUntil(\'.c1\') //下面到class为c1为止(不包含c1)$(\'.c1\').prev() //同级别上一个$(\'.c1\').prevAll() // 上面的全部$(\'.c1\').prevUntil(\'#d2\') //上面到id 为d2的为止$(\'#d3\').parent() // 父标签$(\'#d3\').parent().parent() // 父标签的父标签$(\'#d3\').parents() //全部父标签(祖谱)$(\'#d3\').parentUntil(\'body\') // 查找父标签到body为止$(\'#d2\').children() // 子标签$(\'#d2\').siblings() // 全部同级别(上下都包含)标签(兄弟标签)$(\'div\').find(\'p\') // find在某个区域内找P标签和$(\'div p\')一样$(\'div span\').first() //div中第一个span标签$(\'div span\').last() //div中最后一个span标签$(\'div span\').not(\'#d3\') // /div中全部不包含id为d3的span标签
1.5 操作标签
操作类
| js版本 | jQuery版本 | 含义 |
|---|---|---|
| classList.add() | addClass() | 增加 |
| classList.remove() | removeClass() | 删除类 |
| classList.contains() | hasClass() | 是否包含 |
| classList.toggle() | toggleClass() | 有删除，没有就添加 |
jQuery的链式操作
<body><p>AAA</p><p>BBB</p></body>//一行代码把AAA变成红色，BBB变成蓝色$(\'p\').first().css(\'color\',\'red\').next().css(\'color\',\'blue\')jQuery操作css样式： .css()jQuery操作jQuery对象返回的还是jQuery对象那么还可以继续操作
获取当前标签的位置
$(\'p\').offset() //获取标签在窗口中的偏移量$(\'p\').position() //获取标签针对父标签的偏移量$(windows).scrolltop() //获取垂直滚动条位置$(windows).scrolltop(500) //
尺寸
$(\'p\').height() //文本的高度$(\'p\').width() //文本的宽度$(\'p\').innerHeight() // 文本+padding$(\'p\').innerWidth()$(\'p\').outerHeight() //文本+padding+border$(\'p\').outerWidth() //
文本操作
| js版本 | jQuery版本 | 含义 |
|---|---|---|
| innnerText() | text() | 获取文本(不加载样式)，如果括号里面有值则为设置 |
| innerHtml() | html() | 获取文本(加载样式)，如果括号里面有值则为设置 |
| .value | .val() | 获取值，如果括号里有值则设置 |
示例:
//HTML<body><p>AAA</p></body>$(\'p\').text() //获取文本$(\'p\').text("HHHH") //设置文本$(\'p\').text("<h1>AAAA</h1>") //原样输出$(\'p\').html()//获取文本$(\'p\').html("<h1>AAAA</h1>") //设置本(有样式)// 获取输入值：<body><input type="text" id="d1"></body>$(\'#d1\').val()"asdf"// 获取上传的文件：<body><input type="file" id="d1"></body>$(\'#d1\')[0].files[0]
属性操作
| js版本 | jQuery版本 | 含义 |
|---|---|---|
| setAttribute() | attr(name,value) | 设置属性 |
| getAttribute() | attr(name) | 获取属性 |
| removeAttribute() | removeAttr(name) | 删除属性 |
let $pEle=$(\'p\')$pEle.attr(\'id\') //获取id的属性"d1"$pEle.attr(\'class\') //获取class的属性$pEle.attr(\'class\' ,\'c1\') //设置class的属性$pEle.removeAttr(\'class\') //删除class的属性/*对于标签上有的能够看到的属性和自定义属性用attr对于返回布尔值的如:checkbox radio option是否被选中的用prop*/$(\'#d2\').prop(\'checked\') //获取$(\'#d2\').prop(\'checked\',true) //选中$(\'#d2\').prop(\'checked\',false) // 取消选中
文档处理
createElement() $(\'<p>\')appendChild() append()//HTML:<div id="d2"><span>div-->span</span><p>div-->p<span id="d3">div->p->span</span></p><span>div-->span</span></div>//jquery代码:let $pEle=$(\'<p>\') //新创建一个p标签$pEle.text("Hello World") //给这个P标签加文本$pEle.attr(\'id\',\'i1\') //给这个P标签设置id为i1$(\'#d2\').append($pEle) //在id为d2的标签最后面加上这个p标签$pEle.appendTo($(\'#d1\')) //这个和上面的命令作用一样，把这个p标签加到id为d2的标签里面$(\'#d2\').prepend($pEle) //在头部追加$pEle.prependTo($(\'#d1\'))$(\'#d3\').after($pEle) //在某个标签的后面$pEle.afterTo($(\'#d3\'))$(\'#d3\').before($pEle) //在某个标签的前面$pEle.beforeTo($(\'#d3\'))$(\'#d2\').remove() //从DOM树中删除标签(包含里面的全部标签)$(\'#d2\').remove() //清空标签内部所有的内容
2. jQuery 事件
2.1 绑定事件
<body><button id="d1">Hello</button><button id="d2">Hi</button><script>//第一种绑定方法$(\'#d1\').click(function (){alert("Hello World")})// 第二种绑定方法$(\'#d2\').on(\'click\', function (){alert("Hi World")})</script></body>// 第二种绑定方法更强大，它还支持事件委托
2.2 克隆事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><style>#d1 {height: 100px;width: 100px;background-color: lightblue;border:1px solid red;}</style></head><body><button id=\'d1\'>一入江湖岁月枯</button><script>$(\'#d1\').on(\'click\',function (){$(this).clone().insertAfter($(\'body\'))//把操作的这个对象插入到body的后面})</script></body></html>// this 指代的是当前被操作的标签对象// clone 默认情况下只克隆html和css样式，不克隆事件。// 就是克隆出来的对象点击时它是无法创建对象的。// 如果要把事件也克隆出来则需要给clone()转个true参数<script>$(\'#d1\').on(\'click\',function (){$(this).clone(true).insertAfter($(\'body\'))})</script>//加上后克隆出来的对象点击时它就可以创建对象了。
2.３ 自定义模态框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><style>body {margin: 0;}.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0,0,0,0.5);z-index: 99;}.modal{background-color: white;height: 200px;width: 400px;position: fixed;left: 50%;top: 50%;z-index: 100;margin-left: -200px;margin-top: -100px;padding-left: 10px;z-index: 100;}.hide {display: none;}</style></head><body><div id="d1">最底层</div><button id="d2">弹出窗口</button><div id="d3" class="cover hide"></div><div id="d4" class="modal hide"><p>username:<input type="text"></p><p>password:<input type="password"></p><input type="button" value="确认"><input type="button" value="取消" id="d5"></div><script>let $coverEle=$(\'.cover\')let $modalEle=$(\'.modal\')$(\'#d2\').click(function (){$coverEle.removeClass(\'hide\')$modalEle.removeClass(\'hide\')})$(\'#d5\').on(\'click\', function (){$coverEle.addClass(\'hide\')$modalEle.addClass(\'hide\')})</script></body></html>
2.4 左侧菜单栏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-<style>.left {float: left;background-color: darkgray;width: 20%;height: 100%;position: fixed;}.title{font-size: 36px;color: white;text-align: center;}.items{border: 1px solid black;}.hide{display: none;}</style></head><body><div class="left"><div class="menu"><div class="title"> 菜单一<div class="items">111</div><div class="items">222</div><div class="items">333</div></div><div class="title"> 菜单二<div class="items">111</div><div class="items">222</div><div class="items">333</div></div><div class="title"> 菜单三<div class="items">111</div><div class="items">222</div><div class="items">333</div></div></div></div><script>$(\'.title\').click(function (){//给所有的items加hide$(\'.items\').addClass(\'hide\')//将被 点击标签内部的hide移除$(this).children().removeClass(\'hide\')})</script></body></html>
2.5 返回顶部
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><style>.hide {/*border: 3px black solid;*//*background-color: orange;*//*position: relative;*/display: none;}#d1 {background-color: orange;position: fixed;border: 3px black solid;right: 20px;bottom: 20px;height: 50px;width: 50px;}</style></head><body><a href="", id="d1"></a><div style="height: 500px;background-color:lightblue"></div><div style="height: 500px;background-color:lightgreen"></div><div style="height: 500px;background-color:blue"></div><a href="#d1" class="hide">回到顶部</a><script>$(window).scroll(function (){if($(window).scrollTop()>100){$(\'#d1\').removeClass(\'hide\')}else {$(\'#d1\').addClass(\'hide\')}})</script></body></html>
2.6 自定义登录检验
//如果用户名或密码没有输入则提示<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><p>username:<input type="text" id="username"><span style="color: red"></span></p><p>password:<input type="password" id="password"><span style="color: red"></span></p><button id="d1">提交</button><script>let $userName=$(\'#username\')let $passWord=$(\'#password\')$(\'#d1\').click(function (){let userName = $userName.val()let passWord = $passWord.val()if(!userName){$userName.next().text("用户名不能为空")}if(!passWord){$passWord.next().text("密码不能为空")}})//把鼠标放到输入框中提示信息消失$(\'input\').focus(function (){$(this).next().text(\'\')})</script></body></html>
2.7 input框实时监控
<body><input type="text" id="username"><script>$(\'#username\').on(\'input\', function (){console.log(this.value)})</script></body>
2.8 鼠标悬浮
<body><p id="d2">测试悬浮</p><script>$(\'#d2\').hover(function (){alert(123)})</script></body>// hover是有两个事件组成，一个是鼠标悬浮一个是鼠标移开。// 如果只写一个函数则两个事件都用这一个。如果写两个函数，则悬浮和移开使用不同的函数<body><p id="d2">测试悬浮</p><script>$(\'#d2\').hover(function (){alert(123)},function (){alert(456)})</script></body>//如果只想让它弹出来一次，则让第二个函数为空
2.9 键盘按键事件
<script>$(window).keydown(function (event){console.log(event.keyCode)if (event.keyCode == 65) {alert("按下了a键")}})</script>// 监测在键盘上按下什么键
2.10 阻止后续事件执行
<body><form action=""><span id="d3" style="color: red"></span><input type="submit" id="d4"></form><script>$(\'#d4\').click(function (){$(\'#d3\').text("Hello")})</script></body>// 提交后显示这个hello，但是提交后hello闪而过，这就是因为它有后续事件阻止方法一:<body><form action=""><span id="d3" style="color: red"></span><input type="submit" id="d4"></form><script>$(\'#d4\').click(function (){$(\'#d3\').text("Hello")return false})</script></body>方法二:<script>$(\'#d4\').click(function (e){$(\'#d3\').text("Hello")e.preventDefault()})</script>
2.11 阻止事件冒泡
<body><div id="d5"> div<br><p id="d6"> div-->p<br><span id="d7">div-->p-->span</span></p></div><script>$(\'#d5\').click(function (){alert(\'div\')})$(\'#d6\').click(function (){alert(\'div--p\')})$(\'#d7\').click(function (){alert(\'div--p--span\')})</script></body>// 点击div-->p-->span 后上面的p和div也会弹出来(因为这三个标签是包含的，点了是里面的也会触发上面的)，不符合我们的预期。//解决方法:<script>$(\'#d5\').click(function (){alert(\'div\')})$(\'#d6\').click(function (){alert(\'div--p\')})$(\'#d7\').click(function (){alert(\'div--p--span\')//方法一：return false})</script>//方法二：<script>$(\'#d5\').click(function (){alert(\'div\')})$(\'#d6\').click(function (){alert(\'div--p\')})$(\'#d7\').click(function (e){alert(\'div--p--span\')//方法二：e.stopPropagation()})</script>
2.12 事件委托
<body><button>如何委婉的说你已经叛变了？</button><script>$(\'button\').click(function (){ //无法影响到动态创建的标签alert("皇军托我给你带个话")})</script></body>//动态增加一个button标签:let butEle=$(\'<button>\')butEle.text("委托")$(\'body\').append(butEle)//但新增加的这个按钮是没有办法弹出窗口的。如果也要弹出窗口，写法:<script>$(\'body\').on(\'click\', \'button\', function (){alert("皇军托我给你带个话") // 在指定范围内所有的点击事件都委托给button按钮触发})</script>
2.13 页面加载
等待页面加载完毕后再执行代码
//之前的方法:window.onload = function(){js代码}// jQuery中等待页面加载完后再执行://方法一:$(document).ready(function(){js代码})//方法二:$(function(){js代码})//方法三:直接写在body内部最后面
3. jQuery其他
3.1 动画效果
<div id="d8"><img src="img_1.png"></div>$(\'#d8\').hide(5000) //5秒钟隐藏$(\'#d8\').show(5000) //5秒钟出现$(\'#d8\').slideUp(5000) //5秒钟以滑动方式隐藏(自下而上)$(\'#d8\').slideDown(5000) // 5秒钟向下滑动$(\'#d8\').fadeOut(5000) //淡出可见$(\'#d8\').fadeIn(5000) //淡入已隐藏的元素$(\'#d8\').fadeTo(5000,0.4) //允许渐变为给定的不透明度（值介于 0 与 1 之间）
3.2 其他
// each$(\'div\').each(function(index){console.log(index)}) //拿索引$(\'div\').each(function(index,obj){console.log(index,obj)}) //拿索引和值$.each([1,2,3],function(index,obj{console.log(index,obj)})//data能够让标签帮我们存储数据，并且数据用户看不到$(\'div\').data(\'info\',\'Hello World\') //给所有div加一个info属性值是Hello World.//验证:$(\'div\').first().data(\'info\')Hello World//删除:$(\'div\').first().removeData(\'info\')
