8
前端之jQuery - Hans_Wang
source link: https://www.cnblogs.com/hans-python/p/16010715.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端之jQuery
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.３ 自定义模态框
<!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')
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK