目录
一、JS文件
可以把JavaScript代码单独存到一个*.js文件里,然后引入到HTML中
如:
/*1.文件名应为英文*/
/*2.不再需要<script>标签*/
var number = 120;
function speak()
{
console.log("this is a example!");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/example.js"></script>
</head>
<body>
</body>
<script>
console.log(number);
speak();
</script>
</html>
分享一下一般什么情况下需要单建一个JS文件
1、JS代码太多,希望与HTML分离
2、JS代码可以被多个HTML文件重用
3、希望把自己的JS写的工具类库分享给别人使用;比如最常用的jQuery库
二、认识jQuery
jQuery是一个JavaScript库,对原生JS进行了封装,是前段开发最常用的一个库;
添加jQuery到项目中,根据版本而定.....
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
运行Chrome,检查是否成功加载(404 Not Found表示路径写错了)
三、使用jQuery
先来两个示例
1、当点击按钮时,修改<label>的显示文字
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<label class="website">Jsen.cn</label>
<button onclick="test()">测试</button>
</body>
<script>
function test()
{
//取得class = 'website'得对象
var j = $('.website');
//修改目标对象得HTML内容
j.html('布局未来');
}
</script>
</html>
注:$是一个function的名称,代表一个方法
html(str) : 修改目标对象里的HTML内容
2、点击按钮时,将box1的内容移到box2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.box1{
width: 200px;
height: 60px;
border: 1px solid #ccc;
background-color: greenyellow;
margin: 10px;
text-align: center;
padding: 10px;
}
.box2{
width: 200px;
height: 60px;
border: 1px solid #ccc;
background-color: lightblue;
margin: 10px;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">2019-08-31</div>
<div class="box2"></div>
<div>
<button onclick="test()">测试</button>
</div>
</body>
<script>
function test()
{
//取得class = 'box1'的HTML
var str = $('.box1').html();
//设置class = 'box2'得元素的HTML
$('.box2').html(str);
//清空class = 'box1'得元素的HTML
$('.box1').html("");
}
</script>
</html>
jQuery里的API风格:
j.html(str) : 带参数时表示设置(setter)
str = j.html() : 不带参数时表示获取(getter)
四、jQuery对象
三个小例子即可看清
1、点击按钮,修改class='java'的元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.java{
background-color: aliceblue;
text-align: center;
color: aqua;
}
.ke{
background-color: aliceblue;
color: red;
}
button{
width: 1520px;
}
</style>
</head>
<body>
<div class="java">2018-08-31</div>
<div class="java">Java 基础</div>
<div class="java">Java 进阶</div>
<div class="java">Java GUI</div>
<div class="java">Java 网页</div>
<div class="java">Java 网站</div>
<div class="java">Java 框架</div>
<div class="java">Java 项目</div>
<div class="java">大三前的最后一篇博客</div>
<div>
<button onclick="test()">加油</button>
</div>
</body>
<script>
function test()
{
//选中所有class='java'的元素
var kecheng = $('.java');
//对所有元素进行操作,修改目标对象的class属性
kecheng.addClass('ke');
}
</script>
</html>
$(".java")实际的是返回一个数组/集合,同时操作所有匹配的目标元素
2、jQuery对象与DOM对象的转换
点击前:
点击后:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.java{
background-color: aliceblue;
text-align: center;
color: aqua;
}
.ke{
background-color: aliceblue;
color: red;
}
button{
width: 1520px;
}
</style>
</head>
<body>
<div class="java">2018-08-31</div>
<div class="java">Java 基础</div>
<div class="java">Java 进阶</div>
<div class="java">Java GUI</div>
<div class="java">Java 网页</div>
<div class="java">Java 网站</div>
<div class="java">Java 框架</div>
<div class="java">Java 项目</div>
<div class="java">大三前的最后一篇博客</div>
<div>
<button onclick="test()">加油</button>
</div>
</body>
<script>
function test()
{
//选中所有class='java'的元素
var kecheng = $('.java');
//e : 原生DOM元素
var e = kecheng[0];
e.innerHTML = "大三一起加油";
//je : jQuery包装后的对象
var je = $(e);
//对所有元素进行操作,修改目标对象的class属性
je.addClass('ke');
}
</script>
</html>
观察可知:
DOM对象 : 原生对象,操作不方便
jQuery对象 :封装了DOM对象,操作方便
两者可以互换,但通常只用jQuery对象
3、jQuery对象的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.java{
background-color: aliceblue;
text-align: center;
color: aqua;
}
.ke{
background-color: aliceblue;
color: red;
}
button{
width: 1520px;
}
</style>
</head>
<body>
<div class="java">2018-08-31</div>
<div class="java">Java 基础</div>
<div class="java">Java 进阶</div>
<div class="java">Java GUI</div>
<div class="java">Java 网页</div>
<div class="java">Java 网站</div>
<div class="java">Java 框架</div>
<div class="java">Java 项目</div>
<div class="java">大三前的最后一篇博客</div>
<div>
<button onclick="test()">加油</button>
</div>
</body>
<script>
function test()
{
//选中所有class='java'的元素
var kecheng = $('.java');
for(var i=0; i<kecheng.length; i++)
{
//遍历得到原生的DOM对象
var e = kecheng[i];
//构成jQuery对象
var je = $(e);
console.log("学习:"+je.html());
}
}
</script>
</html>
区分一下:
- 在调试时,DOM对象有标签,jQuery对象是数组
- - - - - - - -
五、jQuery选择器
选择器,用于在DOM树种定位查找一个元素
常用选择器:
ID选择器 | $("#example") |
Class选择器 | $(".example") |
标签类型选择器 | $("img") |
子选择器 | $("#login .username" |
属性选择器 | $("input[type='checkbox']") |
演示三个小例子吧
1、ID选择器+Class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.main{
width: 300px;
padding: 20px;
height: 150px;
margin: 100px auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
#a1{
background-color: aliceblue;
text-align: center;
color: aqua;
}
.a2{
background-color: bisque;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="main">
<div id="a1">1号</div>
<div class="a2">2号</div>
</div>
</body>
<script>
//ID选择器
var a1 = $("#a1").html();
//Class选择器
var a2 = $(".a2").html();
console.log(a1+"----"+a2);
</script>
</html>
2、标签类型选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.main{
width: 100px;
padding: 20px;
height: 50px;
margin: 30px auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
#a1{
background-color: aliceblue;
text-align: center;
color: aqua;
}
.a2{
background-color: bisque;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="main">
<label>1号</label>
<label>2号</label>
</div>
<div class="main">
<label>3号</label>
<label>4号</label>
</div>
</body>
<script>
//标签类型选择器Type Selector
var jelist = $("label");
for(var i=0; i<jelist.length; i++)
{
var e = jelist[i];
var je = $(e);
console.log(je.html());
}
//另一种遍历方式
for(var e of jelist)
{
var str = $(e).html();
console.log(str);
}
</script>
</html>
3、子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.main{
width: 100px;
padding: 20px;
height: 50px;
margin: 30px auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
.a1{
background-color: aliceblue;
text-align: center;
color: aqua;
}
.a2{
background-color: bisque;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class='main a1'>
<label class='mark'> xxx </label>
</div>
<div class='main a2'>
<label class='mark'> yyy </label>
</div>
</body>
<script>
// 子选择器 .box2 .name 表示在class=‘box1' 下找 class='name'的节点
console.log ($(".box1 .mark").html());
console.log ($(".box2 .mark").html());
</script>
</html>
六、显示与隐藏
显示/隐藏
显示 : $(xxx).hide();
隐藏 : $(xxx).show();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.box{
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<button onclick="off()">隐藏</button>
<button onclick="on()">显示</button>
</div>
<div class="box">
<img class="langman" src="img/james01.jpeg" />
</div>
</body>
<script>
function off()
{
$(".langman").hide();
}
function on()
{
$(".langman").show();
}
</script>
</html>
淡入/淡出
淡入 : $(xxx).fadeIn()
淡出 : $(xxx).fadeOut()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<style>
/* 头像框 */
.thumb {
position: relative;
width: 600px;
height: 400px;
}
/* 头像框 / 图像 */
.thumb img {
width: 100%;
height: 100%;
}
/* 头像框 / 下方遮罩层 */
.thumb .mask {
display: none;
position: absolute;
width: 100%;
height: 30px;
bottom: 0px;
background-color: #C0C0C0; /*半透明 */
}
/* 头像框 / 下方遮罩层 / 按钮 */
.thumb .mask button {
width: 49%;
height: 100%;
box-sizing: border-box;
background-color: #fff0; /* 透明 */
border: 1px solid #aaa;
}
.thumb .mask button:hover{
color: blue;
}
</style>
</head>
<body>
<div class='thumb' onmouseenter="$('.mask',this).fadeIn()"
onmouseleave="$('.mask',this).fadeOut()">
<img src='img/nanlan.jpeg' />
<div class='mask'>
<button> 重新上传</button><button> 删除 </button>
</div>
</div>
</body>
</html>
整理了一天,大三前的最后一篇博客,希望以后还可以每天坚持学习java,写博客,爱好者,来......