前端之jQuery
2022-03-15 22:12
2735 查看
前端之jQuery
[toc]
1. jQuery介绍
jQuery是一个
JavaScript库。它封闭了原生的js代码,能够在书写更小的代码完成js操作。类似
Python中的模块,但是在前端中叫类库。
它兼容多个浏览器。
jQuery的宗旨:
write less do more
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> //jquery ID选择器 $('#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.3 自定义模态框
<!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')
相关文章推荐
- 前端JQuery 插件URL
- 从零开始,学习web前端之jQuery
- Web前端校验之jquery.validate(一)
- input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
- 【前端插件】jQuery下拉列表插件jQselectable
- 前端之jquery常见方法
- 前端模板引擎(jQuery模板)jsrender的基本教程
- 常用的jQuery前端技巧收集
- 常用的jQuery前端技巧收集
- 前端基础-jQuery的事件的用法
- 前端程序员应该知道的 15 个 jQuery 小技巧
- 转:精美jQuery插件及源码 前端开发福利
- 网站建设中前端常用的jQuery+easing缓动的动画
- 【jquery前端开发】可调整的幻灯片(图片轮播)
- web前端,jquery实现列表点击条目改变样式并拿到属性值总结3data-*
- JS + HTML + JQUERY + CSS WEB前端技术积累
- 前端-高潮 jQuery
- [置顶] web前端开发技巧(HTML+CSS+Jquery)
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(创建jquery空对象)
- 前端——JQuery基础