收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
<style>
div {
height: 400px;
width: 400px;
text-align: center;
margin: 0 auto;
background-color: #00CC66;
}
img {
display: block;
margin: 10px auto;
}
</style>
<script>
//利用Jquery ready()事件
//如果采用原生的window.onload()事件，则要等所有的页面元素及图片资源加载完才可调用，
//如果加载的资源过多过慢
//会造成页面假死现象
//而 ready（）事件，只要页面的dom元素加载完了就可调用，不容易造成页面假死，有利于用户体验
$(document).ready(function () {
var a = document.getElementById('a');
a.onclick = function () {
//确认框
var b = confirm('你要改变背景颜色吗');
if (b === true){
//点击确定，背景颜色转为黑色
$('body').css('background-color','black')
}
else {
//点击取消，没有背景颜色
$('body').css('background-color','')
}
}
})
</script>
</head>
<body>
<div>
<img src="1.jpg" alt="" width="200">
<button id="a">改换背景颜色</button>
</div>
<script>
//1.利用Jquery来修改元素的样式
// $('img').css('border-radius','150px');
// //可以链式调用
// $('img').css('border','1px solid red').css('box-shadow','5px 5px 5px black')
//jQuery事件绑定方法
// 绑定事件: on(event, function(){})
// 删除事件: off(event, function(){})
//事件也可以链式调用
//1鼠标点击事件2鼠标移进事件3鼠标移出事件
//补充还有一次性事件one（event,function(){}）。js只执行一次事件
$('img').on('click',function () {
$(this).css('border-radius','50px')}).on('mouseenter',function () {
$(this).css('height','250px').css('width','250px')}).on('mouseleave', function () {
$(this).css('height', '300px').css('width','300px')});
//移除img的鼠标点击事件
$('img').off('click')
//将jquery对象转为js对象
$('div')[0].style.backgroundColor = 'blue'
//或者可以这样
$('div').get(0).style.borderBottom = '5px solid green'
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
