jQuery
操作标签
样式类操作
js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
$('div').hasClass('c1')
true
$('div').hasClass('c11') # 判断是否有
false
$('div').hasClass('c2')
true
$('div').removeClass('c1') # 删
$('div').addClass('c1')
$('div').toggleClass('c1') # 有则删 无则加
$('div').toggleClass('c1')
css操作
<p>111</p>
<p>222</p>
''一行代码将第一个p标签字体变为红色 第二个p标签字体变为橘色
$('p').first().css('color','red').next().css('color','orange')
S.fn.init [p, prevObject: S.fn.init(1)]
# 调用完jQuery方法后返回的依然是当前jQuery对象 因此可以继续再后面调用方法 链式操作
位置操作
offset()
$('p').offset() # 拿到标签的位置(相对于浏览器窗口的位置）
{top: 116, left: 100}
position()
$('p').position() # 拿到标签的位置（相对于父标签的偏移量）
scrollTop() # 需要掌握
$(window).scrollTop() # 括号内不加参数 就是获取页面右侧滚动条距离顶部的距离
2800
$(window).scrollTop(0) # 加了参数就是跳到指定距离
n.fn.init [Window]
scrollLeft() # Left跟Top一样 就是左右滚动条
尺寸
$('p').height() # 文本的尺寸
20.8
$('p').height(30) # 设置文本尺寸
S.fn.init [p, prevObject: S.fn.init(1)]
$('p').width(30)
S.fn.init [p, prevObject: S.fn.init(1)]
$('p').innerHeight() # 文本+padding
36
$('p').innerWidth()
34
$('p').outerHeight() # 文本+padding+border
36
$('p').outerWidth()
34
文本操作
'''
操作标签内部文本
js jQuery
innerText text()
innerHTML html()
# 跟js效果一模一样 只是名字不同
$('div').text() # 获取标签内部文本
"有些话 听听就过去了 不要在意 都是成年人!\n \n\n 下载视频\n \n "
$('div').html() # 获取标签内部标签加文本
"<p>有些话 听听就过去了 不要在意 都是成年人!</p>"
$('div').text('都是我的大宝贝') # 设置文本内容
'''
获取值操作
'''
js jQuery
.value .val() # ()内不加参数就获取值 加了就是设置值
'''
$('#d1').val() # 获取input框中的值
"wogan"
$('#d1').val('520快乐') # 往input框中填值
S.fn.init [input#d1]
$('#d1')[0].files[0] # 获取文件
属性操作
'''
js中 jQuery
setAttribute() addr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
在用变量存储对象的时候 js中推荐使用
xxxEle 标签对象
jQuery中推荐使用
$xxxEle jQuery对象
'''
let $pELe = $('p') # 如果获取的是jQuery标签对象 变量命名的时候最好用$xxxEle的命名方式 用来区分该对象到底是 标签对象还是jQuery对象
$pELe.attr('id') # 一个参数就是获取属性id的属性值
$pELe.attr('username', 'egon') # 两个参数就是 无则添加 有则修改
$pELe.removeAttr('class') # 删除属性
S.fn.init [p#d1, prevObject: S.fn.init(1)]
'''
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值 比如 checkbox radio option是否被选中用prop方法
'''
$('#d2').prop('checked') # 判断有没有被选中 有则true 无则false
false
$('#d3').prop('checked')
true
$('#d2').prop('checked',false) # 也可以手动更改true或false
'''
文档处理
'''
js jQuery
createElement('p') $('<p>')
appendChile() append()
'''
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$pEle[0]
<p id="d1">你好啊 草莓要不要来几个?</p>
$('#d1').append($pEle)
$pEle.appenTo($('#d1'))
$('#d1').prepend($pEle)
$pEle.prependTo($('#d1'))
$('#d2').after($pEle)
$pEle.insertAfter($('#d1'))
$('#d2').before($pEle)
$pEle.insertBefore($('#d1'))
# 删除标签 以及该标签里面的所有子标签
$('p')[1].remove()
# 清空标签 该标签还在
$('#d1').empty() == $('#d1').html("")
事件
$('#d1').click(function () {
alert("别说话 吻我")
})
$('#d2').on('click', function () {
alert('借我签')
})
克隆事件
<script>
$('#d1').on('click', function () {
$('#d1').clone().insertAfter($('body'))
})
</script>
自定义模态框（案例）
模态框内部本质就是给标签移除或者添加上hide属性
<!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>
.cover{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(128,128,128,0.4);
z-index: 99;
}
.modal{
position: fixed;
height: 200px;
width: 300px;
background-color: white;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
z-index: 100;
border: 3px darkgray solid;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>我是最下面的</div>
<button id="d1">给我出来</button>
<div class="cover hide"></div>
<div class="modal hide">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<input type="button" value="确认">
<input type="button" value="取消" id="d2">
</div>
<script>
let $coverEle = $('.cover')
let $modalEle = $('.modal')
$('#d1').on('click',function () {
$coverEle.removeClass('hide')
$modalEle.removeClass('hide')
})
$('#d2').click(function () {
$coverEle.addClass('hide')
$modalEle.addClass('hide')
})
</script>
</body>
</html>
返回顶部（案例）
<!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{
display: none;
}
#d1{
position: fixed;
background-color: black;
right: 20px;
bottom: 50px;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px; background-color: wheat"></div>
<div style="height: 500px; background-color: darkgray"></div>
<div style="height: 500px; background-color: yellowgreen"></div>
<a href="" id="d2">回到顶部</a>
<script>
$(window).scroll(function () {
if($(window).scrollTop()>200){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
$('#d2').on('click',function () {
$(window).scrollTop(0)
})
$('#d1').on('click',function () {
$(window).scrollTop(0)
})
</script>
</body>
</html>
自定义登录校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<!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').on('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>
input实时监控
<input type="text" id="d1">
<script>
$('#d1').on('input',function(){
console.log(this.value)
})
</script>
hover事件
$('#d1').hover(function () {
alert('我来了')
},function () {
alert('我溜了')
})
键盘按键按下事件
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if(event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
阻止后续事件执行
<body>
<form action="">
<span id="d1" style="color: red"></span>
<input type="submit" id="d2">
</form>
<script>
$(':submit').click(function () {
$('#d1').text('当当当 我出现了')
return false
})
</script>
</body>
阻止事件冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function () {
alert('span')
return false
})
事件委托
<script>
$('body').on('click','button',function () {
alert(123)
})
</script>
页面加载
# 等待页面加载完毕 再执行代码
''' jQuery等待页面加载完毕'''
# 第一种
$(document).ready(function(){
})
# 第二种
$(function(){
})
# 第三种
直接写在body内部最下方
动画效果
$('#d1').hide(3000)
$('#d1').show(5000)
$('#d1').slideUp(3000)
$('#d1').slideDown(3000)
$('#d1').fadeOut(3000)
$('#d1').fadeIn(3000)
$('#d1').fadeTo(3000,0.6)
补充
# each() 方法
'''使用一'''
$('div').each(function(index,obj){console.log(index,obj)})
VM190:1 0 <div></div>
VM190:1 1 <div></div>
VM190:1 2 <div></div>
VM190:1 3 <div></div>
VM190:1 4 <div></div>
VM190:1 5 <div></div>
VM190:1 6 <div></div>
VM190:1 7 <div></div>
VM190:1 8 <div></div>
VM190:1 9 <div></div>
VM190:1 10
'''使用二'''
$.each([11,22,33,44,55],function(index,obj){console.log(index,obj)})
VM685:1 0 11
VM685:1 1 22
VM685:1 2 33
VM685:1 3 44
VM685:1 4 55
'''有了each之后 就无需自己写for循环了 用它更加方便'''
# data()
'''
能够让标签帮我们存储数据 并且用户看不见
'''
$('div').data('info','用户看不见')
S.fn.init(12) [div, div, div, div, div, div, div, div, div, div, div#xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}.xl-chrome-ext-bar, div.xl-chrome-ext-bar__logo, prevObject: S.fn.init(1)]
$('div').first().data('info')
$('div').first().removeData('info')
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
