【网页学习】HTML + CSS + JS

基本语法学习查看：W3school

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");//JSvar 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）符号

空格：&nbsp

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"); //参数必须为stringparseFloat(“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-09function 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:ssfunction 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+"-"+dayfunction 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+"-"+dfunction 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;