系列文章 / Web前端基础 / 总共21篇

Web前端基础（21）HTML5的其他标签和补充

2018-10-18 · 大约 200 个字 · 预计 1 分钟读完

文本标记

p是最常用的文本标记之一，要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注，通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。

1
2
3
4
5
6
7
<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
	<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性，而em表示内容的着重点。根据内容需要，这两个元素可以单独使用，也可以一起使用。

1
2
    <p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
        friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示，而将em文本以斜体显示，如果em是strong的子元素，将同时显示粗体和斜体。

注意：不用使用b元素代替strong，也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的，但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

Web前端基础（20）HTML5基本结构

2018-10-17 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · HTML5

基本HTML结构

每个HTML文档都应该包含一下几个组成部分：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> 是声明页面为HTML5文档，在HTML4和XHTML1.0时代，有好几种DOCTYPE，每一种都会指明HTML的版本，以及使用的是过度型还是严格型模式，太难记了，所以每次都需要复制黏贴进来，现在所有浏览器都理解这种简单的HTML5的DOCTYPE,所以可以忘记过去复杂繁琐的DOCTYPE了。

<html lang=“en”> 是声明了页面默认语言。

Web前端基础（19）jQuery对文本框和表单的操作

2018-10-17 · 大约 700 个字 · 预计 4 分钟读完

Web前端 · 基础

Web前端 · 基础 · jQuery · 表单

单行文本框

首先在网页中创建一个表单，代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input:focus, textarea:focus{
            border:1px solid #f00;
            background: #fcc;
        }
    </style>
</head>
<body>
    <form action="#" method="POST" id="regForm">
        <legend>个人基本信息</legend>
        <div>
            <label for="username">名称：</label>
            <input id="username" type="text"></label>
        </div>
        <div>
            <label for="pass">密码：</label>
            <input id="pass" type="password"></label>
        </div>
        <div>
            <label for="msg">详细信息：</label>
            <textarea id="msg"></textarea>
        </div>
    </form>
</body>
</html>

但是IE6并不支持除超链接元素之外的:hover伪类选择器，此时可以用jQuery来弥补。

Web前端基础（18）jQuery中的动画

2018-10-16 · 大约 200 个字 · 预计 1 分钟读完

Web前端 · 基础

Web前端 · 基础 · jQuery · 动画

show()和hide()

show()和hide()是jQuery中最基本的动画方法，该动画操作了display:none;

1
2
3
4
5
6
7
$(function(){
    $("#panel").toggle(function(){
        $(this).next().hide();
    }, function(){
        $(this).next().show();
    })
})

show()和hide()可以传入动画执行毫秒数或者传入“nomal", “slow”, “fast"关键字控制速度。

fadeIn()和fadeOut()

fadeIn()和fadeOut()只是改变透明度。

slideUp()和slideDown()

slideUp()和slideDown()只会改变元素的高度（由上到下展开，由下到上收起）。

自定义动画animate()

1
animate(params, speed, callback);

参数说明： params: 一个包含样式属性和值的映射 speed:速度参数，可选 callback:动画完成时执行的函数，可选

1
2
3
4
5
$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px"}, 3000);
    })
})

Web前端基础（17）jQuery中的事件

2018-10-16 · 大约 400 个字 · 预计 2 分钟读完

Web前端 · 基础

Web前端 · jQuery · 基础 · 事件

事件绑定

1
bind(type[, data], fn);

第一个参数是绑定的事件类型，第二个参数可选是额外数据对象，第三个参数是处理函数。

在文档装载完成后，可以使用bind()方法来对元素绑定特定的事件，可以绑定的事件有：

事件	说明
blur	元素失去焦点
focus	元素获得焦点
load	一张页面或一幅图像完成加载。
resize	重置按钮被点击
scroll	滚动事件
unload	用户退出页面
click	点击事件
dblclick	双击事件
mousedown	鼠标按键按下
mouseup	鼠标按键抬起
mousemove	鼠标被移动
mouseover	鼠标移到某个元素上
mouseout	鼠标从某个元素上移开
mouseenter	鼠标进入某个元素
mouseleave	鼠标离开某个元素
change	域的内容被改变
select	文本被选中
submit	确认按钮被点击
keydown	键盘按下
keypress	某个键盘按键被按下并松开。
keyup	某个键盘按键被松开
error	在加载文档或图像时发生错误。

Web前端基础（16）jQuery操作HTML属性和元素

2018-10-16 · 大约 400 个字 · 预计 2 分钟读完

Web前端 · 基础

Web前端 · 基础 · jQuery · 属性 · 样式 · DOM

属性操作

在jQuery中，用attr()方法来获取和设置元素的属性，用removeAttr()方法来删除元素属性。

attr()方法使用示例

1
2
3
4
5
6
7
var $para = $("p");
//获取
var p_text = $para.attr("title");  
//设置
$para.attr("title", "dp2px");
//可以一次修改多个属性
$para.attr({"title":"dp2px", "name":"地痞兔劈叉"});

removeAttr()方法使用示例

1
$("p").removeAttr("title");

样式操作

1
<p class="myclass" title="dp2px">地痞兔劈叉</p>

上面代码中，class其实也是p元素的一个属性，因此可以用attr()方法获得和设置class的内容。jQuery提供了一个addClass()方法来追加class值。提供了removeClass()来移除class值。

1
2
$("p").addClass("another");
$("p").removeClass("another");

jQuery中还提供了一个toggleClass()方法来实现单机切换（添加和删除）操作

另外判断是否有某个class值用方法hasClass()来判断。

Web前端基础（15）jQuery选择器和DOM操作

2018-10-15 · 大约 1000 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · jQuery · 选择器 · DOM

jQuery 是 JavaScript 中使用最广泛的一个库，它可以帮助我们简化 js 代码，更好的完成工作。

痛点

javascript 遇到的一些痛点：

window.onload 事件有个覆盖问题，我们只能写一个
代码容错性差
浏览器兼容性问题
书写很繁琐，代码量多
代码很乱，各个页面到处都是
动画效果，我们很难实现

版本

目前jQuery有三个大版本：

1.x：兼容 ie678,使用最为广泛的，官方只做 BUG 维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容 ie678，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1

引入

使用 jQuery 只需要在页面的 <head> 引入 jQuery 文件即可

1
2
3
4
5
6
7
8
9
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

Web前端基础（14）JS实践案例--旋转木马效果

2018-10-14 · 大约 1100 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · 旋转木马 · 案例 · Demo

Demo演示效果

html布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="wrap" id="wrap">
   <p class="headp"><a href="http://dp2px.com"><span id="headlink">旋转木马轮播效果</span></a></p>
   <div class="slide" id="slide">
       <ul>
           <li><a href="#"><img src="images/slidepic1.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic2.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic3.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic4.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic5.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
       </ul>
       <div class="arrow" id="arrow">
           <a href="javascript:;" class="prev"></a>
           <a href="javascript:;" class="next"></a>
       </div>
   </div>
</div>

Web前端基础（13）JS实践案例--自动轮播图片

2018-10-14 · 大约 1000 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · 图片轮播 · JavaScript · 案例

Demo演示

布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="all" id="all">
    <div class="screen">
        <ul id="ul">
            <li><img src="images/banner1.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner2.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner3.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner4.png" alt="" width="800" height="500"></li>
        </ul>
    </div>
</div>

Web前端基础（12）JS实践案例--留言板

2018-10-13 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · Demo · 案例 · JavaScript · 留言板

演示和源码

我的留言界面有一个留言板，留言板上面的纸条是可以随着鼠标拖动的，下面我们来实现一下可拖动的留言框。

演示效果：

html布局

1
2
3
4
5
6
7
8
9
<div class="nav">
    <a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息   (可以拖拽)
            <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
</div>

Web前端基础（11）offset家族

2018-10-13 · 大约 200 个字 · 预计 1 分钟读完

Web前端 · 基础

Web前端 · 基础 · offset

offset家族

offset 单词本身是偏移量的意思， JavaScript中有一套获取元素尺寸和位置的方法，就是通过offset家族来实现的。

offsetWidth和offsetHeight

得到对象自己的宽度和高度。这个高度和宽度是对象自己所占用的实际高度，包括padding和边框。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<style>
    #demo {
        height: 100px;
        width: 200px;
        padding: 5px;
        margin:3px;
        border: 8px solid #E9414C;
    }
</style>
<div id="demo"></div>
<script>
    var demo = document.getElementById("demo");
    console.log(demo.style.width);   //style.width 只能得到行内样式的宽度
    console.log("offsetWidth", demo.offsetWidth);   //200 + 5 * 2 + 2 * 8 
    console.log("offsetHeight", demo.offsetHeight); 
</script>

Web前端基础（10）JS实践案例--鼠标跟随

2018-10-13 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · Demo · 案例 · JS

演示和源码

html布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="nav" id="nav">
    <span class="cloud" id="cloud"></span>
    <ul>
        <li>首页新闻</li>
        <li>师资力量</li>
        <li>活动策划</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
</div>

css布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
    background-color: #000;
}
.nav {
    width: 800px;
    height: 42px;
    background:url("images/rss.png") no-repeat right center #fff;
    margin: 100px auto;
    border-radius: 5px;
    position: relative;
}
.nav ul {
    position: absolute;
    top: 0;
    left: 0;
}
.nav li {
    float: left;
    width: 83px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #000;
    cursor: pointer;
}
.cloud {
    width: 83px;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    background: #ff0000;
    border-radius: 5px;
}