Jquery

jquery

使用JavaScript的一些疼处

让我们用一段代码来解释下使用JavaScript的一些疼处:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				width: 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>

当我们点击按钮的时候 盒子都出现了
image

在这段代码中,我们不免发现:

  • 书写js繁琐 代码量大 仅仅1个动作就写了10多行代码
  • 代码显的比较复杂 尤其是在定义DOM元素的时候
  • 动画的效果我们需要开启定时器,还要小心定时器的清楚操作 还有各种操作和处理事件
  • 浏览器的兼容性

但是jquery就解决了上面的问题,让我们来看下代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				width: 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不一定能做到

image

注意:一般情况下,是库的文件,该库中都会抛出来构造函数或者对象。如果是构造函数,那么就使用new关键字来创建对象,如果是对象那么就直接调用它的属性和方法。

DOM文档加载的步骤

  1. 解析HTML结构
  2. 加载外部脚本和样式表文件 CSS
  3. 解析并执行脚本代码 windos.onload外面的脚本
  4. DOM树构建完毕
  5. 加载图片等外部文件
  6. 页面加载不同

从而,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>

image

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>


image

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>

image

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>

image

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>

image

JavaScript的DOM对象和jquery对象的转换

DOM对象转换称为jquery对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 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>

点击按钮,盒子就会隐藏
image

jquery对象转换成DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 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盒子变没了,按钮上的字变成了显示,反之亦然。
image

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;
				width: 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;
				width: 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{
				width: 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{
				width: 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{
				width: 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{
				width: 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({
					width:'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{
				width: 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>

image

克隆操作

<!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;
				width: 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="width: 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常用的筛选方法
image

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>

image

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>

image

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>

image

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{
				width: 100%;
			}
			div img{
				width: 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{width: 980px;height: 612px;margin: 20px auto 0px;background: #f4f3f4;border: 1px solid gray;}
		
			ul li{float: left;margin-left: 10px;position: relative;overflow: hidden;width: 233px;height: 300px;}

		
			ul li p{	
				width: 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>

大致的效果就是这样,当鼠标经过时就从底部弹出东西:
image

焦点式轮播图

大致的结果就是点我点击下面的li标签时 图片也会跟着动


jquery中的事件

事件的概念

HTML和JavaScript交互是通过事件驱动来实现的,例如按钮点击事件,页面的滚动onscroll等等,可以向文档或者文档中添加事件侦听器来监听事件。想要知道这些事件是什么时候发生的,需要了解下什么是事件流。

事件流

事件流描述的是从页面中接收事件的顺序。

1.DOM事件流

DMO2级事件规定的事件流包括3个阶段

  1. 事件捕获阶段
  2. 处于目标阶段
  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的时候,看看这个页面都输出了什么:
image

在解释输出结果为什么是这样之前,还有几个知识点需要了解一下:

1.addEventListener

addEventListener是DOM2级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、做为事件处理程序的函数和一个布尔值,最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

document、documentElement和document.body三者的关系

document代表的是整个html页面

document.documentElement代表的是标签

document.body代表的是标签

在标准的DOM2级事件中规定,事件流首先经过事件捕获阶段,接着是处于目标阶段,最后是事件冒泡阶段,这里有一张图:
image

首先是在事件捕获阶段,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>

当我们点击了按钮的时候,第一次会弹出 按钮被点击了,第二次会弹出盒子被点击了,这就是事件冒泡,冒泡到上一层

image

正是因为事件冒泡,所以当我们点击的时候,才会弹出两个框

那么该如何禁止盒子被弹出了,让我们来看一下事件对象

事件对象

在点击进行事件对象的时候 ,会传递进来一个事件对象的对象

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{
				width: 200px;
				height: 200px;
				background-color: green;
			}
			p{
				width: 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>

image

事件冒泡

之前我们说了 当我们点击p标签时,DIV盒子也会弹出,这就是事件冒泡带来的影响,所以我们需要阻止事件冒泡

event.stopPropagation() 阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: green;
			}
			p{
				width: 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>

image

那相同的来说,我们的a标签有一个默认事件,就是当我们点击a标签的时候,会跳转到某一个网页中

event.preventDefault() 取消元素的默认事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: green;
			}
			p{
				width: 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标签,但是并没有给我们跳转
image

jquery中 绑定事件和移除事件

绑定事件:我们最常用的click和hover,这就是一个事件,但是在jquery中,我们还可以用另外一种方法绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 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{
				width: 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="width: 200px;height: 200px;background-color: yellow;">哈哈哈</div>')
			
			
		})
	</script>
</html>

最开始的情况时这个样子的:

image

因为我们在后面动态生成的DOM元素 所以是不受影响的,如果想收到影响 我们需要绑定自定义事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 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="width: 200px;height: 200px;background-color: yellow;">哈哈哈</div>')
			
			$('button').bind('myClick',function(event){
				console.log('绑定了事件')
			})
			
			//通过trigger 触发了绑定事件
			$('button').trigger('myClick')
		})
	</script>
</html>

当我们什么都没操作的时候 就已经给我们的事件绑定了
image

事件代理

后续生成的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

posted @ 2018-09-20 17:31  风一点一点的吹  阅读(...)  评论(...编辑  收藏