jquery
目录
使用JavaScript的一些疼处
让我们用一段代码来解释下使用JavaScript的一些疼处：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
100%;
height: 200px;
display: none;
background-color: red;
margin: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<button id="btn">展示</button>
<div></div>
<div></div>
<div></div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
console.log(btn)
var divs = document.getElementsByTagName('div');
console.log(divs)
window.onload = function(){
btn.onclick = function(){
for (var i=0;i<divs.length;i++) {
divs[i].style.display = 'block';
divs[i].innerHTML = 'div展示了'
}
}
}
</script>
</html>
当我们点击按钮的时候 盒子都出现了
在这段代码中，我们不免发现：
- 书写js繁琐 代码量大 仅仅1个动作就写了10多行代码
- 代码显的比较复杂 尤其是在定义DOM元素的时候
- 动画的效果我们需要开启定时器，还要小心定时器的清楚操作 还有各种操作和处理事件
- 浏览器的兼容性
但是jquery就解决了上面的问题,让我们来看下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
100%;
height: 200px;
display: none;
background-color: red;
margin: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<button id="btn">展示</button>
<div></div>
<div></div>
<div></div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*var btn = document.getElementById('btn');
console.log(btn)
var divs = document.getElementsByTagName('div');
console.log(divs)
window.onload = function(){
btn.onclick = function(){
for (var i=0;i<divs.length;i++) {
divs[i].style.display = 'block';
divs[i].innerHTML = 'div展示了'
}
}
}*/
//1.首先要在js前引入jquery,引入了之后我们就可以写jquery代码了
$(function(){
$('#btn').click(function(){
$('div').css('display','block');
$('div').html('div展示了')
})
})
</script>
</html>
效果是和之前的效果是一样的。
jquery的引入
JavaScript和jquery的区别
- JavaScript是一门编程语言，我们用它来编写客户端浏览器脚本
- jquery是JavaScript的一个库，包含多个可重用的函数，用来辅助我们简化JavaScript的开发
- jquery能做到的JavaScript都能做到，而JavaScript能做的事情，jquery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象。如果是构造函数，那么就使用new关键字来创建对象，如果是对象那么就直接调用它的属性和方法。
DOM文档加载的步骤
- 解析HTML结构
- 加载外部脚本和样式表文件 CSS
- 解析并执行脚本代码 windos.onload外面的脚本
- DOM树构建完毕
- 加载图片等外部文件
- 页面加载不同
从而，js和jq有三方面的不同:
执行时间不同
window.onload必须要等待页面内包括图片的所有元素加载完毕后才能执行
$(document).ready()是DOM结构回值完毕后就执行，不必等到加载完毕
# js代码最后解析的原因：如果没有获取完DOM树的话，那么解析js脚本就会得到null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box')
console.log(box)
}
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
编写个数不同
window.onload不能同时编写多个，如果有多个windos.onload方法，那么只会执行一个
$(document).ready()可以同时编写多个，并且都能得到执行
简化写法不同
windos.onload没有简化写法
$(document).ready()可以简化成$(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//$(document)取到文本元素 然后交给后面的回调函数function(){}执行
$(document).ready(function(){
})
</script>
</html>
jquery选择器的用法
jquery的基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li id="brother" class="item">泰然城1</li>
<li >泰然城2</li>
<li class="item">泰然城3</li>
<li>泰然城4</li>
<li class="item">泰然城5</li>
<li>泰然城6</li>
<li class="item">泰然城7</li>
<a href="#">百度一下</a>
</ul>
<div id="duanzi">
<p>天王盖地虎</p>
<p><h1>小鸡炖蘑菇</h1></p>
<p>宝塔镇河妖</p>
<p>蘑菇放辣椒</p>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.ID选择器 ：选中ID为brither的文本元素 并将元素修改成red
$(function(){
$('#brother').css('color','red')
})
//2.标签选择器 选中标签为a的文本元素 并将该元素下划线取消 颜色修改为yello
$(function(){
$('a').css({'text-decoration':'none','color':'yellow'})
})
//3.类选择器 选中类为item的文本元素 并将字体修改为20px
$(function(){
$('.item').css({'font-size':'20px'})
})
//4.通配符选择器* 选中所有文本元素 然后清空所有内容 这个不经常用
// $('*').html(' ')
</script>
</html>
jquery的层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li id="brother" class="item">泰然城1</li>
<li >泰然城2</li>
<li class="item">泰然城3</li>
<li>泰然城4</li>
<li class="item">泰然城5</li>
<li>泰然城6</li>
<li class="item">泰然城7</li>
<a href="#">百度一下</a>
</ul>
<div id="duanzi">
<p>天王盖地虎</p>
<p><h1>小鸡炖蘑菇</h1></p>
<p>宝塔镇河妖</p>
<p>蘑菇放辣椒</p>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.后代选择器 选中div的后代为p的文本元素 让颜色变成红色 注意：如果P标签里包含了其他元素，那么就不会生效
$(function(){
$('div p').css('color','red')
})
//2.子代选择器 选中div的子代为p的文本元素 让其背景颜色变成#333 注意： p标签中包含了其他元素，那么就不会生效
$(function(){
$('div>p').css('background','#333')
})
//3.毗邻选择器 选中以id为brother的邻居 li 然后将li标签的样式去掉
$(function(){
$('#brother+li').css('list-style','none')
})
//4.兄弟选择器 选中自己的兄弟的同级标签 然后修改颜色为red 注意：不包括自己
$(function(){
$('#brother~li').css('color','red')
})
//5. :first 选中所有Li标签中的第一个li标签文本元素 然后修改文字大小为30px
$(function(){
$('li:first').css('font-size','30px')
})
//6. :last 选中所有Li标签的最后一个Li标签文本元素 然后修改text属性
$(function(){
$('li:last').html('修改了')
})
</script>
</html>
jquery基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1. ：first 获取第一个元素
//2. :last 获取最后一个元素
//3.odd() 选中所有为基数的元素 第一个元素为0
$(function(){
$('li:odd').css('color','red')
})
//4.even() 选中所有为偶数的元素 第一个元素为0
$(function(){
$('li:even').css('color','green')
})
//5.eq(index) 选中所有第二个li标签 修改文本大小 注意：第一个元素为0
$(function(){
$('li:eq(2)').css('font-size','20px')
})
//6.gt(num) 选中给定大于num的标签 对其背景机型修改
$(function(){
$('li:gt(1)').css('background','#333')
})
//7.lt(num) 选中给定小于num的表亲啊 对其文本大小进行修改
$(function(){
$('li:lt(1)').css('font-size','12px')
})
</script>
</html>
jquery的属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.标签名[属性名] 查找所有含有id属性的该标签名的元素
$(function(){
$('li[id]').css('color','red')
})
//2.给定标签中的某个属性是否等于某个值 如果等于则将字体修改为20px
$(function(){
$('li[class=what]').css('font-size','20px')
})
//3. 给定标签的某个属性不等于某个值的时候 将背景修改为#333
$(function(){
$('li[class!=what]').css('background','#333')
})
//4. 给定标签的某个属性 以 xxx开头 修改背景颜色为绿色
$(function(){
$('input[name^=username]').css('background','green')
})
//5.给定标签的某个属性 以xxx结尾 修改背景颜色
$(function(){
$('input[name$=name]').css('background','#333')
})
//6. 给定标签 如果某个属性的值中包含xxx 那么就将背景颜色修改
$(function(){
$("button[class*='btn']").css('background','#0000FF')
})
</script>
</html>
jquery的筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.将所有span标签的中的 第1个标签修改文字大小
$(function(){
$('span').eq(0).css('font-size','30px')
})
//2.first()获取第一个元素
//3.last()获取最后一个元素
//4. 将span标签的父级元素 .p1 的css样式表修改为：
$(function(){
$('span').parent('.p1').css({'width':'300px',"height":'300px','background':'yellow'})
})
//5.选中类为list的标签的同级兄弟标签 修改CSS 注意：不包含自己
$(function(){
$('.list').siblings('li').css('color','red')
})
//6.find() 查找所有后代的元素
$(function(){
$('div').find('button').css('background','#333')
})
</script>
</html>
JavaScript的DOM对象和jquery对象的转换
DOM对象转换称为jquery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
100px;
height: 100px;
border: 1px solid red;
background-color: red;
}
</style>
</head>
<body>
<button>隐藏</button>
<div id="box">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//DOM对象转换称为jquery对象
var box = document.getElementById('box');
var btn = document.getElementsByTagName('button')[0];
$(btn).click(function(){
$(box).css('display','none')
})
</script>
</html>
点击按钮，盒子就会隐藏
jquery对象转换成DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
100px;
height: 100px;
border: 1px solid red;
background-color: red;
}
</style>
</head>
<body>
<button>隐藏</button>
<div id="box">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jquery对象转换称为DOM对象
//第一种方式
console.log($('button')[0])
//第二种方式
console.log($('button').get(0))
var isShow = true;
$('button').get(0).onclick = function(){
if (isShow) {
$('#box').css('display','none')
$('button')[0].innerText = '显示';
isShow = false;
} else{
$('#box').css('display','block')
$('button')[0].innerText = '隐藏';
isShow = true;
}
}
</script>
</html>
效果就是，点击了隐藏的按钮后，div盒子变没了，按钮上的字变成了显示，反之亦然。
jquery效果
jquery显示和隐藏效果
show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
callback:在动画完成时执行的函数，每个元素执行一次
hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏
toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
# 使用hide和show方法实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
}
div{
height: 200px;
200px;
border: 1px solid black;
background-color: red;
}
</style>
</head>
<body>
<button>点我隐藏</button>
<div id="box">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var isShow = true;
$(function(){
$('button').click(function(){
if (isShow) {
$('#box').hide('normal',function(){
$('button').html('点我开启')
isShow = false
})
} else{
$('#box').show('normal',function(){
$('button').html('点我隐藏')
isShow = true
})
}
})
})
</script>
</html>
# 使用toggle方法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
}
div{
height: 200px;
200px;
border: 1px solid black;
background-color: red;
}
</style>
</head>
<body>
<button>点我隐藏</button>
<div id="box">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('#box').toggle(3000,function(){
alert('成功')
})
})
})
</script>
</html>
使用toggle有淡入淡出的效果
jquery效果2-slide
slideDown
概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
用法和参数跟上面类似
slideUp
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似
slideToggle
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似
# 使用slideUp 和 slideDown 实现的隐藏和开启
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">点我隐藏</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var isShow = true;
$('#btn').click(function(){
if (isShow) {
$('#box').slideUp('3000')
$('#btn').html('点我开启')
isShow = false
} else{
$('#box').slideDown('3000')
$('#btn').html('点我隐藏')
isShow = true
}
})
})
</script>
</html>
# 使用slideToggle实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">点我</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('#box').slideToggle('3000')
})
})
</script>
</html>
jquery效果3 淡入淡出
fadeIn
概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
fadeOut
概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo
概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle
概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">淡出</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//第一种方法
/*$(function(){
var isShow = true;
$('#btn').click(function(){
if (isShow) {
$('#box').fadeOut('3000')
$('#btn').html('淡入')
isShow = false
} else{
$('#box').fadeIn('3000')
$('#btn').html('淡出')
isShow = true
}
})
})*/
//第二种方法
$(function(){
$('#btn').click(function(){
$('#box').fadeToggle('3000')
})
})
</script>
</html>
jquery的动画效果
animate
概念：用于创建自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
stop
概念：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。如果不加true，那么只停止当前元素的动画，不会影响到当前元素的下一个动画
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
delay
概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<button id="stop">停止</button>
<div id="box">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//当点击按钮后直接进行操作
/*$(function(){
$('#btn').click(function(){
$('#box').animate({
'200px',
height:'300px'
})
})
})*/
//当点击时按照我们给定的路线走
/*$(function(){
$('#btn').click(function(){
$('#box').animate({
left:"200px",
top:"300px"
},2000).animate({
top:'100px'
})
})
})*/
//同时我们还可以让运动一次后 等待几秒再运行 deady()
/*$(function(){
$('#btn').click(function(){
$('#box').animate({
left:'200px',
top:'300px'
},1000).delay(1000).animate({
top:'100px'
})
})
})*/
$(function(){
$('#btn').click(function(){
$('#box').animate({
top:'200px',
left:'200px'
},2000).delay(2000).animate({
top:'300px'
})
})
$('#stop').click(function(){
$('#box').stop();
})
$('#stop').click(function(){
$('#box').stop(true);
})
})
</script>
</html>
jquery右下角弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
300px;height: 200px;
position: absolute;
bottom: 0;
right: 0;
display: none;
}
</style>
</head>
<body>
<div id="box">
<img src='../02.jpg'/>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#box').slideDown(1000).slideUp('fast').fadeIn(1000).click(function(){
$('#box').fadeOut(2000)
})
})
</script>
</html>
jquery的属性操作
jquery有自己的属性和方法，我们先研究一下jquery的属性操作
jquery的属性操作模块分为四个部分：
- html属性操作
- DOM属性操作
- 类样式操作
- 值操作
HTML属性操作和DOM属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p>泰然城</p>
</div>
<button>获取</button>
<ul>
<li class="tairan1">泰然城1</li>
<li class="tairan2">泰然城2</li>
<li class="tairan3">泰然城3</li>
<li class="tairan4">泰然城4</li>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.获取div盒子的ID jquery属性 html属性 attr() 如果有一个参数表示获取属性值 有两个参数代表设置值
$(function(){
$('button').click(function(){
$('#box').text($('#box').attr('id'))
//设置一个属性
$('#box').attr('class','foo')
//设置多个属性 需要用到对象存储的方法
$('#box').attr({'class2':'foo','name':'xiaoyafei'})
//2.removeAttr() 删除一个属性
$('#box').removeAttr('class')
//删除多个属性 中间加空格
$('#box').removeAttr('class2 name')
})
})
//2.jquery DOM属性
$(function(){
//1.获取匹配元素数组中的第一个元素的属性值
console.log($('li').prop('class'))
//给DOM对象设置属性
$('li').eq(0).prop({'name':'app','name2':'app2'})
console.log($('li').eq(0))
//移除由prop方法设置的属性
$('li').removeProp('name')
$('li').removeProp('name2')
})
</script>
</html>
class操作和值操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.active{
color: red;
}
</style>
</head>
<body>
<div id="box">
<p>泰然城</p>
</div>
<button>获取</button>
<ul>
<li class="tairan">泰然城1</li>
<li class="tairan2">泰然城2</li>
<li class="tairan3">泰然城3</li>
<li class="tairan4">泰然城4</li>
</ul>
<span id="span1">路飞</span>
<div id="box2">
哈哈
<p>我是一个段落</p>
<input type="text" name="" id="" value="nihao" />
<button id="btn3">GET</button>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//3.class属性操作 首先我们在style里写上了类的样式
//addClass()
$('p').addClass('active')
//removeClass() 删除掉属性
$('p').removeClass('active')
//4.值属性操作 html() text() val()
//获取
console.log($('input').val())
//设置
$('input').val('嘿嘿嘿你个大头鬼')
//监听事件
$('input').change(function(){
console.log($(this).val())
})
})
</script>
</html>
jquery获取input的值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="114" />gay
<input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" checked=""/>睡觉
<input type="checkbox" value="c" checked=""/>打豆豆
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.获取单选框被选中的value值
console.log($('input[type=radio]:checked').val())
//2.复选框被选中的value获取到的第一个被选中的值
console.log($('input[type=checkbox]:checked').val())
//3.获取下拉列表被选中的值
console.log($('#timespan option:checked').val())
//4.设置单选框的值
$('input[type=radio]:checked').val('1100')
//5.设置复选框的值 这里需要使用select
$('select').val(['3']);
//6.设置文本框的值
$('input[type=text]').val('123')
})
</script>
</html>
jquery文档操作
插入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>哈哈哈</span>
<ul>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.append() 父元素添加一个新的子元素 按照从上到下的顺序添加
$('ul').append('<li>你在干嘛呢</li>')
$('ul').append('<li>你在干嘛呢？</li>')
//2.appendTo() 子元素添加到父元素中 紧接着进行插入
$('<li>我是哈哈哈</li>').appendTo('ul')
$('<li>我是哈哈哈2</li>').appendTo('ul')
//3.prepend() 添加一个子元素放在第一位
$('ul').prepend('这是一个prepend的方法')
//4.prependTo() 添加一个子元素放在最前面
$('<li>添加一个子元素到最后一位</li>').prependTo('ul')
//5.after() 在匹配的元素之后插入内容 兄弟关系
$('ul').after('<h2>我是一个耳机标题</h2>')
//insertAfter() 在匹配的元素后插入内容
$('<h3>我是一个三级标题</h3>').insertAfter('ul')
//6.before() 在匹配的元素之前插入内容
$('ul').before('<h1>我是一个一级标题</h1>')
$('ul').before('<h1 style="color: red;">我是一个一级标题</h1>')
})
</script>
</html>
克隆操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>哈哈哈</span>
<ul>
</ul>
<button>点我快点我</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//clone操作 当点击按钮时 再克隆一个新的按钮
$('button').click(function(){
// $(this).clone().insertAfter(this);
//如果cloen()的参数未true，那么 就将这个元素以及所有的事件处理进行克隆
$(this).clone(true).insertAfter(this);
})
})
</script>
</html>
替换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>哈哈哈</span>
<ul>
</ul>
<button>点击替换</button>
<h4>我是一个四级标题</h4>
<h4>我是一个四级标题</h4>
<h4>我是一个四级标题</h4>
<h4>我是一个四级标题</h4>
<h5>我是一个五级标题</h5>
<h5>我是一个五级标题</h5>
<h5>我是一个五级标题</h5>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
//replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素
$('h5').replaceWith('<a>我要去百度</a>')
//replaceAll() 用匹配的元素替换掉所有匹配到的元素
$('<a>你好</a>').replaceAll('h4');
})
})
</script>
</html>
删除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>哈哈哈</span>
<ul id="ul_1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul id="ul_2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button>点击替换</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.删除一个节点 remove()
// $('#ul_1').remove();
// 2.删除节点后,事件会保留
var val = $('#ul_2').detach()
$('#ul_1').append($(val))
//3.empty清空元素中的所有后代节点
//例如 清空ul中的子元素 保留ul
$('ul').empty()
})
</script>
</html>
jquery的位置属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
position: relative;
200px;
height: 200px;
border: 1px solid red;
padding: 10px 5px;
}
p{
position: absolute;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div id="box">
<p>我是一个段落标签</p>
</div>
<button id="btn">动画吧</button>
<div id="" style=" 200px;height: 200px;margin: 100px auto;border: 1px solid deepskyblue">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.获取匹配元素相对于父元素的偏移量 也就是子元素相对于父元素的top和left值
console.log($('p').position().left)
console.log($('p').position().top)
//2.offset 获取匹配元素在当前视口的相对偏移 也就是子元素到浏览器左上角的值
console.log($('p').offset().top)
console.log($('p').offset().left)
//3.scrollTop scroolLeft 获取当前元素相对滚动条顶部的偏移 当浏览器的滚动条向下 或者向右移动时就会显示
console.log($(document).scrollLeft())
console.log($(document).scrollTop())
//监听滚动条 当滑动滚动条会立马显示
$(document).scroll(function(){
console.log($(document).scrollLeft())
console.log($(document).scrollTop())
})
//4.innerHeight innerWeight 获取第一个匹配元素的内部区域高度和宽度 不包含margin 和 border
console.log($('#box').innerHeight())
console.log($('#box').innerWidth())
//5.outerHeight outerWidth 获取第一个匹配元素的外部区域高度和宽度 包含margin 和 border
console.log($('#box').outerHeight())
console.log($('#box').outerWidth())
//6.width height 获取匹配元素的宽度和高度
console.log($('p').width())
console.log($('p').height())
})
</script>
</html>
jquery的筛选方法
前面学到了选择器的筛选方法，现在来看下jquery常用的筛选方法
children()方法和hasClass()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li.active{
font-size: 100px;
}
</style>
</head>
<body>
<ul>
<li class="denger">1</li>
<li>2</li>
<li class="denger"><a href="">3</a></li>
<li>4</li>
<a href="#" id="anchor">百度</a>
<a href="#" id="anchor1">百度</a>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.当class是denger的 那么就让它的颜色变成红色
$('ul').children().each(function(index,ele){
console.log(index)
console.log(ele)
var denger = $(this).hasClass('denger');
if (denger) {
$(this).css('color','red')
} else{
$(this).css('font-size','20px')
}
})
})
</script>
</html>
parent() 获取当前元素的唯一父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li.active{
font-size: 100px;
}
</style>
</head>
<body>
<ul>
<li class="denger">1</li>
<li>2</li>
<li class="denger"><a href="" id="myA">3</a></li>
<li>4</li>
<a href="#" id="anchor">百度</a>
<a href="#" id="anchor1">百度</a>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//2.parent() 获取到匹配元素的父元素
console.log($('#myA').parent());
})
</script>
</html>
prev() 和 prevAll()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li.active{
font-size: 100px;
}
</style>
</head>
<body>
<ul>
<li class="denger">1</li>
<li>2</li>
<li class="denger"><a href="" id="myA">3</a></li>
<li>4</li>
<a href="#" id="anchor">百度</a>
<a href="#" id="anchor1">百度</a>
<p>我是一个段落标签</p>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//3.prev() 获取当前匹配元素的前一个兄弟元素
$('p').last().prev().css('background-color','red')
//4.prevAll() 获取当前匹配元素的所有兄弟元素
$('p').prevAll().css('font-size','40px')
})
</script>
</html>
siblings() 获得匹配集合中每个元素的同胞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li.active{
font-size: 100px;
}
</style>
</head>
<body>
<ul>
<li class="denger">1</li>
<li>2</li>
<li class="denger"><a href="" id="myA">3</a></li>
<li>4</li>
<a href="#" id="anchor">百度</a>
<a href="#" id="anchor1">百度</a>
<p>我是一个段落标签</p>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//5.siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
console.log($('li').siblings('li'))
$('li').hover(function(){
$(this).addClass('active').siblings('li').removeClass('active')
})
})
</script>
</html>
jquery案例
仿淘宝搜索栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
100%;
}
div img{
100%;
}
#nav{
display: none;
}
</style>
</head>
<body>
<div id="top">
<img src="../images/top.jpg"/>
</div>
<div id="nav">
<img src="../images/nav.jpg"/>
</div>
<div id="taobao">
<img src="../images/taobao1.png"/>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.获取top的height
var h = $('#top').height();
console.log(h)
//2.对滚动条进行监听 当滚动栏进行监听 当h小于scrollTP的时候 就让他展示出来
$(document).scroll(function(){
var scrollTp = $(document).scrollTop();
if (h < scrollTp ) {
$('#nav').css({display:'block',position:'fixed',top:0})
} else{
$('#nav').css({display:'none',position:'static',top:0})
}
})
})
</script>
</html>
小米官网案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{list-style: none;}
.wrap{ 980px;height: 612px;margin: 20px auto 0px;background: #f4f3f4;border: 1px solid gray;}
ul li{float: left;margin-left: 10px;position: relative;overflow: hidden; 233px;height: 300px;}
ul li p{
233px;
height: 100px;
background: rgba(245,102,51,.7);
position: absolute;
bottom: -100px;
text-align: center;
color: white;
line-height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="../images/xiaomi_01.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_02.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_03.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_04.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_05.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_07.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_08.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="../images/xiaomi_09.png"/></a><p>百度一下，你就知道</p></span></li>
</ul>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//当鼠标滑过li标签的时候
$('li').hover(function(){
$(this).children('p').stop().animate({bottom:0},300)
},function(){
$(this).children('p').stop().animate({bottom:-100},300)
})
})
</script>
</html>
大致的效果就是这样，当鼠标经过时就从底部弹出东西：
焦点式轮播图
大致的结果就是点我点击下面的li标签时 图片也会跟着动
jquery中的事件
事件的概念
HTML和JavaScript交互是通过事件驱动来实现的，例如按钮点击事件，页面的滚动onscroll等等，可以向文档或者文档中添加事件侦听器来监听事件。想要知道这些事件是什么时候发生的，需要了解下什么是事件流。
事件流
事件流描述的是从页面中接收事件的顺序。
1.DOM事件流
DMO2级事件规定的事件流包括3个阶段
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
</body>
</html>
点我们点击btn的时候，看看这个页面都输出了什么：
在解释输出结果为什么是这样之前，还有几个知识点需要了解一下：
1.addEventListener
addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、做为事件处理程序的函数和一个布尔值，最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
document、documentElement和document.body三者的关系
document代表的是整个html页面
document.documentElement代表的是标签
document.body代表的是标签
在标准的DOM2级事件中规定，事件流首先经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段，这里有一张图：
首先是在事件捕获阶段，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn 的a标签元素。
接着是事件冒泡阶段，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点(document)
注意：由于老版本的浏览器不支持事件的捕获，因此在实际开发中需要使用事件冒泡，在有特殊需要的时候使用事件捕获。
补充：
1、IE中的事件流只支持 事件冒泡 ，但是版本到IE9+以后，实现了 DOM2级事件 ，也就是说IE9+以后可以在捕获阶段对元素进行相应的操作了
2、在DOM事件流中，实际的目标在 捕获阶段 不会接收到事件，而是在 处于目标阶段 被触发，并在事件处理中被看成 冒泡阶段 的一部分，然后 冒泡阶段发生，事件又传播回文档
jquery中的常用事件
jquery的事件对象和事件冒泡
让我们举一个例子来看下什么是事件冒泡：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<button>点击我！</button>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
alert('按钮被点击了！')
})
$('#box').click(function(){
alert('盒子被点击了！')
})
})
</script>
</html>
当我们点击了按钮的时候，第一次会弹出 按钮被点击了，第二次会弹出盒子被点击了，这就是事件冒泡，冒泡到上一层
正是因为事件冒泡，所以当我们点击的时候，才会弹出两个框
那么该如何禁止盒子被弹出了，让我们来看一下事件对象
事件对象
在点击进行事件对象的时候 ，会传递进来一个事件对象的对象
event.type 表示事件的类型
enevt.target 表示事件的对象
event.pageX 表示相对浏览器X轴位置
event.pageY 表示相对浏览器Y轴位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
200px;
height: 200px;
background-color: green;
}
p{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<p class="p1"></p>
<!--# 代表顶部-->
<a href="https://www.baidu.com">打开百度</a>
</div>
</body>
<script src="jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.入口函数事件
$(function(){
//事件对象 就是点击当前的元素的时候 就会传递一个事件对象的对象
$('.p1').click(function(event){//hover事件可以传递两个参数
//1.事件属性
//事件类型
console.log(event.type)
//事件对象
console.log(event.target)
//相对于浏览器获取光标所点的位置
console.log(event.pageX)
console.log(event.pageY)
alert('当前按钮事件触发了')
//2.常用的事件 1.阻止事件冒泡
})
$('#box').click(function(){
alert('盒子事件触发了')
})
})
</script>
</html>
事件冒泡
之前我们说了 当我们点击p标签时，DIV盒子也会弹出，这就是事件冒泡带来的影响，所以我们需要阻止事件冒泡
event.stopPropagation() 阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
200px;
height: 200px;
background-color: green;
}
p{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<p class="p1"></p>
<!--# 代表顶部-->
<a href="https://www.baidu.com">打开百度</a>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//效果：当点击p标签的同时 div盒子不受事件冒泡的影响
$('.p1').click(function(enent){
console.log('p元素冒泡了')
//阻止事件冒泡
event.stopPropagation()
})
$('#box').click(function(){
console.log('div元素冒泡了')
})
})
</script>
</html>
那相同的来说，我们的a标签有一个默认事件，就是当我们点击a标签的时候，会跳转到某一个网页中
event.preventDefault() 取消元素的默认事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
200px;
height: 200px;
background-color: green;
}
p{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<p class="p1"></p>
<!--# 代表顶部-->
<a href="https://www.baidu.com">打开百度</a>
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//效果：当点击p标签的同时 div盒子不受事件冒泡的影响
$('.p1').click(function(enent){
console.log('p元素冒泡了')
//阻止事件冒泡
event.stopPropagation()
})
$('#box').click(function(){
console.log('div元素冒泡了')
})
$('a').click(function(event){
console.log('刚刚点击了a标签')
event.preventDefault()
event.stopPropagation()
})
})
</script>
</html>
只是提示点击了a标签，但是并没有给我们跳转
jquery中 绑定事件和移除事件
绑定事件：我们最常用的click和hover，这就是一个事件，但是在jquery中，我们还可以用另外一种方法绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.给DOM元素绑定事件
/*$('#box').bind('mouseenter',function(){
console.log('绑定了mouseenter方法')
})*/
//2.绑定多个事件的时候需要用到对象存储
//当经过时显示经过 当点击时显示点击的动作
function over(){
console.log('鼠标经过')
}
function clicks(){
console.log('鼠标点击')
}
$('#box').bind({
'mouseenter':over,
'click':clicks
})
//3.移除事件 unbind如果没有参数 那么代表移除所有的事件
//两秒后取消box的点击操作
setInterval(function(){
$('#box').unbind('click')
},2000)
})
</script>
</html>
绑定自定义事件
所谓的绑定自定义事件，意思就是 程序从上到下执行，点击事件刚刚做完的时候，我们动态生成了一个div盒子，那么此时这个Div盒子时没有添加任何事件的，所以我们需要使用绑定自定义事件。
我们的代码还是刚刚的绑定事件的代码 只是做了少许修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<button>按钮</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//jq给DOM元素绑定click事件
// $('#box').click(fn)
//语法：jquery对象.bind(事件类型,fn)
// $('#box').bind('click mouseenter',function(){
// alert('事件被绑定了')
// })
//给jq对象
function add(){
console.log('click')
}
function over(){
console.log('over')
}
$('div').bind({
"click":add,
"mouseenter":over
})
//移除事件 如果没有参数 代表移除所有事件
setTimeout(function(){
$('#box').unbind('click')
},2000)
//后续添加的事件 不能发生在未来 动态生成的元素不能直接添加对象 里面的事件也不能发生了
$('body').append('<div style=" 200px;height: 200px;background-color: yellow;">哈哈哈</div>')
})
</script>
</html>
最开始的情况时这个样子的：
因为我们在后面动态生成的DOM元素 所以是不受影响的，如果想收到影响 我们需要绑定自定义事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<button>按钮</button>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//jq给DOM元素绑定click事件
// $('#box').click(fn)
//语法：jquery对象.bind(事件类型,fn)
// $('#box').bind('click mouseenter',function(){
// alert('事件被绑定了')
// })
//给jq对象
function add(){
console.log('click')
}
function over(){
console.log('over')
}
$('div').bind({
"click":add,
"mouseenter":over
})
//移除事件 如果没有参数 代表移除所有事件
setTimeout(function(){
$('#box').unbind('click')
},2000)
//后续添加的事件 不能发生在未来 动态生成的元素不能直接添加对象 里面的事件也不能发生了
$('body').append('<div style=" 200px;height: 200px;background-color: yellow;">哈哈哈</div>')
$('button').bind('myClick',function(event){
console.log('绑定了事件')
})
//通过trigger 触发了绑定事件
$('button').trigger('myClick')
})
</script>
</html>
当我们什么都没操作的时候 就已经给我们的事件绑定了
事件代理
后续生成的doM元素 不能绑定事件 但是是可以使用事件代理的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>泰然城</li>
<li>小泰良品</li>
<li>泰然保险</li>
</ul>
</body>
<script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//后续生成的doM元素 不能绑定事件 但是是可以使用事件代理的
$(function(){
//常规写法
/*$('li').click(function(){
console.log($(this).html())
})*/
//事件代理的写法
$('ul').on('click','li',function(){
console.log(111)
})
//此时是不能绑定事件的
$('ul').append('<li>娜美</li>')
})
</script>
</html>
到最后 当我们点击娜美的时候 就会输出111