<!doctype html>
<html lang="en">
<head>
// 本代码主要是学习 aueryselector() jquery选取事件等常见操作功能模拟，参考12月18日作业完成。
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>jq</title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 250px;
height:250px;
border: 1px solid red;
/*background-color: antiquewhite;*/
margin-bottom: 15px;
}
.box1{
width: 300px;
height:250px;
border: 1px solid red;
/*background-color: antiquewhite;*/
margin-bottom: 15px;
</style>
</head>
<body>
<div class="box"> 点我变小
</div>
<div class="box1">一入一出消失
</div>
<button>列表1项背景变色</button>
<button>列表所有项背景变色</button>
<button>列表所有项背景变色JQ</button>
<script>
$(document).ready(function () {
})
$(function () {
//
$('div').click(function () {
$(this).animate({
opacity:'0.5',
height:'50px',
width:'50px'
});
})
}) //鼠标点击事件 ready()事件注册实例
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () {
document.querySelector('div').style.backgroundColor = 'yellow'
}
var btn1 = document.getElementsByTagName('button')[1]
btn1.onclick = function () {
var li = document.querySelectorAll('div')
for (var i=0; i<li.length; i++) {
li[i].style.backgroundColor = 'red'
}
}
// JQ 选取 JQ 不引入JQ函数 会报错 $未定义
var btn2 = document.getElementsByTagName('button')[2]
btn2.onclick = function () {
$(function () {
$('div').css('background-color', 'lightgreen')
})
} //注意 这里 $后面 是一个 大圆括号 用来选取当做对象
$('div').on('click',function () {
}).on('mouseenter',function () {
$(this).hide(1000)
}).on('mouseleave',function () {
$(this).show(1000)
})
$('div').off('click')
//鼠标 on off 事件 加入 移入移出效果
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
