第二章HTML
HBuilder的使用
边改边看模式
chrome浏览器看.
HTML的基本格式
超文本标记语言
HyperText Markup Language
HyperText 超文本
Markup 标记<><><>为标记.
<head> 头部信息 </head>
<body> 主体内容 </body>
<taitle>写在头部内</taitle>
1.标记成对出现
2.空白字符不影响显示.
3.写在<body>里面注释 <!--
作者：offline
时间：2018-12-29
描述：
-->
源码与执行
源码:HBuilder里面写的.
执行:用户在浏览器里面打开网页
在这里,浏览器是一个解释执行HTML源码的工具.
2.2文本与段落
<h1> header,1级标题.
<h2> header 2级标题.
<p> paragraph 段落
<br>break 换行.
一般把文本放在某个标签下面.
有的标签不成对出现比如<br/>或者<br>
2.3插入图片
<img src="img/XXX"/>格式
标签的属性
<img>标签应指定src属性,表示图片地址
--属性的值用单引号或者双引号包.
--多个属性用空格隔开
记住以下原则:
1.不能访问项目目录外的资源
2.使用相对路径访问
src属性不能使用本地路径.
2.4超链接
使用<a href="xxx.html"> xxx </a>
超链接的作用,进入网站首页后,不需要输入地址.
第三章URL
3.1URL
统一资源定位器,描述Internet上的一个资源地址
例如:https://baike.baidu.com/item/mySQL/471251?fr=aladdin
前半段https://baike.baidu.com/:描述该资源在哪个服务器上
item/mySQL/471251?fr=aladdin:描述该资源的相对路径.
项目目录外的文件不对internet开放.
3.2相对路径
.表示同级目录
..表示上级目录
相对路径的解析
计算过程
1.当前路径
http://127.0.0.1:8020/html0202/index.html
2.目标路径
http://127.0.0.1:8020/html0202/index.html/pp/p3.html
3.3URL的错误写法
1.带本地地址.
2.本站的资源不要带IP
本站资源是不能带IP地址的!
开发时服务器地址不稳定.
为什么不带IP,如果多人开发,难道各写各的地址?
第四章 样式
添加样式 Style
<style>
.poem
{
color: blue;
font-family:"微软雅黑";
font-size:16px;
line-height:180%;
}
</style>
<p class="poem">
啊啊啊啊啊
</p>
样式写在style标签内
.poem是样式的名字
标题 段落都可以修改.
4.2样式的检查.
谷歌浏览器F12右边鼠标标记可以查看.
每项都是name:value格式.注意冒号和分号
4.3常用样式,
以下为常用样式，务必熟练使用。
背景 background
background-color: 背景颜色
background-image:
颜色表示:
rgb 如
#F00 表示红色
#FFF 白色
#000 黑色
rgba 如 #F008 最后一个8表示透明度
rrggbb 如 #FF9309
rrggbbaa 如 #FF930988 其中 88表示透明度
边距与填充margin / padding
例：
margin: 10px
margin: 20px auto auto auto ; 按 上 右 下 左 顺序
padding: 8px
上右下左都可以分别设置，如padding-left: 8px
边框 border
例 border : 1px solid #ff0900;
其中，1px是宽度，solid是线型， #ff0900 是颜色
上下左右的边框可以分别设置
border-top / border-right / border-bottom / border-left
边框圆角 border-radius
border-radius: 4px;
上下左右4个角可以分别设置
宽度 width / min-width / max-width
例：
width: auto
width: 800px
width: 90%
百分比表示占父元素宽度的百分比
高度 height / min-height / max-height
例：
height: 400px
min-height: 300px;
文字样式
color: #444 ; 文字颜色
font: italic bold 14px "微软雅黑" ;
font-size: 字高
font-family : 字体名称
text-align : 段落对齐
4.4样式单CSS
层叠样式单.
比如新建一个poem.css
在HTML文件内引入这个css
新建一个css
使用<link rel="stylesheet" href="css/poem.css" />
<h1 class="poem">
<p class="poem">
使用样式单.css,可以统一修改网站的风格.
除此之外,可以使用style属性临时修改样式
例如:<p style="font-size:20px;">
<p class="poem" style="font-size:20px;">
<p style="font-size:20px;"> //或者另外加一行.
啊啊啊啊啊
</p>
5.1 dom
文档对象模型
HTML页面内根据<body>下每个节点,称为元素Element
例如:html0501
bady
|
|-->p-->a
|
|-->p-->img
元素的通用属性
id:给该元素设置一个全局唯一ID
name:给该元素设置一个名字
class:设置样式类名
style:设置零时样式
<img id="logo".../>
不要把显示的内容放在body之外.
5.2类选择器
Class Selector 类选择器 .short-text{}
ID Selector ID选择器 #login-panel{}
Type Selector 标签类型选择器 img{}
Descendant Selector 子选择器 #login-panel .row{}
Pseudo-Class Selector伪类选择器 button:hover{}
Class Selector 类选择器
.my-button
/* 普通按钮 */
.my-button{
padding: 8px;
border: 1px solid silver;
border-radius: 6px;
font-size: 12px;
color: #222;
background-color: #f1f1f1;
min-width: 60px;
}
/* 默认按钮 */
.my-button-default{
background-color: #0078D7;
color: #f1f1f1;
border-color: #F1F1F1;
}
<p>
<button class='my-button'> 新建 </button>
<button class='my-button'> 删除 </button>
<button class='my-button'> 添加图片 </button>
<button class='my-button'> 添加链接 </button>
</p>
指定多个class
<button class='my-button my-button-default'> 发布 </button>
优先级问题
多个样式出现冲突(重复指定),和指定顺序没有关系.
覆盖规则:后出现的样式优先级较高,
由于my-button先于my-button-default,所有my-button-default的优先级较高
5.3标签类型选择器
Type Selector
button
{
}
button.my-default
{
}
button{
padding: 8px;
border: 1px solid silver;
border-radius: 6px;
font-size: 12px;
color: #222;
background-color: #f1f1f1;
min-width: 60px;
}
<p>
<button > 新建 </button>
<button > 删除 </button>
<button > 添加图片 </button>
<button > 添加链接 </button>
</p>
<p>
<button > 放弃编辑 </button>
<button class="my-default"> 发布 </button>
</p>
5.4ID选择器
每个元素都可以设置一个id属性.
<button id="ok">...
ID应该在页面唯一.为了避免重复,一般命名应该比较长.
#ok
{
background-color: #0078D7;
color: #f1f1f1;
border-color: #F1F1F1;
}
#cancel
{
background-color: #0078D7;
color: #f1f1f1;
border-color: #F1F1F1;
}
<p>
<button id="cancel"> 放弃编辑 </button>
<button id="ok"> 发布 </button>
</p>
优先级问题
ID Selector优先级比较高.
优先级顺序(数字表示权重)
内联样式1000 <p style="xxxx">
ID选择器100 <p id="xxxx">
类选择器10 <p class="xxxx">
标签选择器1
5.5伪类选择器
即元素的每一种状态定义一个样式
xxx 普通状态显示
xxx:hover 鼠标移上去时的状态显示
xxx:active 鼠标点下时的状态显示
xxx:focus 焦点状态下的状态显示
其中,xxx可以是ID/class/Type Selector均可支持
/* 普通按钮 */
button{
padding: 8px;
border: 1px solid silver;
border-radius: 6px;
font-size: 12px;
color: #222;
background-color: #f1f1f1;
min-width: 60px;
}
/*鼠标移过时显示 */
button:hover
{
border-color:#0078D7 ;
background-color: #F1F1F1;
}
/* 鼠标按下时到抬起前*/
button:active
{
border-color: #0078D7;
background-color:#0078D7 ;
color: #fff;
}
/*元素处理焦点时*/
button:focus
{
border-color: #0078D7;
background-color:#0078D7 ;
color: #fff;
}
5.6子选择器
#login-panel button{}
在id="login-panel"元素下,所有<button>的样式
.xxx .yyy .zzz{}
在class="xxx"下的子元素class="yyy"下的class="zzz"
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#login-panel label
{
color: #444;
padding: 6px;
}
#login-panel input
{
color: blue;
padding: 6px;
}
</style>
</head>
<body>
<div id="login-panel">
<label>用户名</label>
<input type="text" /><br>
<label>密码</label>
<input type="text" /><br>
<button>登录 </button>
</div>
</body>
</html>
6.1网页布局
<div>,division 划分,层
<div>是网页布局的主要工具,使用div把网页划分为一块一块的区域
布局相关的属性
width/height
margin/padding
display
position
z-index
6.2padding 填充 :子元素与自己的距离
margin 边距:自己与外部元素的距离
6.3box模型
.test1
{
border: 4px solid blue;
margin: 8px;
padding: 16px;
width: 200px;
height: 50px;
}
box-sizing(box的尺寸)
box-sizing:border-box;
(content+padding+border)一共的长200px高50px
box-sazing:content-box;
指文本区200px*50px
浏览器的兼容性
.test1
{
box-sizing:border-box; /*标准属性Chrome,IE*/
-moz-box-sizing:border-box; /*FireFox*/
-webkit-box-sizing:border-box; /*Safari*/
width:200px;
height:50px;
}
不同标签默认的box-sizing是不同的
6.4行内元素与块元素
为什么<lable>等标签无法设置widht和height?/
为什么<div>默认能占满一行?
display属性
display用于控制行内元素,还是块元素
常见的4种设置:
inline:行内元素,不可设置宽高
block:块元素独占一行.
inline-block:行内块元素,可以设置大小,而且不占一行,
none:不占用任何空间(隐藏)
<label style="border:1px solid blue; display:block;">
Java
</label>
<label style="border:1px solid black; display:inline-block;width: 200px;">
C
</label>
<div style="border:1px solid black">xxxx</div>
<div style="border: 1px solid black; display: none;">hhhh</div>
6.5行内元素对齐
text-align:right 右对齐
text-align:left 左对齐
text-align:center 居中对齐
竖直对齐
1.指定父容器的height 和line-height等高
2.指定子元素的vertical-align属性
.container
{
width: 600px;
height: 300px;
border: 1px solid black;
text-align: center;
line-height: 300px;
}
<div class='container'>
<button style="vertical-align: top;">按钮1</button>
<button style="vertical-align: middle;">按钮2</button>
<button style="vertical-align: bottom;">按钮3</button>
</div>
本质上是说父元素的文字基线同高
6.6相对位置定位
position定位
position:static 默认
position:relative 相对位置
position:absolute 绝对位置
position:fixed 固定位置
position:static 默认
按各个<div>出现顺序依次布局
正常文档流(Normal Flow)
position:relative 相对位置
position:relative;
left:50px;
top:50px;
相对于正常位置,添加偏移,偏移由left/top/right/bottom属性指定
没有脱离Normal Flow,该占的位置还是占着
不是相对于父元素,而是相对于自己原有的位置.
position:absolute 绝对位置
position:absolute;
left:50px;
top:50px;
相对于谁? 向上级找父级或者父级的父级,第一个有position:absolute/relative属性的...
通常都给父元素添加relative属性
脱离Normal Flow,原有位置被后来者挤占.
必须给父元素添加position:absolute;属性.
position:fixed 固定位置
position:fixed;
left:0px;
top:50px;
相对于谁? 相对于浏览器
脱离normal flow
通常与z-index联用,防止被其他div遮盖(分层)
fixed:用于实现悬浮框.
7.1居中布局
1.添加<div>,水平方向占满
2.添加<div>,水平方向占1000px,并居中显示
水平占满
<div>是块元素,默认将占满一行空间
.top{
height:41px;
border:1px solid blue;
}
注意:
1.将<body>的margin设为0px
2.如果设为100%,则要设置box-sizing:border-box
<style>
body{
margin: 0px;
padding: 0px;
}
.top{
height:41px;
border:1px solid blue;
background-color:cornflowerblue;
}
.main
{
width: 1000px;
height: 400px;
margin: 0px auto; /*水平居中*/
background-color:greenyellow;
}
</style>
</head>
<body>
<div class=top>
顶部区
</div>
<div class="main">
底部区
</div>
</body>
水平居中
以下Style设置可以让<div>水平居中
.main
{
width:1000px;
margin:0px auto;
}
<div>是块元素,自动占满一行,浏览器会根据margin:auto自动计算左右距离
使用居中布局时注意:
1.一般需要对<body>设置样式,去掉margin-> margin:0px;
2.宽度若要设置为100%,考虑box-sizing.
3.margin的几种设置方式
margin:10px; /*top=right=bottom=left=10px*/
margin:10px 20px;/*top=bottom=10,left=right=20*/
margin:10px 20px 30px 40px /*top,right,bottom,left*/
7.2分栏布局
display:inline-block
.main{
width: 640px;
height: 400px;
border: 1px solid mediumblue;
margin: 10px auto;
}
.div1{
display: inline-block;
width: 200px ;
height: 300px;
background-color: #B22222AA;
}
只有行内元素才能实现分栏.
为什么<div>之间有间距
原因:有空白字符,如换行.tab,空格等
可写成
<div class="div1">
11111
</div><div class="div2">
22222
</div><div class="div3">
33333
</div>
如果一行被排满,则自动挤到下一行显示.
注意.1.应该设置display:inline-block
2.注意空白字符宽度
3如果被挤到下一行,注意box-sizing和空白宽度,margin也要设置为0px
7.3动态计算
使用calc()可以实现布局的动态计算
.div1{
display:inline-block;
width:200px;
}
.div2{
display:inline-block;
width:calc(100% - 200px);
}
注意:+-号两侧必须加上空格(与正负号区分)
calc()兼容写法
width:-moz-calc(100% - 200px) /*FireFox*/
width:-webkit-calc(100% - 200px) /*Safari*/
width:calc(100% - 200px) /*标准写法IE Chrome*/
margin:0px;
box-sizing:border-box;
<div>之间不留空白
7.4固定布局
margin-top:80px ; /*margin-top和顶部高度相同*/
box-shadow: 0px 2px 5px #ccc; /* 偏移0,2 扩展5px的阴影 */
body{
margin: 0px;
}
#top{
position: fixed;
top: 0px;
z-index: 101;
width: 100%;
height: 60px;
box-sizing: border-box;
background-color: #6089D4;
box-shadow: 0px 2px 5px #ccc; /* 偏移0,2 扩展5px的阴影 */
}
#left{
position: fixed;
z-index: 100;
top: 60px;
left: 0px;
bottom: 0px;
width: 187px;
background-color: #FAF8F5;
border-right: 1px solid #D3D5D5;
}
#main{
min-height: 800px;
background-color: #fff;
margin-top: 60px; /* 高度应该和顶部高度一致 */
margin-left: 187px; /* 左侧应空出一段空间 */
}
第八章
8.1表格
表格<table>,用于显示表格形式的数据
<table>表格
<tr>table row,一行
<th>table head,一个标题单元格
<td>tbale data,一个数据单元格
<style>
table{
border-collapse:collapse ; /*边框收缩*/
}
/*逗号指定多个目标样式*/
table,td,th{
border: 1px solid #ccc;
}
</style>
<body>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>13</td>
</tr>
</table>
</body>
合并单元格
使用rowspan和colspan可以指定合并单元格
例如:
<td rowspan='3'>xxx</td>
8.2标题行与数据行
可以用<thead> <tbody> <tfoot>,但不是所有浏览器都支持
<table>
<thead><tr>...</tr></thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
可以使用class替代,
8.3表格的列宽和换行
table-layout:fixed; /*自动布局还是固定宽度*/
word-break:break-all; /*换行设定*/
word-wrap:break-word; /*换行折断设定*/
<style>
table{
border-collapse:collapse ;/*边线缩进*/
table-layout: fixed;/*自动布局还是固定宽度*/
word-break: break-all;/*换行设定*/
word-wrap: break-word;/*换行折断*/
}
table,td,th{
padding: 10px;
text-align: center;
}
tr.head{
border: 0px solid #aaa;
border-width:2px 0px ;
}
tr.data{
border: 0px solid #ccc;
border-width:1px 0px ;
}
table{
width:100%;
}
table .c1{width: 60px;}
table .c2{width: 100px;}
table .c3{width: 60px;}
table .c4{width: 120px;}
table .c5{
width:calc(100% - 60px - 100px - 60px - 120px);
text-align: left;
}
</style>
</head>
<body>
<table>
<tr class='head'>
<th class='c1'>学号</th>
<th class='c2'>姓名</th>
<th class='c3'>性别</th>
<th class='c4'>手机号</th>
<th class='c5'>地址</th>
</tr>
<tr class='data'>
<td>20190001</td>
<td>赵</td>
<td>女</td>
<td>13000000000</td>
<td class='c5'>aaaaaaaaaaaaaaaaaassssssss</td>
</tr>
<tr class='data'>
<td>20190001</td>
<td>赵</td>
<td>女</td>
<td>13000000000</td>
<td class='c5'>aaaaaaaaaaaaaaaaaassssssss</td>
</tr>
</table>
第九章.
JavaScript
在html中添加一段javascript
写在body后面.
<script>
var name="xxxx"
console.log("我的"+name);
</script>
当浏览器加载网页时,会执行JavaScropt里的代码.
<script>标签没有特别指定的位置.
2.可以嵌入多段<script>
从上到下依次执行
9.2JS数据结构
JS是一种弱类型语言,
不能指定类型
var id=123123
var name="xxxx"
var sex=true
无论什么类型都用var来指定
弱类型不是没有类型,自动识别
常用类型:
number:数字
String:字符串
Boolean:布尔类型
Object:
Array:数组
9.3JS的方法
function定义方法.
function test2(a,b)
{
return a*b;
}
其中a,b是参数.
<script>
function test1()
{
console.log("asdasd");
}
function test2(a,b)
{
return a*b;
}
test1(); //方法的调用
var result = test2(10,20);
console.log(result);
</script>
注意:
1.参数不要加类型 function test2(var a,var b)不行
2.方法重载不行,以后一个为准.
3.每页的代码中相互独立,没有影响.
9.4JS的调试.
1.单步调试
2.打印调试console.log()
如果有语法错误,浏览器即是解释器,又是调试器.
第十章
10.1 JS对象
1.创建一个对象
2.添加属性和方法.
<script>
//创建一个对象,并不需要先声明一个Student类型
var stu = new Object();
//直接添加属性
stu.id = 20190103;
stu.name="xxx";
stu.sex=true;
//直接添加方法
stu.introduce = function(){
console.log("hi,i am"+this.name);
};
//调用方法
stu.introduce();
//可以直接把一个Object 输出到控制台
console.log(stu);
</script>
1.方法的形式记住
2.访问属性时,不能省略this.
10.2 JS自定义类型
js也可以先定义一个类,但是很少这么做.
<script>
function Student(id,name,sex)
{
this.id=id;
this.name=name;
this.sex=sex;
this.introduce=function()
{
console.log(this.name);
}; //注意结尾;号
}
function Teacher()
{
this.name=null;
this.start=function(){
console.log(this.name + "skl");
}; //注意结尾;号
}
var s= new Student(10,"xx",true);
s.introduce();
var t=new Teacher();
t.name="老师";
t.start();
</script>
10.3 浏览器对象BOM
浏览器对象模型
使用它们可以在JS代码中操作浏览器.
常用BOM对象包括:
window:当前窗口
screen:屏幕对象
history:访问历史
location:地址栏
localStorage:本地存储
sessionStorage:会话级存储
控制浏览器跳转
<body>
<!--
描述:按钮跳转测试
-->
<button onclick="test()"> 跳转 </button>
</body>
<script>
function test()
{
//控制浏览器跳转
location.href= "https://www.baidu.com/"
}
</script>
所有的全局对象和方法(global)都属于Window
例如:
var a=10;
相当于
window.a=10;
所有浏览器对象都基本属于window下面.
10.4文档对象DOM
文档对象模型.
当浏览器加载HTML后,<body>内所有都显示.
例如:body第一层 div第二层, button第三层,a.href第三层.
<body>
<!--
描述:按钮转换
-->
<div>
<button onclick="test()"> 跳转 </button><br />
<a id='website' href="index.html">xxxx</a> <br />
<p id="abc">abcd</p>
</div>
</body>
<script>
function test()
{
//通过元素ID找到元素
var elem =document.getElementById("website");
//修改元素内容
elem.innerHTML="aaaa"
//通过元素ID找到元素
var elem =document.getElementById("abc");
//修改文本内容
elem.innerText="1234"
}
</script>
第11章 DOM事件处理
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ppp{
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
background-color:#f1f1f1 ;
cursor: pointer;/*鼠标形状设置*/
}
</style>
</head>
<body>
<div class="ppp" onclick="test(this)">xx</div>
</body>
<script>
window.test = function(elem)
{
elem.innerHTML="aa";
};
</script>
onclick 当用户点击时调用的事件.
1.onclick里可以指定一大段代码
2.多元素都支持鼠标事件
3.单引号与双引号的混用，可以外层用双引号内层用单引号或者内存用双引号内层用单引号
4.onclick里可用的上下文参数:this,event alert提示点击了什么.
<div class="ppp" onclick="test(this,event)">xx</div> 这两个参数可以直接使用.
5.运行时检查错误,不运行就不检查错误
11.2鼠标事件
<body>
<div class="ppp"
onmouseenter="test(this)"
onmouseleave="test1(this)">xx</div>
</body>
<script>
function test(Z)
{
Z.innerHTML="hello";
Z.style.backgroundColor="#00ff00";
}
function test1(Z)
{
Z.innerHTML="welcome";
Z.style.backgroundColor="#f1f1f2";
}
</script>
11.3 键盘事件
<style>
.login{
width:300px;
padding: 20px;
height: 150px;
margin: 100px auto;
background-color:#f1f1f1 ;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
.login .prompt{
text-align: center;
margin: 10px auto;
color: #444;
}
input{
width: 100%;
padding: 6px;
margin: 2px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class='login'>
<div class="prompt">用户登录</div>
<input type='text' placeholder="用户名" /><br />
<input type="password" placeholder="密码"
onkeyup="if(event.keyCode==13){ enterPressed();}" />
</div>
</body>
<script>
function enterPressed()
{
alert("输入回车")
}
</script>
alert提示点击了什么.
input type="password" 以password的形式*****显示.
<!--描述：type=password表示密码框 placeholder表示空置时的显示 -->
11.4事件监听器
<script>
//从DOM中取得目标元素
var elem =document.getElementById("password");
//给目标元素添加一个事件监听器:当'keyup'事件发生时,运行相应的function
elem.addEventListener('keyup',function(event){
if(event.keyCode==13)
{
alert("回车");
}
});
</script>
elem.addEventListener('keyup',function(event){ });
第一个参数为事件名,如click,keyup
第二个参数是一个回调function,当对应事件发生时,此function被调用. 和匿名内部类写法相似.
本章要求不高,因为常用操作在下一章
12.1 JS文件
创建JS/* 文件名应为英文或者拼音 */
var number =102;
var example()
{
console.log("this is a example");
}
//引入JS文件.
<script type="text/javascript" src="js/sample.js"></script>
例如jQuery库的使用.
12.2引入jQuery库,对原生JS进行封装.是前端最常用的库
jquery.com
12.3使用jQuery
<body>
<label class="website">xxxxxxx</label>
<button onclick="test()">测试</button>
</body>
<script>
function test()
{
//取得class='website'的对象
var j = $('.website');
//修改目标对象的html内容
j.html('aaaaa');
//简写模式 $('.website').html("xx");
}
</script>
$('.website').html("xx");
$('.website'):取得class='website'对象
$:是一个function名称
html(str):修改目标对象里的html内容.
//从class='box1'的元素内取出html.
var str =$('.box1').html();
//设置class='box2'的元素的html
$('.box2').html(str);
//清空class='box1'的内容
$('box1').html('');
jQuery的api风格
j.html(str):带参数时表示设置 (setter)
str=j.html():不带参数时表示获取(getter)
12.4 认识jQuery对象
$(".java")实际返回了一个数组/集合同时操作所有匹配的目标元素.
jQuery对象和DOM对象的转换
DOM对象:原生对象,操作不方便
jQuery对象:封装了DOM对象,操作方法
两者可以互相转换,通常只使用jQuery对象.
//kecheng:可操作所有class='java'的元素
var kecheng =$(".java");
//e:原生DOM元素
var e=kecheng[0];
e.innerHTML="aaaaaa";
//je:jquery包装后的对象
var je=$(e);
je.addClass("ke")
//选中所有的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());
}
在调试时DOM对象由标签,jQuery对象时数组
在运行时,xxx.html is not a function说明他是原生的DOM对象.
12.5选择器
选择器,用于DOM树中定位查询一个元素常用的选择器.
常用选择器
ID选择器,如$("#example")
Class选择器, $(".large")
标签类型选择器 $("img")
子选择器 $("#login .username")
属性选择器 $("input[type='checkbox']")
标签类型选择器 $("img")
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);
}
子选择器 $("#login .username")
console.log($(".box1 .mark").html());
console.log($(".box2 .mark").html());
12.6显示和隐藏元素
显示 $(xxx).show()
隐藏 %(xxx).hide()
<body>
<div class="box">
<button onclick="test1()">隐藏</button>
<button onclick="test2()">显示</button>
</div>
<div class='box'>
<img class='thumb' src="img/微信图片_20181229161713.png"/>
</div>
</body>
<script>
function test1()
{
//实际上是动态添加了 style="display:none"
//class选择器
$(".thumb").hide();
}
function test2()
{
$('.thumb').show();
}
</script>
淡入淡出操作
淡入$(xxx).fadeIn()
淡出$(xxx).fadeOut()
"$('.mask',this).fadeIn()"
在这个父元素下选择.mask子元素.
<style>
/* 头像框 */
.thumb {
position: relative;
width: 150px;
height: 150px;
}
/* 头像框 / 图像 */
.thumb img
{
width: 100%;
height: 100%;
}
/* 头像框 / 下方遮罩层 */
.thumb .mask
{
display: none;
position: absolute;
width: 100%;
height:30px;
bottom: 0px;
background-color:#fff8 ;/*半透明*/
}
/* 头像框 / 下方遮罩层 / 按钮 */
.thumb .mask button
{
width: 50%;
height: 100%;
box-sizing: border-box;
background-color:#fff0 ;/*半透明*/
border: 1px solid #aaa;
}
.thumb .mask button:hover{
color: darkblue;
}
</style>
</head>
<body>
<div class="thumb" onmouseenter="$('.mask',this).fadeIn()"
onmouseleave="$('.mask',this).fadeOut()">
<img src="img/微信图片_20190108111207.jpg" />
<div class='mask'>
<button>上传</button><button>删除</button>
</div>
</div>
</body>
13.1jquery事件处理
使用jqueery可以给元素添加事件处理.
<body>
<button class="xxx">按钮1</button>
<button class="xxx">按钮2</button>
<button class="xxx">按钮3</button>
</body>
<script>
$(".xxx").click(function(){
var je=$(this); //this为DOM对象,$(this)包装为jquery
alert("点中了:"+je.html());
});
</script>
页面加载事件
等页面加载完成再执行:
$(document).ready(function(){
//在此执行页面加载完成后的初始化.
});
<script>
function initEventSupport()
{
$('.xxx').click(function(){
var je=$(this);
alert("按钮为"+je.html());
});
}
//ready 也是一个事件,表示页面完成加载.
$(document).ready(function(){
//页面加载完成了,再添加事件回调
initEventSupport();
});
</script>
当script写在body前面时,dom元素还没有生存,需要这么写,等待页面加载完成.
13.4 单选列表
<style>
.meru{
width: 300px;
background-color: cornflowerblue;
}
/*菜单面板-单项*/
.meru .item{
padding: 8px;
color: #fff;
text-align: center;
user-select:none; /*文字不可选中(需考虑兼容)*/
}
/*hover模式*/
.meru .item:hover{
background-color: #eee4;
border-color:#888 ;
border-width:1px 0px ;
color: #444;
}
/*选中状态(子选择器.menu元素下的.selected元素)*/
.meru .selected{
background-color:#eee8 ;
border-color:#888 ;
border-width:1px 0px ;
color:#444;
}
</style>
</head>
<body>
<div class='meru'>
<div class='item'>快速入门</div>
<div class='item selected'>c++入门</div>
<div class='item'>java入门</div>
</div>
</body>
<script>
//给每个.item 添加事件处理
$('.meru .item').click(function(){
//把旧的选中项去掉选中状态
//注意:removeClass()参数里不需要添加点号
$('.meru .selected').removeClass('selected');
$(this).addClass('selected');
var str=$(this).html();
alert("选中了"+str);
});
</script>
13.03
对话框:
1.平时隐藏
2.对话框显示时,后面不能操作
3.对话框可以关闭
<style>
/* 全窗口背景 : 指定 left top right bottom */
.af-dialog{
display: none; /* 默认隐藏 */
position: fixed;
z-index: 1000; /*确保遮罩住所有后面的元素 */
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(128,128,128,0.5); /* 半透明背景色 , 除老IE之外均支持 */
}
/* 前景: 对话框窗口 */
.af-dialog .frame{
position: relative;
width: 350px;
min-height: 150px;
margin: 150px auto; /* 居中显示 */
background-color: #fff;
border-radius: 2px;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
/* 右上角的关闭按钮, 绝对定位 */
.af-dialog .close{
position: absolute;
top: 0px;
right: 0px;
border: 1px solid #fff;
}
.af-dialog .close:hover{
border: 1px solid #ccc;
}
/* 用户自定义内容区 */
.af-dialog .content {
width: 100%;
text-align: center;
margin: 50px auto;
}
</style>
</head>
<body>
<div>
<button onclick='test1()'> 显示对话框 </button>
</div>
<!-- 对话框定义 -->
<div id='mydlg' class='af-dialog'>
<div class='frame'>
<img class='close' src='img/ic_close.png'>
<div class='content'>
Af-Dialog 对话框演示!
</div>
</div>
</div>
</body>
<script>
function test1()
{
showDialog("#mydlg");
}
/* 可以传一个 jQuery对象，也可以传一个字符串 */
showDialog = function(selector)
{
var dlg = selector; //这3句没完全理解.
if(selector.constructor == String) //这3句没完全理解.
dlg = $(selector); //这3句没完全理解.
// 点击关闭时，关闭对话框 从父窗口dlg找到.close元素
$(".close", dlg).click(function(){
dlg.hide(); // Closure 闭包
});
dlg.show();
}
</script>
1.全窗口背景af-dialog
2.左上角关闭按钮:绝对定位在右上角
3.在父元素下找子元素:$('.class',dlg)
4.添加事件处理.
编程所有图标可以在iconfot.cn上下载.
14.1 表单处理(文本框)
文本框<input type='text'/>
获取值str=$('xxx').val()
设置值$(xxx).val('new value')
和html()方法类似,一个是getter 一个是setter.
<body>
<div>
<button onclick="test1()">获取值</button>
<button onclick="test2()">设置值</button>
</div>
<div class='form' style='margin-top:10px ;'>
<input type='text' class='username' />
</div>
</body>
<script>
//获取文本里的值
function test1()
{
var str = $('.username').val();
alert(str);
}
//设置文本的值
function test2()
{
$('.username').val('xxx yyy zzz');
}
</script>
14.2表单处理(复选框)
<input type="checkbox"> 复选框
<body>
<div>
<button onclick="test1()">获取值</button>
<button onclick="test2()">设置值</button>
</div>
<div class='form' style='margin-top:10px ;'>
<input type="checkbox" class='like' onchange="userChanged()"/> 你喜欢这个课程吗.
</div>
</body>
<script>
//获取文本里的值
function test1()
{
var like = $('.like').prop('checked'); //固定写法返回一个boolean的值
if(like)
alert('是的');
else
alert('为什么不呢');
}
//设置文本的值
function test2()
{
$('.like').prop('checked',true);
}
//事件处理
function userChanged()
{
var like =$('.like').prop('checked');
console.log("用户改变了选择"+like);
}
</script>
//获取文本里的值
function onSubmit ()
{
// 使用子选 器 + 属性选择器，选择所有的 checkbox
var jelist = $(".form input[type='checkbox'] ");
for(var e of jelist)
{
var je = $(e);
if( je.prop('checked')) // 判断它是否被勾选
{
var data = je.attr('data'); // attr方法可以获取属性
console.log("选择了: " + data);
}
}
}
14.3表单的处理,下拉列表
<select class='ke'>
<option value='chinese'>语文</option>
<option value='math'>数学</option>
<option value='english'>英语</option>
</select>
例:设置2个按钮,一个获取下拉菜单的value值.一个设置.
<body>
<div>
<button onclick="test1()">获取值</button>
<button onclick="test2()">设置值</button>
</div>
<div class='form' style='margin-top: 10px;'>
<select class='ke'>
<option value="chinese">语文</option>
<option value="math">数学</option>
<option value="english">英语</option>
</select>
</div>
</body>
<script>
function test1()
{
var ke = $('.ke').val();
alert("你选择了"+ ke );
}
function test2()
{
$('.ke').val('english');
}
</script>
表单处理
获取选中的值:$(xxx).val()
设置选中的值:$(xxx).val('newvalue')
动态生成
<button onclick="test3()">动态添加</button>
function test3()
{
var str="<option value='java'>Java编程</option>";
$('.ke').append(str);
}
append方法.
15.1 认识js对象.
第一种
<script>
//创建一个对象,并不需要先声明一个Student类型
var stu = new Object();
//直接添加属性
stu.id = 20190103;
stu.name="xxx";
stu.sex=true;
//直接添加方法
stu.introduce = function(){
console.log("hi,i am"+this.name);
};
//调用方法
stu.introduce();
//可以直接把一个Object 输出到控制台
console.log(stu);
</script>
第二种
每个属性以逗号隔开,最后属性不加对象.
var stu={
id:xxx,
name:"xxx",
introduce:finction(){
console.log("xxx");
}
}
stu.introduce();
第三种
//{}就是一个对象
var stu={};
//javascript里的对象,实际上是个HashMap
stu['id']=20123;
stu['name']='xxx';
stu['introduce']=function(){
console.log();
};
//调用
stu.introduce();
第四种
function test(stu)
{
console.log("学号:"+stu.id+",姓名:"+stu.name);
}
//括号包起来的就是一个对象.
test({
id:2010,
name:'xxxx'
});
//另一种遍历对象里所有属性
for(var key in stu)
{
var value=stu[key];
//jquery判断该属性是不是function
if(!$.isFuncion(value))
{
console.log(key+":"+value);
}
}
15.2 认识JS数组
基本写法
var names=new Array();
names.push("a");
names.push("b");
names.push("c");
for(var i=0;i<=names.length;i++)
{
console.log(names[i]);
}
在JS中中括号[]可以表示一个数组对象
var names =["a","b","c"];
//for循环遍历
for(var i=0;i<=names.length;i++)
{
console.log(names[i]);
}
第三种
function Student(id,name)
{
this.id=id;
this.name=name;
}
var students[];
sutdents.push(new Student(2011,"a"));
sutdents.push(new Student(2012,"b"));
sutdents.push(new Student(2013,"c"));
for(var i=0;i<=names.length;i++)
{
var stu=students[i];
console.log('学号'+stu.id+"姓名"+stu.name);
}
JS里的数组相当于Java里的ArrayList
splice()插入元素/删除元素
concat()合并
join()合成一个字符串
reverse()反转
sort()排序
15.3JSON
如何将一个学生的信息传给网站后台.
必须把Object转换成String类型
使用jQuery里自带的JSON的支持
var stu={
id:1234,
name:'xxx'
};
//Object->String
var jsonstr=JSON.stringify(stu);
console.log("转成JSON字符串:" + jsonstr);
//String-> Object
var obj =JSON.parse(jsonstr);
console.log("转成对象:");
console.log(obj);
var names={"a","b","c"};
//Object->String
var jsonstr=JSON.stringify(names);
console.log("转成JSON字符串:" + jsonstr);
//String-> Object
var arr =JSON.parse(jsonstr);
console.log("转成对象:");
console.log(arr);
16.1 选择器优化
jQuery选择器问题:在selector写错时,没有任何提示.
function doChange()
{
var target = $('.simple');
if(target.length==0) //如果target的长度为0.说明选中为null.
throw'错误的选择器'; //javascript也可以抛出异常对象
target.html('xxxx');
}
另一个解决方案
jQuery对象的length为0,表明selector有误.
16.2 表单优化
<body>
<div class='main'>
<div class='row'>新用户注册</div>
<div class='row'>
<label>用户名</label><input class='username' />
</div>
<div class='row'>
<label>密码</label><input class='password' type="password"/>
</div>
<div class='row'>
<label>手机</label><input class='cellphone' />
</div>
<div class='row'>
<button onclick="submit()">提交</button>
</div>
</div>
</body>
<script>
function submit()
{
var req={};
req.username = $('.main .username').val().trim(); //去掉两边空白字符
req.password = $('.main .password').val().trim();
req.cellphone = $('.main .cellphone').val().trim();
console.log('用户提交信息:' );
console.log(req);
}
</script>
使用afquery
<script>
function submit()
{
var f = new AfForm('.main');
var req = f.get(); // 自动取值
console.log("提交用户信息: ...");
console.log( req );
}
function init()
{
var data = {
username: '邵发',
password: '123456',
cellphone: '13810012345',
};
new AfForm('.main').set(data); // 自动设值
}
init();
</script>
16.3 对话框优化
17.1 子页面加载
function load(url)
{
$.get(url,t);
function t(data)
{
$('#con').html(data);
}
}
function load(url)
{
$.get(url,function(data){
$('#con').html(data); //加载html内容,填充到#con里面去.
});
}
其中$.get() 和jQuery.get()是等效的.
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
function load(url)
{
$.get(url,function(data){
$('#con').html(data); //加载html内容,填充到#con里面去.
});
}
</script>
</head>
<body>
<div id='head'>
<button onclick="load('test1.html')">1</button>
<button onclick="load('test2.html')">2</button>
<button onclick="load('test3.html')">3</button>
</div>
<div id='con'>
<!--
作者：offline
时间：2019-01-10
描述：内容区域
-->
</div>
</body>
17.2 页面刷新问题.
使用hash
解决办法,将当前子页面路径记在hash里
当页面刷新时,取出hash,加载子页面.
地址栏的hash即为子页面路径
// 取出所有<button>添加事件处理
$('#head button').click(function(){
// 取得button的page参数
var page = $(this).attr('page');
// 加载子页面 （封装到了afquery.js里）
Af.loadPage('#content', page);
// 记到地址栏的hash里
window.location.hash = page;
});
// 检查地址栏
if(location.hash != null && location.hash.length>0)
{
// location.hash: 示例 #home.html
var page = location.hash.substr(1); // 去掉#号
Af.loadPage('#content', page);
window.location.hash = page;
}
173.子页面JS调试
<div class='main'>
<label> xxxx有限公司711</label>
<p>
地址：中国 北京市**区**街道**号 <br>
邮编：100100 <br>
电话：010-0000000 <br>
</p>
<div>
<textarea class='message'></textarea>
<button onclick='M.doSubmit()'> 提交反馈意见 </button>
</div>
</div>
<script>
var M = {};
M.doSubmit = function()
{
var str = $('.main .message').val();
console.log(str);
alert('已提交!');
}
//@ sourceURL=about.js
</script>
通过最后一段//@ sourceURL=about.js 进行子页面调试.
18.纯静态网站发布.
没有后台支持,纯粹用于展示的网站.
只用html,css,javascript.
1.本机测试
(1),在Hbuilder里测试
(2)在WebServer里测试
2,部署到公网服务器
(1)申请一台公网服务器
(2)远程登录上去,把WebServer.zip拷贝上去
(3)把网站项目拷贝到webapps\ROOT\下
(4)启动服务
cmd mstsc
