1 JavaScript简介
基于对象(非面向对象)
1.1 JavaScript概述
一个完整的JS实现由一下3部门组成,核心(ECMAScript)、文档对象模型(Document Objrct Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。
DOM树:文档对象,JS操作DOM
1.2 JS Hello World
<!DOCTYPE html>
<html>
<head>
         <meta charset="UTF-8">
<title>JavaScript引入方式</title>
<script type="text/javascript">
         alert("JS Hello World");//弹窗输出
         //文档对象
         document.write("learn javascript now")//页面输出
</script>
</head>
<body>
</body>
</html>
1.3 JavaScript基础语法
JavaScript 引入方式
内部;外部;
JavaScript 注释
单行: // ;
多行: /* */ ;
JavaScript 变量
JavaScript 是弱类型语言,统一用var 来定义变量;
JavaScript基本数据类型
数值类型;
字符串类型;
布尔类型;
Undefined(表示变量不含有值);
Null(置空变量));
JavaScript运算符
1,算术运算符;
2,赋值运算符;
3,比较运算符;
4,逻辑运算符;
5,三目运算符;
6,字符串连接“+”
JavaScript选择与循环
1,if...else 语句;
2,switch 语句;
3,for 循环语句;
4,while/do..while 语句;
JavaScript函数
function fun1() {
                   // body...
                   alert("第一个函数");
         }
         fun1();
注意区分Break和Continue
2 JavaScript操作DOM节点
2.1 JavaScript 处理DOM 事件
<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <title>JavaScript处理DOM事件</title>
<script type="text/javascript">
         function fuck(){
                   alert("点我干嘛?");
         }
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="fuck()"/>
</body>
</html>
2.2 JavaScript 操作DOM 节点
1,JavaScript 修改DOM 节点
2,JavaScript 添加DOM 节点
3,JavaScript 删除DOM 节点
function modifyDOM1(){
        document.getElementById(‘text1‘).value="这里输入ID";
        document.getElementById(‘pwd1‘).value="这里输入密码";
    }
    function modifyDOM2() {
        document.getElementById("sp1").innerHTML="用户名";
        document.getElementById("sp2").innerHTML="密码";
    }
<script type="text/javascript">
    function addDOM1() {
        /* 创建p标签,里面加入内容 */
        var p=document.createElement("p");
        var nodeText=document.createTextNode("文本框前面的文字内容");
        p.appendChild(nodeText);
        /* 找到父节点,插入DOM */
        var parent=document.getElementById("parent");
        var child=document.getElementById("child");
        parent.insertBefore(p,child);
    }
function addDOM2() {
        /* 在后面插入节点 */
        var h4=document.createElement("h4");
        var nodeText=document.createTextNode("游戏新闻");
        h4.appendChild(nodeText);
        var parent=document.getElementById("parent");
        parent.appendChild(h4);
    }
</script>
appendChild()函数作用
(1)向双标签内部添加内容
(2)父节点下的子节点后面添加DOM
function removeDOM() {
        /* 获取父节点 */
        var parent=document.getElementById("parent");
        var child=document.getElementById("child");
        /* 父节点remove */
        parent.removeChild(child);
    }
2.3 JavaScript修改DOM 节点CSS 样式
document.getElementById("boy").style.color="red";
3 JavaScript对象
3.1 JavaScript对象定义
1,JavaScript 对象定义
2,JavaScript 动态的添加属性和方法
3,JavaScript 动态的删除属性和方法
4,JavaScript 对象构造方法
var p=new Object();
p.name="Java and Oracle"; // 动态的添加属性
p.func=speak;  // 动态的添加方法
//delete 属性、方法
//赋值为undefined
 function person(name,age){
        this.name2=name;
        this.age2=age;     
    }
3.2 JavaScript字符串对象
1,字符串对象实例化方法
2,字符串length 属性
3,字符串indexOf 方法使用indexOf() 来定位字符串中某一个指定的字符首次出现的位置
4,字符串replace()方法使用replace() 方法在字符串中用某些字符替换另一些字符
var s1="直接定义字符串";
var s2=new String("使用new关键字定义字符串");
3.3 JavaScript日期对象
1,日期对象实例化
2,getTime()方法,返回1970 年1 月1 日至今的毫秒数。
3,getFullYear() 从Date 对象以四位数字返回年份。
4,getMonth() 从Date 对象返回月份(0 ~ 11)。
5,getDate() 从Date 对象返回一个月中的某一天(1 ~ 31)。
6,getHours() 返回Date 对象的小时(0 ~ 23)。
7,getMinutes() 返回Date 对象的分钟(0 ~ 59)。
8,getSeconds() 返回Date 对象的秒数(0 ~ 59)。
9,getDay() 从Date 对象返回一周中的某一天(0 ~ 6)。
var date=new Date();
3.4 JavaScript数组
1,数组的声明;
2,数组的遍历;
3,数组元素排序sort()方法;
4,数组元素组合成字符串join()方法;
5,合并数组元素concat()方法;
6,颠倒数组元素reverse()方法;
var arr=new Array(); var arr2=new Array(3);
4 JavaScript常用函数
4.1 JavaScript 全局函数
全局函数不属于任何一个内置对象。
JS 包含以下7 个全局函数,用于一些常用的功能:escape(),eval(),isNan(),isFinite(),parseFloat(),paaseInt(),unescape();
Eval()方法:执行代码;
<script type="text/javascript">
         var str="1+2+3";
         alert(eval(str));
</script>
4.2 window对象常用方法及事件
alert();弹出消息框confirm() prompt()
window.alert("太简单了,整理啥?");
window.confirm("简单到爆炸");
window.prompt("观察prompt、基本不会使用,呵呵");
setTimeout();执行一次
setinterval();执行多次
open();打开窗口
window.onload 发生在文档全部下载完毕的时候。(HTML onload事件)
window.onresize 发生在窗口大小发生变化的时候。(了解)
function tuan() {
         alert("xxxxx");
}
window.setTimeout("tuan()",3000);
var n=1;
function q() {
         document.write("xxxxx");
         n++;
}
window.setInterval("q()",1000);
window.open(); 打开窗口
window. onload(); 发生在文档全部下载完毕的时候
<script type="text/javascript">
                   window.onload=function(argument) {
                            alert("window对象提供的加载完成");
                   };
                   function loadInfo(argument) {
                            alert("HTML提供的加载完成");
                   }
</script>
暂时先到这里
原文:http://www.cnblogs.com/dldrjyy13102/p/7502842.html