基本语法学习查看: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)界面框架
①上中下分栏界面
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中,表格刷新之后添加这句。
②表格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;