操作标签
操作类
/*
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\')
"回来吧，我原谅你了!"