【网页学习】HTML + CSS + JS

基本语法学习查看：W3school

概念

1）基于HTTP的服务器

Apache、IIS、Nginx、Tomcat、JBoss。

2）浏览器工作原理

HTTP解析过程

DNS解析IP

CDN工作和设计

浏览器渲染

JQuery

1）鼠标点击

①toggle事件

当指定元素被点击时，在两个或多个函数之间轮流切换。

如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);

$(selector).toggle(switch)//switch：true - 显示元素；false - 隐藏元素

2）其它

Hide() //隐藏
Show() //显示

HTML

1）DOM（文档对象模型(Document Object Model)）

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

①获取元素：

$("#id");//jQuery代码

var tbody = document.getElementById("tbody");//JS
var elCheck = document.getElementsByClassName("checkDelete");//获取到一个节点列表
for(var i=0;i<elCheck.length;i++){
//对每个节点做处理。
//如每个节点的点击事件：elCheck[i].onclick=function(){}
}
//还有getElementsByTagName 使用指定的标签名返回所有的元素（作为一个节点列表）

②获取元素相关节点：

parentNode、childNodes[i]、firstChild以及lastChild

2）event对象

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

①target

window.event.target;//规定哪个 DOM 元素触发了该事件。从而获取相关节点元素

3）符号

空格： 

CSS中：

style='white-space:pre;'表示空白被浏览器保留
white-space:nowrap; 这段代码强制字符不准换行。

4）table

<table border="8" cellspacing="10">// cellspacing 把表格单元格间距设置为 10 像素; cellpadding 属性规定的是单元边沿与单元内容之间的空间

5）图标

Font Awesome Icons使用，详情参考Font Awesome Icons

<link href="../resources/css/font-awesome.min.css" rel="stylesheet" type="text/css">

//使用图标的标签设置class="fa fa-arrow-left"，此为图标名。

6）提示

①输入框提示：placeholder

<input type="text" placeholder="请输入姓名" id="name">

②鼠标悬浮提示：title

<span class="fa fa-arrow-left" title="点击返回列表" onclick="returnPage();" style="cursor:pointer"></span>

CSS

1）display

①block：此元素将显示为块级元素，此元素前后会带有换行符。

②inline：此元素会被显示为内联元素，元素前后没有换行符。使元素显示在同一行。

③none：此元素不会被显示

④table：此元素会作为块级表格来显示，表格前后带有换行符。

⑤list-item：等同ul。此元素会作为列表显示。在内容前面自动加上黑点。

2）布局宽度

width: calc(100% - 10px)； //按百分比计算分布页面
min-width:120px;//防止页面变小后长度变化

3）去掉链接下划线

a{ text-decoration:none} // text-decoration:underline;添加下划线

4）鼠标

style=”cursor: pointer “//链接手型，多种浏览器支持

crosshair是十字型

text是移动到文本上的那种效果

wait是等待的那种效果

default是默认效果

5）其它属性

white-space: nowrap;//规定段落中的文本不进行换行
font-weight: bold;加粗

6）背景图片

background-image:url() 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上
background:url(图片地址) no-repeat left top

7）绝对路径和相对路径

相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。

绝对路径：以Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

路径符号

“.”–目前所在路径

“..”–代表上一层目录

“../../”–代表上一层目录的上一层目录

“/”–代表根目录

JS

1）计算

①Math

Math.ceil(count / pagesize); //向上整除 4/3=2;
Math.floor(count / pagesize); //向下整除 4/3=1;

②eval

eval(string) 计算某个字符串，并执行其中的的 JavaScript 代码。

2）类型转换：

parseInt("1234blue"); //参数必须为string
parseFloat(“12.5”);  //参数必须为string

3）ajax:

Var message = “”;//在ajax（）;内部不可用return，所以需要return的地方给message赋值，ajax运行完再返回。
$.ajax({
type: "get",
url: url,
async: false,// 默认是true.  false为同步，将整个浏览器锁死，执行结束后，才可以执行其它操作。 true是请求和其后面的操作是异步执行的，未执行完就可能已经执行了 ajax请求后面的操作
datatype: "json",
data: {
"pageNo":Page,//参数
},

success: function(data) {
if(data.result == 1) {

}else{

}
},
error: function() {
console.log('数据加载失败');
}
});

4）元素

$(selector).attr(“id”)// 返回被选元素的属性值。如获取其id
$(selector).attr("class","hideRow") //设置被选元素的属性和值。如修改类名

5）页面跳转

①a标签的href和onclick属性

① onclick 先执行，然后是href执行。如果href有返回值，则页面内容将被替代

② onclick返回false，href不执行。

onclick="xxx();return false;".

③ 链接通过onclick执行操作。

<a href="javascript:void(0);" onclick="stick()”>

②Onclick函数中传字符串参数

onclick='selecthoods(\" "+a + "\");

③网页传参

window.location.search方法是截取当前url中“?”后面的字符串

//获取url中"?"符后的字串
//theRequest为一个类，类中成员为传递的参数
function GetRequest(url) {

var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURI((strs[i].split("=")[1]));
}
}
return theRequest;
}

注意出现问题：汉字传参之后，网页无法显示。

解决方案：对汉字进行URL编码encodeURI(TName)即可。

④页面加载即运行

$(document).ready(function() {

});

⑤页面刷新

window.location.href = "brief.html";//页面链接切换为此链接

⑥点击后退

onclick=”javascript: window.history.back()”或者window.history.go(-1)

⑦打开新窗口

//<a>写法
<a href="http://" target="_blank">Welcome</a>
//JS写法
window.open("http://");

⑧

6）语法

①each

var code = "";
$.each(data, function(i, item) {

var City = item.city.trim(); //区县
var Time= item.TM.trim(); //时间

code = code + '<tr>' +
'<th>' + (i + 1) + '</th>' +
'<th>' + City + '</th>' +
'<th>' + Time + '</th>' +
'</tr>';
});
var tbody = document.getElementById("tbody");
tbody.innerHTML = code;

②控制台输出

console.log(message)

③try-catch

　try {
　　// 此处是可能产生例外的语句
　　} catch(error) {
　　// 此处是负责例外处理的语句
　　} finally {
　　// 此处是出口语句
　　}

④typeof

a.对于字符串类型， typeof 返回的值是 string。

typeof("123");//返回的值是string。

b.对于布尔类型， typeof 返回的值是 boolean

c.对于对象、数组、null 返回的值是 object

typeof(window);typeof(document);typeof(null)//返回的值都是object

d.对于函数类型，返回的值是 function。

typeof(eval);typeof(Date);//返回的值都是function

c.未定义的（比如说不存在的变量、函数或者undefined），将返回undefined。

d.对于数字类型返回number.

在JavaScript中，特殊的数字类型还有几种：

Infinity　　　　　　　　　　　表示无穷大特殊值

NaN　　　　　　　　　　　　特殊的非数字值

Number.MAX_VALUE　　　　可表示的最大数字

Number.MIN_VALUE　　　　可表示的最小数字（与零最接近）

Number.NaN　　　　　 　　 特殊的非数字值

Number.POSITIVE_INFINITY　表示正无穷大的特殊值

Number.NEGATIVE_INFINITY 表 示负无穷大的特殊值

typeof(1);//返回number

⑤数组array对象

//创建
waterAll = new Array();
waterAll[0] = water1;
waterAll[1] = water2;

new Array(size);
new Array(element0, element1, ..., elementn);

W3School中array方法的描述为：

⑥

7）解码

decodeURI(message);// 将 %20 转换成 空格 ;encodeURI将 空格 转换成 %20

8）鼠标事件

①鼠标移入移出事件

<style type="text/css">
.style0{
background-color:#FFFF00;
}
.style1{
background-color:#00FFFF;
}
</style>

<td id="td1" onmousemove="document.getElementById('td1').className='style0';" onmouseout="document.getElementById('td1').className='style1'"><div align="center" class="STYLE2">主页</div></td>

②禁止页面随鼠标滑轮滚动，缩放

<script language="javascript">
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta && event.ctrlKey){//IE/Opera/Chrome
event.returnValue=false;
}else if(e.detail){//Firefox
event.returnValue=false;
}
}

/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari

</script>

③

9）字符串

①contains方法替代

js中没有contains()方法，可以用indexOf(“str”) != -1代替（表示找到了）。

10）对象

①Window对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

②top命令

该变量指分割窗口（frameset或者iframe）最高层次的浏览器窗口。top指的是最外层的frameset。

top['location']['href'] = "http://abc"

等价于

top.location.href = "http://abc"

<iframe src="redirect.php"></iframe>
<iframe src="https://www.google.com/images/srpr/logo11w.png"></iframe>
<script>
top[0].eval('_=top[1];alert();_.location="javascript:alert(document.domain)"');
</script>
//top[0]为本身的html页。top[1]为第一个iframe ，以此类推。

③opener对象。

opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如：A页面通过window.open()方

法弹出了B页面，在B页面中就可以通过opener来引用A页面，这样就可以通过这个对象来对A页面进行操作。

④parent对象

parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如：A页面中有一个iframe或frame，那么iframe

或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。

⑤self

当前窗口。

⑥Frame对象

Frame 对象代表一个 HTML 框架。

在 HTML 文档中 frame标签 每出现一次，就会创建一个 Frame对象。

//<FRAME>必须在 <FRAMESET> 范围中使用

<frameset rows="33%,10%,*">
<frame src="http://www.baidu.com/.html" name="frame1" id="frame1" />
<frame src="http://www.baidu.com/.html" name="frame2" id="frame2" />
<frame src="http://www.baidu.com/.html" name="frame5" id="frame5" />
</frameset>

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。

⑦Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

demo

1）界面框架

①上中下分栏界面

点击下载frame.zip

2）列表ul li

①li点击

html:

<ul id="test">
<li>Glen</li>
<li>Tane</li>
<li>John</li>
<li>Ralph</li>
</ul>

window.onload = function(){
var obj_lis = document.getElementById("test").getElementsByTagName("li");
for(i=0;i<obj_lis.length;i++){
obj_lis[i].onclick = function(){
alert(this.innerHTML);
}
}
}

②li去掉标记圆点

<li style="list-style:none;">不显示圆点<li>

3）表格

①点击表头列排序

html:

<table id="tableR"  class="tablesorter">
<thead><!--表头-->
<th>序号</th>
<th>区县</label></th>
<th>时间</label></th>
</thead>
<tbody id="tbody">
</tbody>
</table>

class=”tablesorter”是为了实现表格排序，使用：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>

//第一列不进行排序(索引从0开始) （JS添加）
$.tablesorter.defaults.headers = {0: {sorter: false}};
$(".tablesorter").tablesorter();

$(".tablesorter").trigger("update"); //JS中，表格刷新之后添加这句。

点击下载jquery.tablesorter.js

②表格CSS

border-collapse:collapse;//去掉表头的分割线
border-bottom: 1px solid #0F9D01;//最小设置为1px

③小尺寸屏幕下table自动增加水平滚动

点击查看代码

需要注意的是：每个th增加属性：

style="min-width:66px"

4）cookie

function setCookie(name, value, iDay) {
var exp = new Date();
exp.setTime(exp.getTime() + iDay * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";;
};

function getCookie(name) {
var arr = document.cookie.split('; '); //多个cookie值是以; 分隔的，用split把cookie分割开并赋值给数组
for(var i = 0; i < arr[i].length; i++) //历遍数组
{
var arr2 = arr[i].split('='); //原来割好的数组是：user=simon，再用split('=')分割成：user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
if(arr2[0] == name) //如果数组的属性名等于传进来的name
{
return unescape(arr2[1]); //就返回属性名对应的值
}
}
return ''; //没找到就返回空
};

function removeCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if(cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
//setCookie(name, 1, -1); //-1就是告诉系统已经过期，系统就会立刻去删除cookie
};

5）日期

①日期计算

//获取当前的日期时间 格式“yyyy-MM-ddHH:MM”
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
var currentdate = date.getFullYear() + seperator1 + get2Bit(month) + seperator1 + get2Bit(strDate) +
get2Bit(date.getHours()) + seperator2 + get2Bit(date.getMinutes());
return currentdate;
}
//如果为1-9，返回01-09
function get2Bit(num) {

if(num >= 0 && num <= 9) {
num = "0" + num;
}
return num;
}
//获取参数日期时间的前beforeTime小时日期 格式“yyyy-MM-ddHH:MM”
function getBeforeFormatDate(beforeTime) {
var date = new Date(new Date() - beforeTime * 60 * 60 * 1000); //取前一天的时间;
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
var currentdate = date.getFullYear() + seperator1 + get2Bit(month) + seperator1 + get2Bit(strDate) +
get2Bit(date.getHours()) + seperator2 + get2Bit(date.getMinutes());
return currentdate;
}
//将毫秒数转换为格式化时间 yyyy-MM-dd hh:mm:ss
function getFormatTime(time) {
if(time.length == 0) {
return "";
}
return new Date(parseInt(time)).Format("yyyy-MM-dd hh:mm:ss");
}
Date.prototype.Format = function(format) {

var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond

}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}

//获取当天时间。year+"-"+month+"-"+day
function GetDateNow() {
var dateNow = new Date();
var year = dateNow.getFullYear();
var month = (dateNow.getMonth() + 1) < 10 ? "0" + (dateNow.getMonth() + 1) : (dateNow.getMonth() + 1);
var day = dateNow.getDate() < 10 ? "0" + (dateNow.getDate()) : dateNow.getDate();
return year + "-" + month + "-" + day;
}

//获取当天30天后的时间。y+"-"+m+"-"+d
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1); //获取当前月份的日期，不足10补0
var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
return y + "-" + m + "-" + d;
}

②日期选择控件

6）页码分页算法

点击查看

7）一键下载文件脚本

用处：一个网页有167列表项，每一项中都有一个文件要下载并重命名。在控制台写如下代码（为了下载能重命名，可以用360极速浏览器实现）。

for(var i=1;i<167;i++){
$("#download_button"+i).click();
}
for(var i=1;i<167;i++){
var btn=document.createElement("a");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
btn.setAttribute("id",'download_aaaw'+i);
btn.setAttribute('href',$('#download_button'+i).attr('href'))
document.body.appendChild(btn);
//$('#download_button'+i).click();
(function(i){ console.log(i);setTimeout((function(i){console.log(i);console.log($('#download_aaaw'+i).attr('href'));window.open($('#download_aaaw'+i).attr('href'))})(i),i*1000) })(i)

}

手机网页开放

1）设置

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

网页宽度默认等于屏幕宽度（width=device-width），

初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

2）其它

①Html文字只显示一行，隐藏多出来的文字：

/*一行表示**/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;