jqury事件1和2
好多的组合都觉得从中这些事件上转发而成的 等于是我在js里面学了一次 又在jqury也学了一次 感觉比上次 是深入了很多 谢谢师太老师的详细讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .red{color: pink}
.oks{font-weight: bold;font-size: 35px;} */
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
//*不能与<body onload="">一起使用
//blur()当元素失去焦点==onblur
// focus()当元素获得焦点
// change()当元素的值发生改变的时候
// click()点击事件
//dblclick()双击事件
$(document).ready(function(){
//$('input').blur(function(){ //blur当元素失去焦点 例如鼠标点击上去 松开
//$('input').css('background','pink')
//})
//$('input').focus(function(){ //focus当元素获得的焦点 例如点上去就是获得
//$('input').css('background','#ccc')
//})
//$('input').change(function(){ //当元素的值发生改变 例如 在按钮框输入文字 会改变元素
//$('input').css('background','red')
//})
//$('button').click(function(){ //当按钮被点击了触发 div里面的变化
//$('div').css('background','pink')
$('div').dblclick(function(){ //双击事件触发 改变div里面的属性
$(this).css('border-radius','50px')
})
})
//})
</script>
<input type="text" name="">
<div style="width: 150px;height: 150px;background-color: red;"></div>
<button>点击</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .red{color: pink}
.oks{font-weight: bold;font-size: 35px;} */
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
// mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
// mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
// mouseleave() 当鼠标指针离开元素时
// mouseout() 当鼠标指针从元素上移开时
// mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 当在元素上松开鼠标按键时
// resize() 当调整当前浏览器窗口大小时
// pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需 参数来自事件绑定函数。
// pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需 参数来自事件绑定函数。
$(document).ready(function(){
$('b').mouseover(function(){ //当指针放到上方时 触发的事件
$('b').css('background-color','red')
})
$('i').mouseenter(function(){ // 指正穿过激发的事项
$('i').css('color','pink')
})
$('i').mouseleave(function(){ //当指针离开的时候激发
$('i').css('background-color','red')
})
$(document).mousemove(function(cc){ //当鼠标指针位于敞口内的值 声明CC函数
$('span').text('x:'+cc.pageX+'y:'+cc.pageY) //鼠标指针的位值用文本显示出来
})
$(document).mouseleave(function(){ //当鼠标移除会话框显示
$('p').css('background-color','red')
})
})
$(document).mouseout(function(){ //从元素上离开
$('ul').css('background-color','pink')
})
//$(document).mousedown(function(){ //鼠标按键点击
// $('div').css('color','pink')
//})
$(document).mouseup(function(){
$('div').css('background-color','red')
})
a=0
$(window).resize(function(){
$('b').text(a++)
})
</script>
<input type="text" name="">
点击：<span></span>
<b>我的</b><br>
<i>他的</i><br>
<p>a</p>
<ul>aaaa</ul>
<div id="abc">在元素松开按键
</div><div id="acd"></div>
<div style="width: 150px;height: 150px;background-color: red;"></div>
<button>点击</button>
</body>
</html>