操作标签
操作类
/*
js jQuery
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
*/
css操作
<p>111</p>
<p>222</p>
<script>
$('p').first().css('color','pink').next().css('color','lightskyblue')
// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
/*
类似于jQuery的链式操作
class MyClass(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
*/
</script>
位置操作
// offset() 相对于浏览器窗口
// position() 相对于父标签
// scrollTop() 滚动条到页面顶部的距离 用来实现回到顶部的样式
// scrollLeft() 滚动条到页面左端的距离
尺寸
/*
获取纯文本的宽高
$('p').height()
$('p').width()
获取文本+padding之后的宽高
$('p').innerHeight()
$('p').innerWidth()
获取文本+padding+border之后的宽高
$('p').outerHeight()
$('p').outerWidth()
*/
文本操作
/*
js jQuery
innerText text() 括号中不写参数为获取值，写参数为设置值
innerHTML html() 同样也能够始别文本跟html
*/
$('div').text()
$('div').text('设置值')
$('div').html()
$('div').html('<h1>能够始别html</h1>')
获取值操作
/*
js jQuery
.value .val()
*/
$('#d1').val()
//"sasdasdsadsadad"
$('#d1').val('520快乐') // 括号内不加参数就是获取加了就是设置
//获取文件时
$('#d2').val()
"C:\fakepath\01_测试路由.png"
$('#d2')[0].files[0] // 牢记两个对象之间的转换(将jQuery对象转成标签对象)
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
属性操作
/*
js jQuery
setAttribute() attr(name,value) //添加属性
getAttribute() attr(name) //查看属性
removeAttribute() removeAttr(name) //移除属性
用变量存储对象时：
js推荐使用 xxxEle来存储标签对象
jQuery推荐使用 $xxxEle来存储jQuery对象
*/
let $pEle = $('p')
//undefined
$pEle.attr('id')
//"d1"
$pEle.attr('class','c1')
//w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
//w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('pwd','123')
//w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('pwd')
//w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
/*
对于标签上能够直接看到的属性或者自定义属性使用attr
对于checkbox、radio、option等以返回布尔值是否被选中的用prop
*/
$('#d2').prop('checked') //用法与attr相同，只不过第二个参数为布尔值
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
//w.fn.init [input#d3]
$('#d3').prop('checked',false)
//w.fn.init [input#d3]
文档处理
/*
js jQuery
createElement('p') $('<p>') //创建标签
appendChild() append() //添加标签
insertBefor() before() //将标签添加到指定标签的前面
*/
let $pEle = $('<p>')
$pEle.text('文档处理之添加标签')
$('#d1').append($pEle) // 内部尾部追加
//w.fn.init [div#d1]
$('#d1').prepend($pEle) //内部头部追加
//w.fn.init [div#d1]
$pEle.prependTo($('#d2')) //内部头部追加
//w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [p]__proto__: Object(0)
$('#d2').after($pEle) //放在某个标签后面
//w.fn.init [p#d2]
$pEle.insertAfter($('span')) //放在某个标签后面
//w.fn.init [p, prevObject: w.fn.init(1)]
$('span').before($pEle) //放在某个标签前面
//w.fn.init [span, prevObject: w.fn.init(1)]
$('span').remove() //移除标签，本身标签连带着内部的后代标签都被移除
//w.fn.init [span, prevObject: w.fn.init(1)]
$('#d1').empty() //清空标签内部所有内容 本身标签不被移除
事件
//绑定事件的两种方法
//方法一
$('#d1').click(function(){
alert(111)
})
//方法二(功能更加的强大，能支持事件委托)
$('#d2').on('click',function(){
alert(222)
})
克隆事件
<!--
clone() 复制标签本身，
clone(true) 复制标签及其绑定的事件
-->
<style>
#d1 {
height: 100px;
width: 100px;
background-color: orange;
border: 1px solid blue;
}
</style>
<button id="d1">点点点</button>
<script>
$('#d1').on('click',function () {
// console.log(this); // this指代是当前被操作的标签对象
// clone默认情况下只克隆html和css 不克隆事件
// $(this).clone().insertAfter($('body'))
$(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件
})
</script>
自定义模态框
<style>
#d2 {
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
text-align: center;
color: white;
}
#d3 {
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
width: 500px;
height: 200px;
transform: translate(-50%, -50%);
background-color: white;
text-align: center;
}
.hide {display: none}
</style>
<div id="d1">这是底层</div>
<button id="btn">打开模态框</button>
<div id="d2" class="hide"><p>这是模态框</p></div>
<div id="d3" class="hide"><p>这是顶层</p><button id="btn2">关闭模态框</button></div>
<script>
$('#btn').click(function () {
$('#d2').removeClass('hide');
$('#d3').removeClass('hide')
});
$('#btn2').click(function () {
$('#d2').addClass('hide');
$('#d3').addClass('hide');
})
</script>
左侧菜单
<style>
.hide {display: none;}
</style>
<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')
//jQuery链式操作
$(this).find('.items').removeClass('hide')
.parent().siblings().find('.items').addClass('hide')
})
</script>
返回顶部
<style>
.hide {
display: none;
}
#d1 {
position: fixed;
background-color: black;
right: 20px;
bottom: 20px;
height: 50px;
width: 50px;
}
</style>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d1" class="hide"></div>
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 100){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
});
$('#d1').click(function () {
$(window).scrollTop(0)
})
// $('#d1').click(function () {
// $('body,html').animate({ //添加动画，0.8秒到达顶部
// scrollTop:0
// },800)
// })
</script>
自定义登录校验
<style>
.error {
color: red;
font-size: 12px;
display: block;
}
</style>
<form action="">
<div>
<label for="username">用户名</label>
<input type="text" on id="username" name="username">
<span class="error" id="errorUser"></span>
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password" name="password">
<span class="error" id="errorPass"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script>
$('#username').blur(function () {
let username = $("#username").val();
if (!username){
$('#errorUser').text("用户名不能为空")
}else {
$('#errorUser').text("").focus()//获取焦点并清空文本
}
});
$('#password').blur(function () {
let password = $("#password").val();
if (!password){
$('#errorPass').text("密码不能为空")
}else {
$('#errorPass').text("").focus()
}
});
</script>
//input实时监控
$('#username').on('input', function () {
$('#errorUser').html('')
});
$('#password').on('input', function () {
$('#errorPass').html('')
})
hover事件
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover( //支持设置两个函数，分别实现鼠标悬浮跟鼠标移开时的效果
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
键盘按键按下事件。
<!--将按下的键对应的ascii码返回-->
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
阻止后续事件执行
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行 方式1
// return false
// 阻止标签后续事件的执行 方式2
// e.preventDefault()
})
</script>
阻止事件冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
事件委托
<button>是兄弟，就来砍我!!!</button>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () { // 无法影响到动态创建的标签
// alert(123)
// })
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]
补充
# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
