web(js基础一)

web(11.30-12.01)

一、js输出

• alert() ：带确定按钮的输出弹框
• confirm() ：带确定和取消按钮的输出弹框
• document.write() ：在文档流中输出
• document.getElementById.innerHTML ：修改页面中的html元素
• console.log()： 在调试平台中输出

二、js输入

• prompt(“提示信息”,默认值)；弹框输入
• 页面表单元素输入值；

三、js语句、函数、事件

1.声明变量

var x=值；/*x为变量名称，变量名称应注意*/
/*1.名称对大小写敏感（y 和 Y 是不同的变量）
   2.JavaScript 的关键词不能用作变量名称*/

2.数据类型

• 数字（number）
• 字符串(string)
• 布尔(boolean)
• 数组(array)
• 对象(object)
• 空NULL
• 未字义类型(undefined)

3.js对象：以下介绍包含多值的对象， 实例：

/*创建对象student，name age sno均为对象student的属性*/
var student={name:"lily", age:"20",sno:"05"};
/*访问对象的属性*/
student.name/student.age/student.sno

4.js函数

• 函数的定义

①常规函数

function 函数名(参数(可省略)){
        函数体;
 }

②匿名函数

var 变量名=function (){
   函数体；
}

③自执行函数

(function (){
            函数体；
 })();

注：函数均可带参或不带参，有返回值或无返回值；
常规函数可被提前声明

• 函数的调用

①<标签 事件="函数名()"></标签> 实例：

 <button onclick="counter()">计算</button>
/*表示在点击"计算"按钮时调用counter函数*/

②function 函数名(){ 函数体; } 对象.事件=函数名; 实例：

function focus1(){
   document.getElementsByTagName("input")[0].style.background="pink";
}
user.onfocus=focus1;

③对象.事件=function(){ 函数体; } 实例：

user.onfocus=function(){
   document.getElementsByTagName("input")[0].style.background="pink";
}

5.js事件

• onclick 点击事件
• onmouseover 鼠标悬停事件
• onmouseout 鼠标离开事件
• onload事件 页面加载时调用
• onfocus事件 获取焦点时
• onblur事件 失去焦点时
• onchange事件 HTML元素发生改变时触发

6.js更改元素样式

• 更改属性： 对象.属性="属性值"；
• 更改css样式:

对象.style.样式名＝"样式值";   
/*样式名:驼峰式写法  font-size:fontSize）*/

7.while与do while语句的区别
当条件不成立时，do while至少会执行一遍，while不会执行。

四、HTML DOM

1.查找元素

• document.getElementById(“id名”)；
• document.getElementsByClassName(“类名”)[索引值]；
• document.getElementsByTagName(“标签名”)[索引值];

2.获取和设置值

① 获取、设置元素的值

• 针对html元素:

    对象.innerHTML                /* 提取文本值和其中标签元素*/
    对象.innerText                /*只提取文本值 */
    对象.innerHTML=new content;    /*设置文本值和其中标签元素*/
    对象.innerText=new content;    /*设置文本值 */ 

• 对于表单元素:

对象.value                /*获取元素的值*/ 
对象.value=new value;     /*设置元素的值*/

②获取、设置元素属性的值

• 设置元素属性 对象.setAttribute(属性名,属性值);
• 获取元素属性 对象.getAttribute(属性名);

3.增添、插入和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
父元素.document.appendChild(子元素)	增添子元素到父元素的最后面
父元素.document.removeChild(子元素)	删除父元素的子元素
父元素.document.replaceChild(替换的新元素，被替换的旧元素)	替换 HTML 元素
父元素.insertBefore(元素1，元素2)	在父元素的元素2前面插入元素1

4.DOM节点

方法	描述
子元素.Nodes	获取父元素
父元素.childNodes	获取子节点方式 ，包含空白节点
父元素.children	获取子节点方式，不包含空白节点
父元素.childNodes[索引值]	获取对应子节点方式 ，包含空白节点
父元素.children[索引值]	获取对应子节点方式，不包含空白节点
父元素.childNodes.length	获取子节点个数 ，包含空白节点
父元素.children.length	获取子节点个数，不包含空白节点
父元素.firstChild	第一个子元素
父元素.lastChild	最后一个子元素
对象.previousSibling	前一个兄弟元素
对象.nextSilbling	后一个兄弟元素