前端笔记（16）
2018-07-27 本文已影响0人
rtrhhthth
代码：
1.jQuery其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery其他事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// //JS原生写法
// window.onload = function(){
// }
// //jQuery写法，等同于上面写法
// $(window).load(function(){
// })
// //ready的写法
// $(document).ready(function(){
// })
// //ready的简写
// $(function(){
// })
// 窗口改变尺寸的时候，会高频触发
$(window).resize(function() {
console.log('3');
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2.绑定事件bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件bind</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //只能绑定click事件，不能绑定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可绑定多个事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消绑定事件
$(this).unbind('mouseover');
});
})
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>
3.自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以触发自定义事件，也可以触发原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
// $('#btn1').trigger('hello');
})
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮2" id="btn2">
</body>
</html>
4.事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
.grandfather{
width: 300px;
height: 300px;
background-color: green;
position: relative;
}
.father{
width: 200px;
height: 200px;
background-color: gold;
}
.son{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 400px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').click(function() {
alert(4);
});
$('.grandfather').click(function() {
alert(3);
});
$('.father').click(function() {
alert(2);
});
$('.son').click(function(event) {//event代表当前事件
alert(1);
// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
// alert("X轴坐标：" + event.clientX);
// //阻止事件冒泡
// event.stopPropagation();
//合并阻止操作：把阻止冒泡和阻止默认行为合并
return false;
});
//阻止右键菜单
$(document).contextmenu(function(event){
// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
// event.preventDefault();
//合并阻止
return false;
})
})
</script>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
5.节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $span = $('<span>span元素</span>');
var $p = $('<p>p段落元素</p>');
var $h = $('<h1>页面标题</h1>');
/*插入子元素*/
//div中插入span和p（末尾追加）
// $('#div1').append($span);
// $('#div1').append($p);
// 把span和p插入div中
$span.appendTo('#div1');
$p.appendTo('#div1');
//把子元素插入到父元素（前面追加）
// $('#div1').prepend($span);
// $('#div1').prepend($p);
// $span.prependTo('#div1');
// $p.prependTo('#div1');
//在div前边插入兄弟h1标题
// $('#div1').before($h);
$h.insertBefore('#div1');
//在后边插入兄弟元素
//after()
//insertAfter()
//删除p标签
$p.remove();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
