JS学习笔记(慕课网)

1. confirm(var or "str');

    点击确认,返回true;点击取消,返回false.

2. prompt(str1,str2)

    str1显示在消息对话框中的文本,不可修改;str2文本框中的内容,可修改

    点击确认,返回文本框中的内容即str2;点击取消,返回null

3.window.open("url","打开方式","参数字符串") 

URL:打开窗口的网址或路径。
窗口名称:被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。
参数字符串:设置窗口参数,各参数用逗号隔开。

 4.ele.innerHTML属性用于获取或更改指定HTML元素结点内部的内容,返回字符串

   ele.value则是用于获取或者设置表单元素的值

   document.write()方法只可用于html中输出内容,如果在文档加载完了以后再使用该方法,则输出内容会覆盖整个页面。例如在加载完后又调用了某个方法,而方法中包含该输出语句,则会复写整个页面。

5.更改元素样式:ele.style.property="value";

                          ele.style.display="none";实现隐藏

  移除设置的样式:ele.removeAttribute("style");

6.ele.className属性用于获取元素类名或者增加(更改)一个类以改变其样式

7.操作符优先级

    算术操作符>比较操作符>逻辑操作符>赋值操作符

8.数组

(1)Js中的数组是变长的,即便创建时指定了长度,也是自动扩展的。var myarr = new Array(length);

   声明时即赋值:var myarr =  new Array(1,2,3,4)或var myarr = [1,2,3,4];

(2)length为数组的属性

(3)二维数组

        创建方法一:  

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //在声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值,每个数组元素的值为i+j
   }
 }
   创建方法二:

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
9.当变量声明了却未赋值时为undefined类型

10.多重判断

if(条件1)
{ 条件1成立时执行的代码}
else  if(条件2)
{ 条件2成立时执行的代码}
...
else  if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}
此时,使用switch语句更方便:

var myweek =3;//myweek表示星期几变量
switch(myweek)
{
 case 1:
 case 2:
 document.write("学习理念知识");
 break;
 case 3:
 case 4:
 document.write("到企业实践");
 break;
 case 5:
 document.write("总结经验");
 break;
 default:
 document.write("周六、日休息和娱乐");
}

11.可通过ele.value获取元素所包含文本的值,以及下拉列表的值


内置对象

12.字符串String

(1)charAt(index)

    返回位于index处的长度为1的字符串,若index超出数组范围则返回空字符串

(2)indexOf(substr,startpos)

       返回指定字符串在原字符串中首次出现的位置,若未指定开始检索的位置startpos,则从字符串开始位置检索

       未检索到返回-1

(3)split(separator,limit)

        对原数组进行分割,分割点为separator,limit指定分割次数,即返回的子串数目。分割点不会返回;返回由子串作为元素组成的数组。

        若把空字符“”作为分割点,则每个字符之间都会被分割

(4)substring(startpos,endpos)

       提取从包含startpos到endpos-1位置的字符串;若starpos和endpos相等,则返回空字符串

(5)substr(startpos,length)

      提取从startpos开始指定length个数的字符串;若后者省略则是一直提取到末尾;若startpos为负数,则是从倒数第几个数开始往后取,-1表示从倒数第一个字符开始提取,-2表示倒数第二个,,,依次类推

13.Math对象

    Math对象是一个固有对象, 无需创建就可以直接使用其方法和属性。

   向上取整ceil(),向下取整floor(),四舍五入round();

   random(),返回一个0-1之间的随机数

14.Array对象

(1)concat()

      连击多个数组,返回一个新数组,不会改变原来的数组:var newarr = myarr.concat(array1,array2,,,);

(2)join("separator")

       用指定的分隔符把数组中的元素连成一个字符串,未指定分隔符则用逗号连接;

(3)reverse()

       颠倒数组中元素顺序,会改变原来的数组而不是生成新的数组

(4)slice(start,end)

      选取从start到end(不包括该元素)的数组元素,若start为负数则是从倒数第几个数开始往后取;该方法返回一个新数组,不会改变原来的数组

(5)sort(方法函数)

      若未指定排序的方法函数,则按照unicode进行排序;

      方法函数:

 该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下: 

  若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
  若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
  若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。

15.Date对象

   例子,显示日期,格式为xxx年xx月xx日 星期x 

  var date = new Date();
  var weekday = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
  var dayindex = date.getDay();
  document.write(date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+" "+weekday[dayindex]);

Window对象

16. setInterval("function()/代码"或者function,interval)

     每间隔一定时间调用函数,返回值可传递给clearInterval取消间隔调用

17.setTimeout("function()/代码"或者function,interval)

    代码推迟一定时间执行,只执行一次

    若一个函数要每隔一定时间执行一次,例如计数器,可通过setTimeout调用自身 

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 i=setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
<input type="button" value="Stop" onClick="clearTimeout(i)" />
</form>
</body>
</html>
18. history对象(仅针对当前窗口,每个窗口有自己的history对象)

    该对象用于记录用户浏览过的URL,打开浏览器窗口的时候,每个窗口、框架、标签都有自己的history对象和特定的window对象相关联

    history.length

    history.back()  /  foward()  /  go(),go(-1)相当于back()

19.location对象

    用于获取或设置当前窗口的url

20.navigator对象

    包含浏览器的信息,常用于获取浏览器的版本以及运行浏览器的操作系统等信息

21.screen对象

    获取用户的屏幕信息


HTML DOM 

22.DOM结点属性

(1).nodeType

    元素:1

    属性:2

    文本:3

(2). nodeValue

   元素结点:undefined或null

   属性结点:属性值

   文本结点:文本

(3). nodeName

   元素结点:与标签名相同

   属性结点:属性名

   文本结点:#text

   文档结点:#document

22.结点间的空格被除IE以外的浏览器看做一个文本结点,而IE浏览器忽略,在计算子结点个数时注意区别;计算子结点时如果文本或者空格没有被别的结点包裹才算子节点,包裹了则是孙结点,不能算做子结点了

23.node.childNodes

    node.firstChild

    node.lastChild

    node.parentNode

    node.nextSibling :下一个兄弟结点,位于同一树层级中

    node.previousSibling:前一个兄弟结点,如无结点则返回null

     找后一个元素结点:    

function get_nextSibling(n){
        var x=n.nextSibling;
        while (x && x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
 }
   找前一个元素结点:

function get_previousElement(n){
        var x = n.previousSibling;
        while(x && x.nodeType!=1){
            x=x.previousSibling;
        }
        return x;
}
24. node.appendChild(new node)

     parentNode.insertBefore(newnode,refferenceNode):在当前子结点前再插入一个子结点

     parentNode.removeChild(childNode):删除某个子结点,返回删除的结点,若失败则返回null。删除的结点不在DOM树中,但还在内存中,可将返回的结点值设为null,完全删除对象

    注意:遍历删除子节点时,应该从后向前删除,删除的过程中子节点列表的length在变化,每次都重新计算,除此以外,若从前往后删,删除结点的位置由后一个元素顶替,因此会间隔删除;这两个原因都造成只能删除一半的元素

function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
  var children = content.childNodes;
  for(var i=children.length-1;i>=0;i--){
      var child = content.removeChild(children[i]);
      document.write(i+" delete "+child.innerHTML+"<br />");
  }
  
}

   parentNode.replaceChild(newNode,oldNode):返回被替换元素的引用

25.可直接通过ele.attribute = "value"来设置属性值,或者通过setAttitude()方法来设置

代码片段

1.超链接中点击后调用某个函数

 <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
2.获取浏览器可视窗口(不包括工具栏、滚动条),对所有浏览器都适用的代码:

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

  scrollWidth:是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度),获得对象的滚动宽度:

 var w=document.documentElement.scrollWidth || document.body.scrollWidth;
 var h=document.documentElement.scrollHeight || document.body.scrollHeight;

   clientWidth:是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

  offsetWidth:是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。offsetHeight = clientHeight + 滚动条 + 边框。

var w= document.documentElement.offsetWidth || document.body.offsetWidth;
var h= document.documentElement.offsetHeight || document.body.offsetHeight;





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值