学习笔记--JavaScript

如何插入JS 
  1. <script type="text/javascript">
  2.     document.write("开启JS之旅!");
  3. </script>
外部引入javascript文件
  1. <script src="script.js"></script>
常用互动方法：
  1. document.write()
  2. alert()
  3. confirm()
  4. prompt()
  5. window.open()
  6. window.close()
DOM（文档对象模型）
  1. var obj = document.getElementById("id")
  2. document.body
  3. obj.innerHTML
  4. obj.style.color
  5. obj.style.fontSize
  6. obj.style.display
  7. obj.className
创建数组语法：
  1. var myarray=new Array();
  2. var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
  3. var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
定义函数
  1. function add2(x,y)
  2. {
  3.    sum = x + y;
  4.    return sum; //返回函数值,return后面的值叫做返回值。
  5. }
主要事件表
onclick  
鼠标单击事件
onmouseover鼠标经过事件    
onmouseout    鼠标离开事件    
onchange    文本框内容改变事件    
onselect    文本框内容被选中事件    
onfocus    光标聚集    
onblur    光标离开    
onload    网页载入    
onunload    网页关闭
  Date日期对象
  1. get/setDate()
  2. get/setFullYear()
  3. get/setYear()
  4. get/setMonth()
  5. get/setHours()
  6. get/setMinutes()
  7. get/setSeconds()
  8. get/setTime()
parseInt()

字符串
charAt()
toUpperCase()
toLowerCase()
indexOf(subString, startIndex)
split(separator, limit)
substring(startpos, endpos)
substr(startPos, length)

Math对象，无需创建，直接使用
Array数组对象
concat()    连接两个或更多数组    
join()    把数组所有元素放进字符串，可用指定分隔符进行分隔    
pop()    删除并返回数组的最后一个元素    
push()    向数组的末尾添加一个或更多元素，返回新的长度    
reverse()    颠倒数组中的元素顺序    
shift()    删除并返回数组的第一个元素    
slice()    从某个已有的数组返回选定的元素    
sort()    对数组的元素进行排序    
splice()    删除元素并向数组添加新元素    
toSource()    返回该对象的源代码
toString()    把数组转换为字符串，返回结果    
toLocaleString()  把数组转换为本地数组    
unshift()    向数组的开头添加一个或更多元素    
valueOf()    返回数组对象的原始值
window对象方法
alert()    显示带有一段消息和一个确认按钮的对话框    
prompt()    显示可提示用户输入的对话框    
confirm()    显示带有一段消息和一个确认按钮、一个取消按钮的对话框    
open()打开一个新的浏览器窗口    
close()    关闭浏览器窗口    
print()    打印当前窗口的内容    
focus()    把焦点给予一个窗口    
blur()    把键盘焦点从顶层窗口移开    
moveBy()    可相对窗口的当前坐标把它移动指定的像素    
moveTo()    把窗口的左上角移动到一个指定的坐标
resizeBy()    按照指定的像素重新调整窗口的大小    
resizeTo()    把窗口的大小调整到指定的宽度和高度    
scrollBy()    按照指定的像素滚动内容    
scrollTo()    将内容滚动到指定的坐标    
setInterval()    每隔指定的时间执行代码    
setTimeout()    在一定的延迟后执行代码    
clearInterval()    清除setInterval()设置    
clearTimeout()    清除setTimeout()设置
History对象
window.history.[属性 | 方法]
window.history.length
window.history.back() 等价于window.history.go(-1)
window.history.forward() 等价于window.history.go(1)
window.history.go()

Location对象
location.[属性 | 方法]
属性
hash    设置或返回从#开始的url    
host    设置或返回主机名和当前URL的端口号    
hostname    设置或返回当前URL的主机名    
port    设置或返回当前URL的端口号    
href    设置或返回完整的URL    
pathname    设置或返回当前URL的路径部分    
protocol    设置或返回当前URL的协议    
search    设置或返回从？开始的URL部分
方法
assign()    加载新的文档    
reload()    重新加载当前文档    
replace()    用新的文档替换当前文档

Navigator对象
navigator.[属性]
appCodeName    浏览器代码名的字符串显示    
appName    返回浏览器的名称    
appVersion返回浏览器的平台和版本信息    
platform    返回运行浏览器的系统平台    
userAgent    返回由客户机发送服务器的user-agent头部的值

Screen对象
用于获取用户的屏幕信息
window.screen.属性        也可以不使用window这个前缀
availHeight    窗口可以使用的屏幕高度，单位像素    
availWidth    窗口可以使用的屏幕宽度，单位像素    
colorDepth    用户浏览器表示的颜色位数，通常为32位（每像素的位数）
pixelDepth    用户浏览器表示的颜色位数，通常为32位（每像素的位数）
height    屏幕的高度，单位像素    
width    屏幕的宽度，单位像素

DOM对象
元素节点，属性节点，文本节点
节点属性
nodeName    返回一个字符串，其内容是给定节点的名字    
nodeType    返回一个整数，这数值代表给定节点的类型    
nodeValue    返回给定节点的当前值    
childNodes    返回数组，这个数组由给定节点的子节点组成    
firstChild    返回第一个子节点    
lastChild    返回最后一个子节点    
parentNode    返回一个给定节点的父节点    
nextSibling    返回给定节点的下一个子节点    
previousSibling    返回给定节点的上一个子节点    
DOM操作
createElement(element)创建一个新的元素节点    
createTextNode()    创建一个包含指定文本的文本节点    
appendChild()    指定节点的最后一个子节点列表后添加一个子节点    
insertBefore()    将一个给定节点插入到一个给定节点的子节点后面    
removeChild()    删除一个给定节点的子节点    
replaceChild()    把一个父节点的子节点替换为另一个子节点

document.getElementsByName()    //返回给定名字的元素标签数组
document.getElementsByTagName()   //返回相应标签名的元素标签数组
elementNode.getAttribute(name)  //通过元素节点的属性名称获取属性的值
elementNode.setAttribute(name, value) //增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

在超链接中加入javascript
  1. <a href="javascript:replaceMessage()">...</a>
点击按钮时加入javascript

浏览器窗口可视区域大小
  1. window.innerWidth
  2. window.innerHeight

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

网页尺寸scrollHeight
var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
 var w= document.documentElement.offsetWidth || document.body.offsetWidth;
var h= document.documentElement.offsetHeight || document.body.offsetHeight;

网页卷去的距离与偏移量
scrollLeft、scrollTop、offsetLeft、offsetTop
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

编程挑战示例（选项卡切换）
  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>实践题 - 选项卡</title>
  7.     <style type="text/css">
  8.         *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
  9.         #tabs {width:290px;padding:5px;height:150px;margin:20px;}
  10.         #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
  11.         #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
  12.         #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
  13.         #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
  14.         .hide{display: none;}
  15.     </style>
  16.     <script type="text/javascript">
  17.          window.onload = function(){
  18.              var oTab = document.getElementById("tabs");
  19.              var oUl = oTab.getElementsByTagName("ul")[0];
  20.              var oLis = oUl.getElementsByTagName("li");
  21.              var oDivs= oTab.getElementsByTagName("div");
  23.              for(var i= 0,len = oLis.length;i<len;i++){
  24.                  oLis[i].index = i;
  25.                  oLis[i].onclick = function() {
  26.                      for(var n= 0;n<len;n++){
  27.                          oLis[n].className = "";
  28.                          oDivs[n].className = "hide";
  29.                      }
  30.                      this.className = "on";
  31.                      oDivs[this.index].className = "";
  32.                  }
  33.              };
  34.          }
  35.     </script>
  37. </head>
  38. <body>
  39. <div id="tabs">
  40.     <ul>
  41.         <li class="on">房产</li>
  42.         <li>家居</li>
  43.         <li>二手房</li>
  44.     </ul>
  45.     <div>
  46.         275万购昌平邻铁三居 总价20万买一居<br>
  47.         200万内购五环三居 140万安家东三环<br>
  48.         北京首现零首付楼盘 53万购东5环50平<br>
  49.         京楼盘直降5000 中信府 公园楼王现房<br>
  50.     </div>
  51.     <div class="hide">
  52.         40平出租屋大改造 美少女的混搭小窝<br>
  53.         经典清新简欧爱家 90平老房焕发新生<br>
  54.         新中式的酷色温情 66平撞色活泼家居<br>
  55.         瓷砖就像选好老婆 卫生间烟道的设计<br>
  57.     </div>
  58.     <div class="hide">
  59.         通州豪华3居260万 二环稀缺2居250w甩<br>
  60.         西3环通透2居290万 130万2居限量抢购<br>
  61.         黄城根小学学区仅260万 121平70万抛!<br>
  62.         独家别墅280万 苏州桥2居优惠价248万<br>
  64.     </div>
  65. </div>
  67. </body>
  68. </html>


posted @ 2017-05-16 15:59  KioLuo  阅读(208)  评论(0)    收藏  举报