学习本章节所有知识点
jq事件函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件函数</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<input type="text" name="">
<!-- blur() 当元素失去焦点 -->
<!-- focus 获得焦点 -->
<!-- change() 元素的值发生改变的时候 -->
<!-- dblclick 双击事件 -->
<!-- mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
mouseleave() 当鼠标指针离开元素时
mouseout() 当鼠标指针从元素上移开时
mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
mouseup() 当在元素上松开鼠标按键时
resize() 当调整当前浏览器窗口大小时
pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需 参数来自事件绑定函数。
pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需 参数来自事件绑定函数。 -->
<!-- <div style="width:100px;height:100px;background:red; margin-top:20px;"></div>
<button>点击</button> -->
<div>
当前鼠标的位置: <span> </span>
</div>
<div>
页面被调整大小的次数: <b> </b>
</div>
<script>
$(function () {
/* $('input').focus(function(){
$('input').css('background','green');
})
$('input').blur(function(){
$('input').css('background','red');
})
*/
/* $('input').change(function(){
$('input').css('background','pink');
}) */
/* $('button').click(function(){
$('div').css('background','yellow');
}) */
/* $('div').dblclick(function(){
$(this).css('background','green');
}) */
/* $(document).mousemove(function(e){
$('span').text('x: '+ e.pageX+'y: '+ e.pageY);
})
*/
a=0;
$(window).resize(function(){
// alert('窗口被调整大小');
$('b').text(a++);
})
})
</script>
</body>
</html>
jq事件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件切换</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
div,p{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<!-- 事件切换hover(over,out) -->
<body>
<div>我是内容</div>
<p></p>
<button>点击</button>
<script>
$(function(){
/* $('div').hover(
function(){
$(this).css('background','red');
},
function(){
$(this).css('color','#fff');
}
) */
// toggle() 如果元素可见的 ，就切换为隐藏,否则相反
$('button').click(function(){
$('p').toggle();
})
})
</script>
</body>
</html>
jq操作属性的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作属性的方法</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
/* .box{
color: red;
}
.main{
font-size: 40px;
font-weight: bold;
} */
.bb{
color: red;
}
</style>
</head>
<body>
<!-- <p title="content">php中文网</p>
<img src="images/bg.gif" alt="">
<button>点击删除图片</button>
<div class="one">你好</div>
<button>点击</button> -->
<span>大家好 我是哈哈哈</span><br>
<b>欢迎来到</b>
<p>php中文网</p>
<button>点击切换</button>
<input type="text" value="我是元素的值">
<script>
$(function () {
// 添加类 addClass
// $('p').addClass('box main');
//removeClass
// $('p').removeClass('box main');
//attr() 设置或读取属性值
// alert($('p').attr('title'));
// $('p').attr('title','你好');
// alert($('p').attr('title'));
// 移除属性
/* $('button').click(function(){
$('img').removeAttr('src');
}); */
//检查被选中的元素是否包含指定class
/* $('button').click(function(){
alert($('div').hasClass('one1'));
}); */
// toggleClass 添加或删除类的切换操作
/*
$('button').click(function(){
$('span,b,p').toggleClass('bb');
});
*/
// text 返回或设置被选中的元素的文本内容
/* $('span').text();
$('span').text('我是xgh'); */
// html返回或设置被选中的元素的内容(类似innerHTML)
// alert($('p').html());
// $('p').html('<h1>hello world</h1>');
// val 返回或设置被选中元素的值
// alert($('input').val());
$('input').val('我是Input框');
})
</script>
</body>
</html>
jq显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示和隐藏</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<!--
// hide() 隐藏显示的元素
// 书写格式：hide([speed][sesing] [fn])
// show() 显示隐藏的元素
// 书写格式：show([speed][sesing] [fn])
// speed:显示过程的速度 速度是毫秒值
// sesing:指定切换的效果
// fn:动画完成时执行的一个函数
-->
<style>
div{
width: 200px;
height: 200px;
background: pink;
margin: 10px 0;
}
</style>
</head>
<body>
<button id="bt1">点击隐藏</button>
<button id="bt2">点击显示</button>
<!-- <div></div> -->
<p>大家好</p>
<p>欢迎大家来到芜湖</p>
<script>
$(function(){
$('button').click(function(){
$('p').hide(1000);
})
$('button').click(function(){
$('p').show(1500);
})
})
</script>
</body>
</html>
jq淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淡入淡出</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
.box1{
height: 200px;
width: 200px;
background: red;
}
button{
height: 40px;
width: 200px;
border: none;
}
</style>
</head>
<body>
<button class="btu1">淡入</button>
<div class="box1"></div>
<script>
$(function(){
/* $('.box1').hide();
$('.btu1').click(function(){
$('.box1').fadeIn(1500);
})
$('.btu1').click(function(){
$('.box1').fadeOut(2000);
}) */
$('.btu1').click(function(){
$('.box1').fadeToggle(2000);
})
})
</script>
</body>
</html>
jq滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery 滑动</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<button>点击</button>
<p>jq的滑动是通过高度的变化</p>
<p>jq的滑动是通过高度的变化</p>
<p>jq的滑动是通过高度的变化</p>
<!-- slideDown
slideUp
-->
<script>
$(function(){
/* $('p').hide();
$('button').click(function(){
$('p').slideDown(2000);
}) */
/* $('button').click(function(){
$('p').slideUp(2000);
}) */
$('button').click(function(){
$('p').slideToggle(3000);
})
})
</script>
</body>
</html>
jq自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义动画</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
div{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<button class="btn1">点击字体放大</button>
<p>jquery中我们使用 animate()方法创建自定义的动画</p>
<button class="btn2">点击移动div</button>
<div></div>
<script>
$(function(){
$('.btn1').click(function(){
$('p').animate({
fontSize:'40px'
})
})
$('.btn2').click(function(){
$('div').animate({
left:'toggle'
// opacity:'0.3',
// height:'400px',
// width:'400px'
// height:'toggle'
},1500)
})
})
</script>
</body>
</html>
jq自定义动画-停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>停止动画</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
div{width: 200px;height: 200px;background: blue;position: absolute;color: #fff;}
</style>
</head>
<body>
<script>
$(function(){
$('#right').click(function(){
$('.box1').animate({left:'+500px'},3000);
$('.box1').animate({fontSize:'30px'},500);
})
$('#stop').click(function(){
$('.box1').stop(true);
})
})
</script>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1">php中文网</div>
</body>
</html>
jq获取/改变css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>获取/改变css</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<p>php中文网</p>
<div style="width:200px;height:200px;background:blue;"></div>
<script>
$(function(){
//改变单个css属性
// $('body').css('background','green');
//改变多个css属性
/* $('p').css({
'color':'green',
'font-size':'80px',
'font-weight':'bold'
}) */
//获取单个CSS的属性值
alert ($('div').css('background'));
})
</script>
</body>
</html>
下划线跟随导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下划线跟随导航</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 500px;
height: 40px;
margin: 20px auto;
background: #af3434;
box-shadow: 0 0 5px #000;
border-radius: 3px;
position: relative;
}
ul {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
z-index: 20;
cursor: pointer;
}
li {
/* background:green; */
list-style: none;
color: #fff;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li name="0">首页</li>
<li name="1">php中文网</li>
<li name="2">独孤九剑</li>
<li name="3">西门大官人</li>
<li name="4">灭绝师太</li>
</ul>
<div class="block" style="width: 80px;height: 2px; background: #fff;position: absolute;top: 37px;z-index: 10;">
</div>
</div>
<script>
$(function () {
$('li').hover(
function () {
$x=parseInt($(this).attr('name'))*100;
$('.block').stop().animate({left:$x+'px'},300);
},
function () {
$('.block').stop().animate({left:0},300);
}
)
})
</script>
</body>
</html>