jq(事件)
绑定方法
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="d1">A</button>
<button id="d2">B</button>
<script>
//第一种
$('#d1').click(function (){alert('AAAAAAAAAAAA')})
//第二种
$('#d2').on('click',function (){alert('BBBBBBBBBBBBBB')})
</script>
</body>
克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#d1{
height: 100px;width: 100px;border-radius: 50%;
background: red;
border: 2px solid green;
}
</style>
</head>
<body>
<button id="d1">A</button>
<button id="d2">B</button>
<script>
$('#d1').on('click',function (){
//默认只克隆css、html，不克隆csript
// $('#d1').clone().insertBefore($('#d2'))
//加参数克隆script
$('#d1').clone(true).insertBefore($('#d2'))
})
</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.4.1/jquery.min.js"></script>
<style>
.cover{
position: fixed;
background: rgba(75, 71, 71, 0.6);
z-index: 99;
top:0;left: 0;right: 0;bottom: 0;
}
.modal{
background: white;
border: 1px solid black;
height: 130px;width: 200px;
position: fixed;top:40%;left: 40%;
z-index: 100;
}
.hide{display: none}
</style>
</head>
<body>
<div>我是底层</div>
<div id="d1" class="cover hide"></div>
<button id="b1">login</button>
<div id="d2" class="modal hide">
name:<input type="text">
pwd:<input type="password">
<button id="b2">ok</button>
<button id="b3">cencel</button>
</div>
<script>
$d1Ele = $('#d1')
$d2Ele = $('#d2')
$b1Ele = $('#b1')
$b2Ele = $('#b2')
$b3Ele = $('#b3')
$b1Ele.click(function (){
$d1Ele.removeClass('hide');
$d2Ele.removeClass('hide')}
)
$b3Ele.on('click',function (){
$d1Ele.addClass('hide');
$d2Ele.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.4.1/jquery.min.js"></script>
<style>
body{margin: 0}
.menu{
float: left;
height: 100%;width: 10%;
background: yellow;
position: fixed;
}
.title{
font-size: 20px;
text-align: center;
}
.items{
display: block;
}
.hide{display: none}
</style>
</head>
<body>
<div class="menu">menu
<div class="title">一一一
<span class="items" >111</span>
<span class="items" >222</span>
<span class="items" >333</span>
</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>
</body>
<script>
$('.title').click(function (){
$('.items').addClass('hide')
$(this).children().removeClass('hide')
})
</script>
</html>
美化菜单栏
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body{margin: 0}
#d1{background: yellow;
height: 20px;width: 20px;
position: fixed;
left: 100px;top: 100px;
}
.items{
width: 50px;height: 20px;
background: red;
position: absolute;
}
#d11{top: 20px}
#d12{top: 40px}
#d13{top: 60px}
.hide{display: none}
</style>
</head>
<body>
<div id="d1">
<div id="d11" class="items hide">首页</div>
<div id="d12" class="items hide">管理</div>
<div id="d13" class="items hide">顶部</div>
</div>
</body>
<script>
$('#d1').mouseenter(function (){
$('.items').removeClass('hide')
})
$('#d1').mouseleave(function (){
$('.items').addClass('hide')
})
</script>
scroll
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.hide{display: none}
#a1{
width: 30px;
height: 30px;
position: fixed;
left: 50px;
bottom: 50px;
background: black;
}
div{height: 50000px}
</style>
</head>
<body>
<div>
<a href="" id="a1" class="hide"></a>
</div>>
</body>
<script>
$(window).scroll(function (){
if($(window).scrollTop()>300){$('a').removeClass('hide')}
else{$('#a1').addClass('hide')}
})
$('#a1').click(function (){
$(window).scroll(0)
})
</script>
登录框
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div>
name:<input type="text" id="name">
<span style="color: red"></span>
pwd:<input type="password" id="pwd">
<span style="color: red"></span>
<button id="ok">ok</button>
</div>
</body>
<script>
$('#ok').click(function (){
let nameEle = $('#name').val()
let pwdEle = $('#pwd').val()
if (!nameEle){$('#name').next().text('请输入用户名')}
if (!pwdEle){$('#pwd').next().text('请输入密码')}
})
$('input').focus(function (){
$(this).next().text('')
})
</script>
input框实时检测
<body>
<input type="text" id="i1">
</body>
<script>
$('#i1').on('input',function (){console.log(this.value)})
</script>
阻止后续事件执行
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
<span></span>
<input type="submit">
<script>
//第一种
$('input').click(function (){
$('span').text('aaaaaaaaaaa')
return false
})
//第二种
// $('input').click(function (e){$('span').text('bbbbbb')
// e.preventDefault()
// })
</script>
</form>
</body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>
div>p>span
</span>
</p>
</div>
<script>
//第一种
$('span').click(function (){alert('span');return false})
$('p').click(function (){alert('p');return false})
$('div').click(function (){alert('div')})
//第二种
// $('span').click(function (e){alert('span');e.stopPropagation()})
// $('p').click(function (e){alert('p');e.stopPropagation()})
// $('div').click(function (){alert('div')})
</script>
</body>
动画效果
$('div').hide(3000)
$('div').show(3000)
$('div').slideUp(3000)
$('div').slideDown(3000)
$('div').fadeOut(2000)
$('div').fadeIn(2000)
$('div').fadeTo(2000,0.4)
each
$('div').each(function(index){console.log(index)})
$('div').each(function(index,obj){console.log(index,obj)})
$.each([111,222,333,],function(index,obj){console.log(index,obj)})
