标签设置id 选择器用# 标签用class 选择器用.
1.原生js
2.jquery(<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>)
3.
4.添加新设置文本
5.设置样式
6.层级选择器
7.隔行变色
<< odd 序号为奇数行 even 序号为偶数行
<< eq(*) 任意选择行
6.鼠标移入移除隐藏显示(show也可以替换为slideDown加上参数)
<< mouseover 和 mouseout 鼠标移到到子元素都会触发
<< 所以使用 nouseenter 和 mouseleave
6.突出展示
7.风手琴
8.class类的操作
<< addClass添加某一个类
<< removeClass删除某一个类
9.tab栏操作
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<style>
.beijing{
background: pink;
}
.btn{
border:5px solid skyblue;
border-radius:55px;
margin:40px;
}
.lll>.main{
display:none;
}
.lll>.main.ss{
display:block;
}</style>
</head>
<body>
<div class="con">
<div class=cont>
<input type="button" class="btn" value="输入框按钮">
<input type="button" class="btn" value="输入框按钮">
<input type="button" class="btn" value="提交按钮">
</div>
<div class="lll">
<div class="main"><a href=""><img src="img/jk2.webp"></a></div>
<div class="main"><a href=""><img src="img/jk3.webp"></a></div>
<div class="main ss"><a href=""><img src="img/jk4.webp"></a></div>
</div>
</div>
</body>
</html>
10.jquery基本动画
<< 东南方向放大缩放 和西北方向缩小(show,hide,toggle)
<< (slideDown,sideUp,slideToggle) 向下向上平滑效果
<< 淡入淡出效果(fadeIn,fadeOut,fadeToggle,fadeTo)
原理是修改透明度
<< 移动效果 (linear匀速 swing缓动)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
opacity:0.5;
}
.im{
width: 100px;
height: 100px;
}
#box1 {
background-color: blue;
margin-top: 100px;
}
#box2 {
background-color: blue;
margin-top: 300px;
}
#box3 {
background-color: yellowgreen;
margin-top: 500px;
}
</style>
</head>
<body>
<input type="button" value="开始" id="ll">
<div id="box1"><img src="img/jk4.webp" class="im"></div>
<div id="box2"><img src="img/jk2.webp" class="im"></div>
<div id="box3"><img src="img/jk3.webp" class="im"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
$("#ll").click(function () {
$("#box1").animate({
left:1350,
}, 3000, "swing");
$("#box2").animate({
left:1400,
}, 3000, "swing");
$("#box3").animate({
left:1320,
}, 3000, "linear");
});
});
</script>
</body>
</html>
添加一个回调函数
10.stop的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:150px;
height:300px;
background-color: #6495ED;
display:none;
}</style>
</head>
<body>
<input type="button" value="开始" id="kaishi">
<input type="button" value="停止" id="tingzhi">
<div id="div1"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#kaishi').click(function(){
$('#div1').slideDown(2000).slideUp(2000);
});
//stop方法
// 第一个参数是否清除队列
// 第二个参数是否跳转到最终效果
$('#tingzhi').click(function(){
// $('#div1').stop(true,true);
//$('#div1').stop(true,false);
//$('#div1').stop(false,true);
$('#div1').stop(false,false);
});
});
</script>
11.html创建节点 $()创建元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
border:5px solid hotpink;
width:300px;
height:400px;
}</style>
</head>
<body>
<input type="button" value="百度链接" id="baidu">
<input type="button" value="百度链接" id="tengxun">
<div class="div1">我是一个文本</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#baidu').mouseenter(function(){
//会覆盖原有的内容 可以写标签
$('.div1').html('<a href="www.baidu.com">百度一下</a>');
});
//$() 创建元素 只存在内存中,要使用append追加
$('#tengxun').mouseenter(function(){
var $link = $('<a href="www.qq.com">腾讯首页</a>');
// console.log($link);
$(".div1").append($link);
});
});
</script>
12.生成表格案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="生成按钮" id="anniu">
<div class="div1"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var data = [{
name: "猴王",
sex: "男",
age: 18,
}, {
name: "猴儿",
sex: "女",
age: 18,
}, {
name: "猴哥",
sex: "公",
age: 250,
}];
$('#anniu').click(function() {
var list = [];
for (var i = 0; i < data.length; i++) {
list.push("<tr>");
for (var key in data[i]) {
list.push('<td>');
list.push(data[i][key]);
list.push('</td>');
}
list.push("</tr>");
}
// console.log(list.join(""));
$('.div1').html(list.join(""));
});
});
</script>
使用的$的方式来写(同样的效果)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="生成按钮" id="anniu">
<div class="div1"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var data = [{
name: "猴王",
sex: "男",
age: 18,
}, {
name: "猴儿",
sex: "女",
age: 18,
}, {
name: "猴哥",
sex: "公",
age: 250,
}];
$('#anniu').click(function() {
// var list = [];
// for (var i = 0; i < data.length; i++) {
// list.push("<tr>");
// for (var key in data[i]) {
// list.push('<td>');
// list.push(data[i][key]);
// list.push('</td>');
// }
// list.push("</tr>");
// }
// // console.log(list.join(""));
// $('.div1').html(list.join(""));
for(var i=0;i<data.length;i++){
var $tr=$("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['sex']+"</td><td>"+data[i]['age']+"</td></tr>");
$('.div1').append($tr);
}
});
});
</script>
13.添加节点的几种方式 p32
<< append和prepend
<< 父元素.append(子元素);作为最后一个子元素添加
<< 父元素.perpend(子元素);作为最前一个子元素添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="添加尾部" id="anniu1">
<input type="button" value="添加首部" id="anniu2">
<ul id="u1">
<li>我是第一个</li>
<li>我是第二个</li>
<li id="u13">我是第三个</li>
<li>我是第四个</li>
<li>我是第五个</li>
</ul>
<ul id="u2">
<li>我是第一个</li>
<li>我是第二个</li>
<li id="u23">我是第三个</li>
<li>我是第四个</li>
<li>我是第五个</li>
</ul>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#anniu1').click(function(){
var $lixin = $("<li>我是新添加的li标签</li>");
$('#u1').append($lixin);
});
});
</script>
<<修改点击事件的两行代码
相当于将u23的东西复制剪切到ul的尾行
var $lixin = $('#u23');
$('#u1').append($lixin);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="添加尾部" id="anniu1">
<input type="button" value="添加首部" id="anniu2">
<ul id="u1">
<li>我是第一个</li>
<li>我是第二个</li>
<li id="u13">我是第三个</li>
<li>我是第四个</li>
<li>我是第五个</li>
</ul>
<ul id="u2">
<li>我是第一个</li>
<li>我是第二个</li>
<li id="u23">我是第三个</li>
<li>我是第四个</li>
<li>我是第五个</li>
</ul>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// $('#anniu1').click(function(){
// var $lixin = $("<li>我是新添加的li标签</li>");
// $('#u1').append($lixin);
// // var $lixin = $('#u23');
// // $('#u1').append($lixin);
// });
$('#anniu2').click(function(){
var $lixin = $("<li>我是新添加的li标签</li>");
$('#u1').prepend($lixin);
});
});
</script>
<<修改点击事件的两行代码
相当于将u23的东西复制剪切到ul的首行
var $lixin = $('#u23');
$('#u1').prepend($lixin);
<< bofore和after和appendTo
<<元素A.before(元素B)将元素B插入元素A前面,作为兄弟元素添加
<<元素A.after(元素B)将元素B插入元素A后面,作为兄弟元素添加
<< 子元素。appendTo(父元素); 把子元素作为父元素的最后一个子元素添加
13.城市管理器
实现选中移动到 和全部移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
select{
background:skyblue;
width:200px;
height:200px;
font-size:20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}</style>
</head>
<body>
<select id="src-city" name="src-city" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">西红柿</option>
</select>
<div class="btn-box">
<!--实体字符-->
<button id="btn1"> >> </button>
<button id="btn2"> << </button>
<button id="btn3"> ></button>
<button id="btn4"> < </button>
</div>
<select id="tar-city" name="src-city" multiple>
</select>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//左面的全部移动到右边
$('#btn1').click(function(){
$('#src-city>option').appendTo($('#tar-city'));
});
//右面的全部移动到左边
$('#btn2').click(function(){
$('#tar-city>option').appendTo($('#src-city'));
});
$('#btn3').click(function(){
//selected是过滤器
// console.log($('#src-city>option:selected'));
$('#src-city>option:selected').appendTo($('#tar-city'));
});
$('#btn4').click(function(){
$('#tar-city>option:Selected').appendTo($('#src-city'));
});
});</script>
14.移除元素