1.表格删除行和清空案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrap{
width: 410px;
margin:100px auto 0;
}
.wrap tbody tr td{
border:5px solid #9ACD32;
}</style>
</head>
<body>
<input type="button" value="清空按钮" id="anniu">
<div class="wrap">
<table>
<tbody id = "cont">
<tr>
<td>大家好我是猴王1</td>
<td>大家好我是猴王弟弟</td>
<td ><a class="get">delect</a></td>
</tr>
<tr>
<td>大家好我是猴王2</td>
<td>大家好我是猴王弟弟</td>
<td><a class="get">delect</a></td>
</tr>
<tr>
<td>大家好我是猴王3</td>
<td>大家好我是猴王弟弟</td>
<td><a class="get">delect</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#anniu').click(function(){
$('#cont').empty();
});
$('.get').click(function(){
$(this).parent().parent().remove();
});
});
</script>
2.克隆节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
background:pink;
width:200px;
height:200px;
border-radius:25px;
border:5px solid #00FFFF;
font-size:50px;
}</style>
</head>
<body>
<input type="button" value="克隆" id ="cont">
<div></div>
<span class="cc">hello world!
</span>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('.cc').click(function(){
alert('不好意思我被点击到了');
});
$('#cont').click(function(){
//clone克隆节点 克隆.cc的内容克隆装到str里面
//clone()默认和false不会克隆事件 添加true可以克隆事件
var $str=$('.cc').clone(true);
//修改克隆节点的class
$str.attr('class','ccc')
//把克隆的内容装到body里面
$('body').append($str);
});
});
</script>
3.获取或者设置表单内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮" id="anniu">
<input type="text" value="" id="cont">
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#anniu').click(function(){
console.log($('#cont').val());
$('#cont').val('我是设置的值');
});
});
</script>
4.动态数据的添加和移除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#cont{
border:25px solid #44DBFB;
border-radius:500px;
background: pink;
width:800px;
}
#wrap {
padding-top: 50px;
margin-left: 2800px;
font-size: 150px;
}
#shujutianjia{
font-family:'宋体';
background-image:-webkit-linear-gradient(top,#9EDCD9,#69DBDC,#44dbfb,#1791dc);
}
#tianjia {
text-align: center;
}
#op {
background: lightgreen;
}
#chacha{
background:red;
}
#chacha {
font-size: 150px;
}
#as {
margin-left: 1400px;
font-size: 150px;
display: none;
float: left;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 40px;
}
</style>
</head>
<body style="background:mediumspringgreen;">
<div id="wrap">
<input type="button" value="添加按钮" id="cont" style="font-size:150px;text-align:center;">
<table id="op">
<tbody id="cccc">
<tr>
<td>国家</td>
<td>品牌</td>
<td style="text-align: center;">联系电话</td>
<td id="cc" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
<tr>
<td>美国</td>
<td>宾利</td>
<td>987654321</td>
<td id="cc9" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
<tr>
<td>日本</td>
<td>思域</td>
<td>123456789</td>
<td id="cc8" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
<tr>
<td>德国</td>
<td>奔驰</td>
<td>1480256963</td>
<td id="cc7" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
</tbody>
</table>
</div>
<table id="as" style="background-color: #0099CC;">
<div id="kkk">
<tr>
<td style="text-align:center;">
<span id="shujutianjia" style="font-size:150px;">添加数据</span>
<td style="text-align:right;">
<button id="chacha">x</button>
</td>
<div></div>
</td>
</tr>
<tr>
<div class="form-item">
<td>
<label class="lb" style="font-size:150px;">所属国家:</label>
<input class="txt" type="text" id = "chandi"placeholder="请输入产地"
style="border:5px solid #0099CC;background:chartreuse;font-size:150px;">
</td>
</tr>
</div>
<td>
<div class="form-item">
<label class="lb" style="font-size:150px;">所属品牌:</label>
<input class="txt" type="text" id= "pinpai"placeholder="请输入品牌"
style="border:5px solid #0099CC;background:white;font-size:150px;">
</td>
<tr>
</div>
<td style="text-align:right;">
<input type="button" value="点击添加" id="tianjia"
style="border:5px solid mediumpurple;background:orangered;font-size:150px;">
</td>
</tr>
</div>
</table>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//给添加按钮设置点击事件 2s淡出as表格 wrap表格透明度更改为0.2
$('#cont').click(function() {
$('#as').fadeIn(2000);
$('#wrap').css('opacity', '0.2');
});
//点小叉叉as表格隐藏两秒淡出 wrap显示
$('#chacha').click(function(){
$('#as').fadeOut(2000);
$('#wrap').css('opacity', '1');
});
//给表格数据设置删除事件
$('#cc').click(function() {
$(this).parent().remove();
});
$('#cc8').click(function() {
$(this).parent().remove();
});
$('#cc9').click(function() {
$(this).parent().remove();
});
$('#cc7').click(function() {
$(this).parent().remove();
});
//将第一行输入的东西装入str 第二行输入的东西装入st
//拼接装入xinzeng这个数组
$('#tianjia').click(function(){
var str = $('#chandi').val();
var st = $('#pinpai').val();
var $xinzeng=$( '<tr>'+
'<td>'+str+'</td>'+
'<td>'+st+'</td>'+
'<td style="text-align: center;">1234567892</td>'+
'<td id="lll" style="border:5px solid #0099CC;background:orangered;">delect</td>'
+'</tr>'
)
//给新添加的数据设置移除事件
$xinzeng.find('#lll').click(function(){
$xinzeng.remove();
});
//新添加的数据新增到id为cccc这个表格
$('#cccc').append($xinzeng);
//as表格淡出2s
$('#as').fadeOut(2000);
//warp表格显示
$('#wrap').css('opacity', '1');
});
});
</script>
5.jquery中的属性获取和设置和移除(attr和removeAttr)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input {
border: 5px solid #44DBFB;
border-radius: 25px;
background: pink;
height: 40px;
width: 100px;
}
</style>
</head>
<body>
<input type="button" value="获取属性" id="huoqu">
<input type="button" value="设置属性" id="shezhi">
<input type="button" value="移除属性" id="yichu"><br><br>
<img src="img/jk2.webp" title="猴王">
<div id="div1"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//1.设置属性
$('#shezhi').click(function() {
// $('img').attr('src','img/jk4.webp');//设置单属性
//设置多属性
$('img').attr({
'src': 'img/jk4.webp',
'aaa': 111, //原来没有的属性进行添加
});
});
//2.获取属性
$('#huoqu').click(function() {
//获取到的属性装到str这个里面
var str = $('img').attr('src');
//将str里面的数据新增到div1这个id里面去
$('#div1').append(str);
});
//3.移除属性
$('#yichu').click(function() {
//移除单个属性
// $('img').removeAttr('src');
//移除多个属性
$('img').removeAttr('aaa title');
});
});
</script>
6.美女相册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-family:'宋体';
font-size:50px;
margin-left:50px;
}
body {
background-color: #ccc;
}
img{
width:300px;
height:300px;
}
#cont{
list-style: none;/* 去除li标签的小黑点 */
}
#cont li {
margin:20px;/* 实现图片与图片之间的间距 */
display: inline;/* 隐藏li标签的黑点 li标签不换行 */
}
#datu{
background:pink;
width:600px;
height:600px;
margin-left:100px;
}
</style>
</head>
<body>
<ul id="cont">
<li><img src="img/jk2.webp" id="tu1" title="美女A"></li>
<li><img src="img/jk4.webp" id="tu2" title="美女B"></li>
<li><img src="img/%25~SQ_J%7B7J@3%5BH%60%5DPLZ%7D_B%7DP.jpg"id="tu3"title="美女C"></li>
</ul>
<img id="datu" src="">
<div id="div1">我是一个div标签</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('li>img').click(function(){
//将当前鼠标点到的图片的src属性装到src里面
var src=$(this).attr("src");
//把把刚刚获取的src属性去替换datu这个id的里面的属性
$('#datu').attr('src',src);
});
$('li>img').click(function(){
var title=$(this).attr("title");
//把刚刚获取到的title的值替换掉div1这个id标签里面的内容
$('#div1').text(title);
});
});
</script>
7.prop操作布尔值类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<input type="button" value="按钮" id="anniu"><br><br>
<input type="checkbox" id="cont">
<div id ="div1">请点击按钮</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#anniu').click(function(){
var str = $('#cont').prop('checked');
$('#div1').text(str);
});
});</script>
8.表格全选与反选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table{
font-size:50px;
}
thead{
font-size:50px;
}
td{
padding:40px;
border:5px solid saddlebrown;
font-family:'宋体';
}
td>#cont{
padding:40px;
border:5px solid saddlebrown;
font-family:'宋体';
}
#wrap{
margin-left:500px;
}</style>
</head>
<body>
<div id="wrap">
<table>
<thead>
<tr>
<td><div style="text-align:center;"><input type="checkbox" id ="con" style="width:100px;height:100px;"></div></td>
<td>-----</td>
<td>-----</td>
<td>-----</td>
</tr>
</thead>
<tbody>
<tr>
<td><div style="text-align:center;"><input type="checkbox" id ="cont" style="width:100px;height:100px;"></div></td>
<td>大家好</td>
<td>大家好</td>
<td>大家好</td>
</tr>
<tr>
<td><div style="text-align:center;"><input type="checkbox" id ="cont" style="width:100px;height:100px;"></div></td>
<td>大家好</td>
<td>大家好</td>
<td>大家好</td>
</tr>
<tr>
<td><div style="text-align:center;"><input type="checkbox" id ="cont" style="width:100px;height:100px;"></div></td>
<td>大家好</td>
<td>大家好</td>
<td>大家好</td>
</tr>
</tbody>
</table>
</div>
<div id ="div1" style="font-size:150px;"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//1.实现第一个按钮全选和反选
$('thead>tr>td>div>input').click(function(){
//获取当前这个按钮的选中状态
var str = $(this).prop('checked');
//打印到div这个标签
$('#div1').text(str);
//给下面所有的按钮同样的状态
$('tbody>tr>td>div>input').prop('checked',str);
});
//当所有按钮都选中第一个按钮也选中
$('tbody>tr>td>div>input').click(function(){
var ss = $('tbody>tr>td>div>input').length;//计算一共有多少个input标签
var sss = $('tbody>tr>td>div>input:checked').length;//计算被选中的个数
if(ss == sss){
$('thead>tr>td>div>input').prop('checked',true);
}
else{
$('thead>tr>td>div>input').prop('checked',false);
}
});
});
</script>
9.height和width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
height: 100px;
width: 100px;
border: 10px solid #000000;
padding:10px;
margin:10px;
}
</style>
</head>
<body>
<button id="cont">不包括内外边距和边框获取按钮</button>
<button id="shezhi">设置按钮</button>
<button id="cont1">包括内边距获取按钮</button>
<button id="cont2">包括内边距和边框获取按钮</button>
<button id="cont3">包括内外边距和边框获取按钮</button>
<button id="cont4">获取可视范围区的宽高</button>
<br>
<br>
<div id="div2"></div>
<div id="div3"></div>
<div id="div1"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//1.0height和width 不包括内外边距和边框
$('#cont').click(function() {
var height = $('#div1').css('height');//带px的字符串型
var width = $('#div1').width();
$('#div2').text('字符串型:'+height);
$('#div3').text('纯数字型:'+width);
});
//点击设置按钮设置height和width的参数
$('#shezhi').click(function(){
$('#div1').height(200);
$('#div1').width(200);
});
//2.0innerHight和innerwidth 包括内边距
$('#cont1').click(function() {
var height = $('#div1').innerHeight();
var width = $('#div1').innerWidth();
$('#div2').text('带内边距的:'+height);
$('#div3').text('带内边距的:'+width);
});
//3.0outerWidth和outerHeight 包括内边距和边框
$('#cont2').click(function() {
var height = $('#div1').outerHeight();
var width = $('#div1').outerWidth();
$('#div2').text('带内边距加边框的:'+height);
$('#div3').text('带内边距加边框的:'+width);
});
//4.0outerWidth(true)和outerHeight(true) 包括内外边距和边框
$('#cont3').click(function() {
var height = $('#div1').outerHeight(true);
var width = $('#div1').outerWidth(true);
$('#div2').text('带内外边距加边框的:'+height);
$('#div3').text('带内外边距加边框的:'+width);
});
//5.0获取可视范围的宽高
$('#cont4').click(function() {
var height = $(window).height();
var width = $(window).width();
$('#div2').text('可视范围的高:'+height);
$('#div3').text('可视范围的宽:'+width);
});
});
</script>
10.offset和position方法的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0px;
margin:0px;
}
#div2{
width:400px;
height:400px;
border:20px solid pink;
/*相对于上一个标签*/
position:relative; /*相对定位 */
top:20px;
left:20px;
}
#div3{
width:140px;
height:140px;
border:20px solid dodgerblue;
/*绝对于整个可视范围*/
position:absolute;/*绝对定位*/
top:200px;
left:160px;
}
</style>
</head>
<body>
<div id = "div1">设计反馈给不回家热</div>
<button id ="cont">offset按钮</button>
<button id ="cont1">position按钮</button>
<div id ="div2"></div>
<div id ="div3"></div>
<div id="div4"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#cont').click(function(){
//offset方法获取元素距离document位置
console.log($('#div3').offset());
});
$('#cont1').click(function(){
//position方法获取的是元素距离有定位的父元素(offsetParent)的位置
console.log($('#div3').position());
});
});
</script>
11.scrollTop和scrollLeft方法的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
height:2000px;
width:2000px;
}
#div1{
height:200px;
width:200px;
/* 当img的宽高超过div就会出现滚动条 */
overflow:auto;
}
img{
width:400px;
height:400px;
vertical-align:top;
}
</style>
</head>
<body>
<div>添加overflow:auto,当div标签宽高小于图片宽高时会出现滚动条</div>
<input type="button" value="获取按钮" id="huoqu">
<input type="button" value="设置按钮" id="shezhi">
<input type="button" value="获取页面按钮" id="huoqu1">
<input type="button" value="设置页面按钮" id="shezhi1">
<div id ="div1">
<img src="img/jk2.webp">
</div>
<div id="div2">
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#huoqu').click(function(){
//1.获取元素内容被卷曲出去的高和宽
var str = $('#div1').scrollTop();
var st = $('#div1').scrollLeft();
$('#div2').text('div的宽'+st+'div的高'+str);
});
//2.设置元素内容被卷曲出去的高和宽
$('#shezhi').click(function(){
$('#div1').scrollTop(208);
$('#div1').scrollLeft(208);
});
$('#huoqu1').click(function(){
//1.获取页面内容被卷曲出去的高和宽
var str = $(window).scrollTop();
var st = $(window).scrollLeft();
$('#div2').text('页面的宽'+st+'页面的高'+str);
});
//2.设置页面内容被卷曲出去的高和宽
$('#shezhi1').click(function(){
$(window).scrollTop(208);
$(window).scrollLeft(208);
});
});
</script>
12.固定导航栏案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
img {
/* 垂直向上对齐 */
vertical-align: top;
}
#down {
text-align: center;
width: 1400px;
}
</style>
</head>
<body>
<div id="top">
<img src="images/top.png">
</div>
<div id="center">
<img src="images/nav.png">
</div>
<div id="down">
<img src="images/main.png">
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//给页面设置滚动事件
$(window).scroll(function() {
//获取向下滚动(被滚动出去的距离)
var xiangxiagundong = $(window).scrollTop();
// console.log(gundong);
//获取第一部分的高度
var yibufen = $('#top').height();
console.log(yibufen);
//获取第二部分的高度
var erbufen = $('#center').height();
console.log(erbufen);
if(xiangxiagundong>=yibufen){
//固定第二部分导航栏的定位
$('#center').css({
position:'fixed',
top:0,
left:0,
});
//设置第三部分的margin-top为第二部分的高度
$('#down').css({
marginTop:erbufen
});
}
else{
//还原第二部分导航栏的定位
$('#center').css({
//标准流定位static(默认定位)
position:'static',
top:0,
left:0,
});
//还原第三部分的margin-top的值
$('#down').css({
marginTop:0
});
}
});
});
</script>
13.bing和delegate注册事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
position:relative;
top:20px;
left:20px;
width:200px;
height:200px;
border:5px solid darkorange;
}
.div2{
position:relative;
top:30px;
left:80px;
width:200px;
height:200px;
border:5px solid darkorange;
}</style>
</head>
<body>
<input type="button" value="按钮" id ="anniu">
<div class="div1"></div>
<div id ="div3"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#anniu').click(function(){
var $strr = $('<div class="div2"><div>');
$('body').append($strr);
});
//bing方式注册事件 支持同时注册 不支持动态注册
$('div').bind({
mouseenter:function(){
console.log('鼠标移入事件');
},
click:function(){
console.log('鼠标单击事件');
}
});
// delegate注册委托事件 支持同时注册和动态注册 原理是事件冒泡
$('body').delegate('div',{
mouseenter:function(){
console.log('鼠标移入事件');
},
click:function(){
console.log('鼠标单击事件');
}
});
});</script>
14.on的注册事件和委托事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.div1{
position:relative;
top:20px;
left:20px;
width:200px;
height:200px;
border:5px solid darkorange;
}
.div2{
position:relative;
top:30px;
left:80px;
width:200px;
height:200px;
border:5px solid darkorange;
}
span{
border:5px solid red;
position:relative;
top:30px;
left:380px;
}</style>
</head>
<body>
<input type="button" value="按钮" id ="anniu">
<div class="div1"></div>
<span>我也是一个可以触发事件的元素</span>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#anniu').click(function(){
var str = $('<div class="div2"></div>');
$('body').append(str);
});
//on简单事件
// $('div').on('click',function(){
// alert('我是单击事件');
// });
//on委托事件
//三个要素:事件名称,需要触发的元素,事件触发执行的程序
$('body').on('click','div,span',function(){
alert('我是单击事件');
});
});</script>
<< 用on实现之前的动态数据删除的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#cont{
border:25px solid #44DBFB;
border-radius:500px;
background: pink;
width:800px;
}
#wrap {
padding-top: 50px;
margin-left: 2800px;
font-size: 150px;
}
#shujutianjia{
font-family:'宋体';
background-image:-webkit-linear-gradient(top,#9EDCD9,#69DBDC,#44dbfb,#1791dc);
}
#tianjia {
text-align: center;
}
#op {
background: lightgreen;
}
#chacha{
background:red;
}
#chacha {
font-size: 150px;
}
#as {
margin-left: 1400px;
font-size: 150px;
display: none;
float: left;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 40px;
}
</style>
</head>
<body style="background:mediumspringgreen;">
<div id="wrap">
<input type="button" value="添加按钮" id="cont" style="font-size:150px;text-align:center;">
<table id="op">
<tbody id="cccc">
<tr>
<td>国家</td>
<td>品牌</td>
<td style="text-align: center;">联系电话</td>
<td id="cc" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
<tr>
<td>美国</td>
<td>宾利</td>
<td>987654321</td>
<td id="cc9" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
<tr>
<td>日本</td>
<td>思域</td>
<td>123456789</td>
<td id="cc8" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
<tr>
<td>德国</td>
<td>奔驰</td>
<td>1480256963</td>
<td id="cc7" style="border:5px solid #0099CC;background:orangered;">delect</td>
</tr>
</tbody>
</table>
</div>
<table id="as" style="background-color: #0099CC;">
<div id="kkk">
<tr>
<td style="text-align:center;">
<span id="shujutianjia" style="font-size:150px;">添加数据</span>
<td style="text-align:right;">
<button id="chacha">x</button>
</td>
<div></div>
</td>
</tr>
<tr>
<div class="form-item">
<td>
<label class="lb" style="font-size:150px;">所属国家:</label>
<input class="txt" type="text" id = "chandi"placeholder="请输入产地"
style="border:5px solid #0099CC;background:chartreuse;font-size:150px;">
</td>
</tr>
</div>
<td>
<div class="form-item">
<label class="lb" style="font-size:150px;">所属品牌:</label>
<input class="txt" type="text" id= "pinpai"placeholder="请输入品牌"
style="border:5px solid #0099CC;background:white;font-size:150px;">
</td>
<tr>
</div>
<td style="text-align:right;">
<input type="button" value="点击添加" id="tianjia"
style="border:5px solid mediumpurple;background:orangered;font-size:150px;">
</td>
</tr>
</div>
</table>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//给添加按钮设置点击事件 2s淡出as表格 wrap表格透明度更改为0.2
$('#cont').click(function() {
$('#as').fadeIn(2000);
$('#wrap').css('opacity', '0.2');
});
//点小叉叉as表格隐藏两秒淡出 wrap显示
$('#chacha').click(function(){
$('#as').fadeOut(2000);
$('#wrap').css('opacity', '1');
});
//给表格数据设置删除事件
$('#cc').click(function() {
$(this).parent().remove();
});
$('#cc8').click(function() {
$(this).parent().remove();
});
$('#cc9').click(function() {
$(this).parent().remove();
});
$('#cc7').click(function() {
$(this).parent().remove();
});
//将第一行输入的东西装入str 第二行输入的东西装入st
//拼接装入xinzeng这个数组
$('#tianjia').click(function(){
var str = $('#chandi').val();
var st = $('#pinpai').val();
var $xinzeng=$( '<tr>'+
'<td>'+str+'</td>'+
'<td>'+st+'</td>'+
'<td style="text-align: center;">1234567892</td>'+
'<td id="lll" style="border:5px solid #0099CC;background:orangered;">delect</td>'
+'</tr>'
)
//给新添加的数据设置移除事件
// $xinzeng.find('#lll').click(function(){
// $xinzeng.remove();
// });
$('#op').on('click','#lll',function(){
$(this).parent().remove();
});
//新添加的数据新增到id为cccc这个表格
$('#cccc').append($xinzeng);
//as表格淡出2s
$('#as').fadeOut(2000);
//warp表格显示
$('#wrap').css('opacity', '1');
});
});
</script>
15.off解除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cont{
width:200px;
height:200px;
background: darkred;
}</style>
</head>
<body>
<input type="button" value="注册事件" id="zhuce">
<input type="button" value="解除事件" id="jiechu">
<div class="cont" ></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#zhuce').on('click',function(){
$('.cont').on({
'mouseenter':function(){
console.log('鼠标移入事件');
},
'click':function(){
console.log('鼠标点击事件');
}
});
$('#jiechu').on('click',function(){
// $('.cont').off();//默认解绑所有事件
$('.cont').off('click');
});
});
});
</script>
16.trigger触发自定义事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cont{
width:200px;
height:200px;
background: darkred;
}</style>
</head>
<body>
<input type="button" value="按钮1" id="anniu1">
<input type="button" value="按钮2" id="anniu2">
<div class="cont" ></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// $('.cont').on('click',function(){
// alert('我被点击了');
// });
// var i =0;
// $('#anniu1').on('click',function(){
// i++;
// //每点击两次anniu1触发.cont中的点击事件
// if(i%2==0){
// $('.cont').trigger('click');
// }
// });
// 自定义一个点击事件
$('.cont').on('houwang',function(){
alert('猴王帅');
})
// //点一次anniu1触发houwang这个事件
// $('#anniu1').on('click',function(){
// $('.cont').trigger('houwang');
// });
$('#anniu2').on('click',function(){
var str = confirm('请问猴王帅嘛?');//弹出一个可以选择确定和取消的弹框
if(str==true){//确定则触发 取消触发else
$('.cont').trigger('houwang');
}
else
{
alert('猴王是你爹');
}
});
});</script>
17.阻止冒泡事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.cont{
width:200px;
height:200px;
position: relative;
border:5px solid #69DBDC;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div class="cont">
<button id ="anniu">我还是一个按钮</button>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// 1.什么事件对象
// 注册一个事件,系统就会帮我们生成这个记录这个事件触发时候的一些信息
// 比如触发事件的时候有没有按住某个键,再不如触发这个事件的一些坐标信息
// jquery中用事件参数e来获取
// jquery中是对原生js的一个封装,处理好了兼容性
$('.cont').on('click',function(e){
// console.log(e);
//触发事件那一点距离 屏幕最左上角的值
console.log("screenX"+e.screenX+":"+e.screenY);
//触发事件那一点距离 可视左上角的值
console.log("clientX"+e.clientX+":"+e.clientY);
//触发事件那一点距离 页面左上角的值
console.log("pageX"+e.pageX+":"+e.pageY);
});
// 2.阻止冒泡事件
// $('.cont').on('click',function(){
// alert('我是一个边框');
// });
// $('#anniu').on('click',function(e){
// alert('我是按钮事件');
// e.stopPropagation();//阻止事件冒泡
// //如果不添加他的父级div也会触发弹窗
// });
});
</script>
<< 阻止浏览器默认行为和记录键盘按下的键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="cont">
<a href="www.baidu.com" class="aa">百度一下 你就知道</a>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// // //1.防止事件冒泡和还能防止浏览器默认(a标签的跳转)行为跳转
// $('.cont').on('click',function(){
// alert('我是一个边框');
// });
// $('.aa').on('click',function(e){
// alert('djf');
// e.stopPropagation();//阻止事件冒泡
// e.preventDefault();//防止浏览器默认行为
// // return false;//既能防止事件冒泡和还能防止浏览器默认行为跳转
// });
//2.获取键盘按下的键
$(document).on('keydown',function(e){
//keyCode能获取按下的是哪个键
console.log(e.keyCode);
});
});
</script>
18.键盘变色案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.aaa{
width:200px;
height:200px;
background-color: white;
position:absolute;
top:300px;
left:300px;
}
.lla{
position:absolute;
font-size:50px;
font-family:'宋体';
top:10px;
left:250px;
}
.llas{
position:absolute;
font-size:50px;
font-family:'宋体';
top:80px;
left:250px;
}
.ll{
position:absolute;
font-size:50px;
font-family:'宋体';
top:200px;
left:250px;
}</style>
</head>
<body>
<div class="ll">键盘变色案列</div>
<div class="lla">当前code值为</div><div class="llas">0</div>
<div class="aaa">
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var $str = $('.aaa');
var $zhi = $('.llas');
$(document).on('keydown',function(e){
switch(e.keyCode){
case 82 :
$str.css('backgroundColor','red');
$zhi.text(82);
break;
case 71 :
$str.css('backgroundColor','pink');
$zhi.text(71);
break;
case 80 :
$str.css('backgroundColor','black');
$zhi.text(80);
break;
case 89 :
$str.css('backgroundColor','green');
$zhi.text(89);
break;
case 65 :
$str.css('backgroundColor','purple');
$zhi.text(65);
break;
default:
$str.css('backgroundColor','blue');
$zhi.text('null');
break;
}
});
});
</script>
19.五角星评分案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0px;
margin:0px;
}
#wrap{
font-size:150px;`
}
li {
margin-right:40px;
float:left;
list-style: none; //消除li标签前面的小黑点
}
</style>
</head>
<body>
<div id = "wrap">
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// prev()查找上一个兄弟
// prevAll()查找之前其他的兄弟
// next()下一个兄弟
// nextAll() 之后所有的兄弟
var sxwjx= '★';
var kxwjx = '☆';
$('li').on('mouseenter',function(){
console.log('鼠标进入');
// console.log($(this).text('★')); 查看有没有返回值
// console.log($(this).text('★').prevAll());
//当前所在的li和前面的兄弟li标签都变为实心
$(this).text(sxwjx).prevAll().text(sxwjx);
//之后的兄弟li标签都变为空心五角星
$(this).nextAll().text(kxwjx);
}).on('mouseleave',function(){
//鼠标移除全部变为空心
$('li').text(kxwjx);
//鼠标移除后定位到刚刚点击事件中做记号那个li标签 []是属性选择器
$('li[shuxing]').text(sxwjx).prevAll().text(sxwjx);
}).on('click',function(){
//做记号 :给当前这个点击的li添加一个唯一的属性 (shuxing=weiyi)
//给其他兄弟移除这个属性保证是唯一的一个属性
$(this).attr('shuxing','weiyi').siblings().removeAttr('shuxing');
});
});
</script>
20.链式编程和end的使用
<< 链式编程:一个元素调用一个方法 这个方法有返回值 并且返回的是一个jquery对象 就可以继续使用jquery方法
<< end():返回上一个状态,end()也是jquery方法也需要jquery对象才能点出来
21.显示迭代
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style:none;//隐藏li标签的小黑点
}
li{
width:300px;
height:300px;
background: pink;
text-align:center;
float:left;
margin:50px;
line-height: 300px;//设置文字行高
}</style>
</head>
<body>
<ul id="cont">
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
</ul>
<div class="kk"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var $str = $('#cont').children();
// console.log(str);
// each()遍历jquery对象集合
$str.each(function (index,element){
// console.log(index);//每一个li标签的索引
// console.log(element);//每一个li标签里面的dom对象
$(element).css('opacity',(index+1)/10);
});
});
</script>
22.多库共存
<< 后引入的jquery会把前面的覆盖掉