目
录
1.下拉框复选框单选框的事件样式 和 禁止喜欢中文字与鼠标右键
2.点击按钮后样式发生变化
3.表格追随鼠标更换颜色
4.点击更换背景
5.点击不同的选择栏，内容展示在一个板块内
6.排他思想，许多按钮，点击谁谁就有样式
7.按钮全选反选
8.currentTarget和target的区别
9.阻止事件冒泡
10.事件捕获
11.阻止元素的默认行
12.灯泡开关案例
13.图片跟随鼠标
14.省市二级联动
15.滚动事件,滚动到一定位置出现特效
16.获取焦点，点击搜索框出现闪条
1.下拉框复选框单选框的事件样式 和 禁止喜欢中文字与鼠标右键
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是一段不愿意分享的文字我是一段不愿意分享的文字我是一段不愿意分享的文字<br />
<input type="text" value="as发送发送" onselect="show4()"><br />
<select name="" onchange="show()">
<option value="">aaaaaa</option>
<option value="">bbbbb</option>
<option value="">ccccc</option>
<option value="">ddddd</option>
<option value="">eeeee</option>
</select><br />
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="0"> 女<br />
<input type="checkbox" name="hobby" value="sing" onchange="show3(this)"> 唱歌
<script>
//onchange 可以监听下拉框，下拉选中
function show() {
alert("选中了")
}
var arr = document.getElementsByName("sex");
for (let i = 0; i < arr.length; i++) {
arr[i].onchange = function() {
var flag = this.checked;
alert(flag);
}
}
function show3(obj) {
var f = obj.checked;
alert(f);
}
function show4() {
alert("文字被选中了")
}
</script>
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
</html>
2.点击按钮后样式发生变化
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="show(event)">按钮原本样式</button>
<button id="btn3">点击按钮后的样式</button>
</body>
<script>
//事件对象：由浏览器创建，我们可以拿来用
function show(e) {
//事件对象中属性
var type = e.type; //获取事件类型
alert(type);
}
var btn3 = document.getElementById("btn3")
btn3.onclick = function(e) {
btn3.style.color = "red";
this.style.background = "yellow";
e.target.style.height = "50px";
}
</script>
</html>
3.表格追随鼠标更换颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标在哪儿哪儿就会变颜色</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
/* #bg {
background-color: pink;
} */
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr class="trr">
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr class="trr">
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr class="trr">
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr class="trr">
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr class="trr">
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr class="trr">
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
var idList=document.getElementsByClassName('trr');
for(var i=0;i<idList.length;i++){
idList[i].onmouseover=function(){
for (var i = 0; i<idList.length; i++) {
idList[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>
4.点击更换背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换肤</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(img/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li id="li1" class="lii"><img src="img/1.jpg"></li>
<li id="li2" class="lii"><img src="img/2.jpg"></li>
<li id="li3" class="lii"><img src="img/3.jpg"></li>
<li id="li4" class="lii"><img src="img/4.jpg"></li>
</ul>
<script>
var lilist=document.getElementsByClassName('lii');
for(var i=0;i<lilist.length;i++){
lilist[i].onclick=function(event){
if(event.target.nodeName=="IMG"){
document.body.style.background="url("+ event.target.getAttribute('src')+")";
}
}
}
</script>
</body>
</html>
5.点击不同的选择栏，内容展示在一个板块内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换栏</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li data-index="0" class="current">商品介绍</li>
<li data-index="1">规格与包装</li>
<li data-index="2">售后保障</li>
<li data-index="3">商品评价（50000）</li>
<li data-index="4">手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
</body>
<script>
var list=document.getElementsByTagName("li");
var items = document.querySelector('.tab_con').querySelectorAll('.item');
for(var i=0;i<list.length;i++){
list[i].onclick=function(){
for (var i = 0; i < list.length; i++) {
list[i].style='';
}
this.style.backgroundColor = '#c81623';
this.style.color=' #fff';
var index = this.getAttribute('data-index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</html>
6.排他思想，许多按钮，点击谁谁就有样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>排他思想</title>
</head>
<body>
<button class="but">按钮1</button>
<button class="but">按钮2</button>
<button class="but">按钮3</button>
<button class="but">按钮4</button>
<button class="but">按钮5</button>
</body>
<script>
var butArr = document.getElementsByClassName('but');
for (var i = 0; i < butArr.length; i++) {
butArr[i].onclick = function() {
for (var i = 0; i < butArr.length; i++) {
butArr[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</html>
7.按钮全选反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选反选</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" class="jcb" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="jcb" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="jcb" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="jcb" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var allList = document.getElementById('j_cbAll');
var List = document.getElementsByClassName('jcb');
allList.onclick = function() {
if (allList.checked) {
for (var i = 0; i < List.length; i++) {
List[i].checked = true;
}
} else {
for (var i = 0; i < List.length; i++) {
List[i].checked = false;
}
}
}
</script>
</html>
8.currentTarget和target的区别
- currentTarget:获取的是绑定了该事件的那个元素对象
- target：获取的是触发了该事件的那个元素对象
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wai {
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="wai" onclick="show(event)">
<button>一个按钮</button>
</div>
</body>
<script>
function show(e) {
//currentTarget:获取的是绑定了该事件的那个元素对象
//target：获取的是触发了该事件的那个元素对象
e.target.style.background = "yellow";
//e.currentTarget.style.background = "yellow";
}
</script>
</html>9.阻止事件冒泡
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#a {
height: 500px;
width: 500px;
background-color: red;
}
#b {
height: 300px;
width: 300px;
background-color: yellow;
}
#c {
height: 200px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="a" onclick="showA(event)">
<div id="b" onclick="showB(event)">
<div id="c" onclick="showC(event)"></div>
</div>
</div>
<script>
//你不要事件冒泡现象，我们可以通过事件对象中的方法，来阻止冒泡
function showA(e) {
e.stopPropagation() //阻止事件冒泡
alert("aaaa");
}
function showB(e) {
e.stopPropagation() //阻止事件冒泡
alert("bbb");
}
function showC(e) {
e.stopPropagation() //阻止事件冒泡
alert("ccc");
}
</script>
</body>
</html>
10.事件捕获
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#a {
height: 500px;
width: 500px;
background-color: red;
}
#b {
height: 300px;
width: 300px;
background-color: yellow;
}
#c {
height: 200px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
var a = document.querySelector('#a');
// 给son注册单击事件，第3个参数为true
a.addEventListener('click', function() {
alert('aaa');
}, true);
var b = document.querySelector('#b');
// 给father注册单击事件，第3个参数为true
b.addEventListener('click', function() {
alert('bbb');
}, true);
var c = document.querySelector('#c');
c.addEventListener('click', function() {
alert('ccc');
}, true)
</script>
</body>
</html>
11.阻止元素的默认行
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" onclick="show()">百度连接</a>
<a href="#" onclick="show()">一个连接</a>
<a href="javascript:void(0)" onclick="show()">一个连接</a>
<a href="javascript:;;" onclick="show()">一个连接</a>
<a href="http://www.baidu.com" onclick="show2(event)">百度连接</a>
<form action="123.html" method="get" onsubmit="tijiao(event)">
用户名：<input type="text" name="username">
<br>
<input type="submit" value="提交表单">
</form>
</body>
<script>
function show() {
alert("HELLO");
}
//a标签，他有这个，跳转页面的默认行为，你可以通过，事件对象的方法，来阻止该元素的默认行为
function show2(e) {
e.preventDefault(); //阻止元素的默认行为
alert("HELLO");
}
function tijiao(e) {
e.preventDefault(); //阻止元素的默认行为
alert("通过Ajax异步提交");
}
</script>
</html>12.灯泡开关案例
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/pic_bulboff.gif" id="myimg" alt="" onclick="switchImg(this)">
</body>
<script>
var flag = false; //false表示关，true表示开
function switchImg(obj) {
if (flag) {
obj.src = "img/pic_bulboff.gif";
} else {
obj.src = "img/pic_bulbon.gif";
}
flag = !flag;
}
</script>
</html>
13.图片跟随鼠标
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="img/yazi.gif" alt="" id="yazi">
</body>
<script>
var yz = document.getElementById("yazi");
document.onmousemove = function(e) {
// 2. page 鼠标在页面文档的x和y坐标
var x = e.pageX;
var y = e.pageY;
//console.log("x坐标：", x);
//console.log("y坐标：", y);
yz.style.top = y + "px";
yz.style.left = x + "px";
}
</script>
</html>
14.省市二级联动
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="" id="sheng" onchange="selectProvince()">
<option value="">--请选择省份--</option>
<option value="">陕西</option>
<option value="">河南</option>
</select>
<select name="" id="city">
<option value="">--请选择城市--</option>
</select>
</body>
<script>
var sheng = document.getElementById("sheng");
var city = document.getElementById("city");
//数据结构：二维数组
var arr = [
[],
["西安", "商洛", "宝鸡", "咸阳", "渭南", "榆林", "延安"],
["郑州", "洛阳", "驻马店", "南阳", "开封"]
]
function selectProvince() {
//清除之前的旧数据
city.innerHTML = '<option value="">--请选择城市--</option>';
//获取省份的编号
var index = sheng.selectedIndex;
//取出省份对应的城市数组
var cityNames = arr[index];
for (let i = 0; i < cityNames.length; i++) {
var option = document.createElement("option");
option.innerText = cityNames[i];
city.appendChild(option);
}
}
</script>
</html>
补充：目前使用的数组在存储。以后了可以用Ajax来获取相关信息的啦!
15.滚动事件,滚动到一定位置出现特效
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
top: 300px;
position: absolute;
height: 200px;
width: 200px;
background-color: aqua;
display: none;
}
</style>
</head>
<body>
<div id="d1"></div>
<div style="height: 3000px;"></div>
</body>
<script>
window.onscroll = function() {
//变量t是滚动条滚动时，距离顶部的距离
var t = document.documentElement.scrollTop || document.body.scrollTop;
var scrollup = document.getElementById('d1');
//当滚动到距离顶部200px时，返回顶部的锚点显示
if (t >= 200) {
scrollup.style.display = "block";
} else { //恢复正常
scrollup.style.display = "none";
}
}
</script>
</html>
16.获取焦点，点击搜索框出现闪条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#wai {
width: 500px;
border: 0px black solid;
display: flex;
align-items: center;
border: 2px red solid;
}
.nei {
border: 0px black solid;
}
#d1 {
width: 80%;
}
#d2 {
width: 20%;
}
input {
width: 100%;
height: 50px;
border-style: none;
font-size: 20px;
padding-left: 10px;
}
button {
display: block;
outline: 0;
border-style: none;
height: 50px;
width: 100%;
background-color: red;
font-size: 20px;
color: white;
letter-spacing: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wai">
<div class="nei" id="d1"><input type="text" name="content" id="neirong" onkeypress="souSuo(event)"></div>
<div class="nei" id="d2"><button onclick="souSuo(event)">搜索</button></div>
</div>
<div style="height: 2000px;">
网页内容
</div>
<script>
function souSuo(e) {
var v = document.getElementById("neirong").value.trim();
if (e.keyCode == 13) {
alert(v);
} else {
alert(v);
}
}
//给整个文档绑定键盘事件
document.onkeypress = function(e) {
if (e.keyCode == 115 || e.keyCode == 83) {
//让输入框获取焦点 focus() 在文本域上设置焦点。
document.getElementById("neirong").focus();
e.pageY = 0 + "px"; //让页面定位到顶部 pageY纵坐标
}
}
</script>
</body>
</html>
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!
