javascript学习笔记

输出alert
document.write
document.getElementById("demo").innerHTML 

变量数据类型
var lastname="Doe", age=30, job="carpenter";

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var car = {type:"Fiat", model:500, color:"white"};

js对象函数属性  生命周期

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

onchange     HTML 元素改变
onclick    用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout    用户从一个HTML元素上移开鼠标
onkeydown    用户按下键盘按键
onload    浏览器已完成页面的加载


\'    单引号
\"    双引号
\\    反斜杠
\n    换行
\r    回车
\t    tab(制表符)
\b    退格符
\f    换页符

var day=new Date().getDay();

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

var person={fname:"John",lname:"Doe",age:25}; 

for (x in person)
  {
  txt=txt + person[x];
  }


typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object


JavaScript 数据类型
在 JavaScript 中有 5 中不同的数据类型：

string
number
boolean
object
function
3 种对象类型：

Object
Date
Array
2 个不包含任何值的数据类型：

null
undefined


try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

console.log() 方法

表单验证

var x=document.forms["myForm"]["fname"].value;


json的使用
    var result="";
                var obj1={
                name:"zhangsan",
                age:10,
                habit:{
                    tiyu:"篮球",
                    shuiguo:"苹果"
                },
                birthday:"2012",
                child:['小米','校长']
            };
            // alert(typeof(obj1.child));
            // alert(obj1.habit.shuiguo);
            result="我的名字："+obj1.name+",我今年："+obj1.age+",我的爱好

是："+obj1.habit.tiyu+","+obj1.habit.shuiguo+",我的生日是:"+obj1.birthday+",我的孩子："+obj1.child[0];
            return result;


// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;     

函数的定义 
闭包解决  

var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'},{ccff:'d11d'}];
// alert(json.length);
for(var i=0;i<json.length;i++){
for(var key in json[i]){
// alert(key+':'+json[i][key]);
document.write(key+':'+json[i][key]);
}


id 获得
var x=document.getElementById("intro");

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);

<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
 上面的例子演示了document.getElementById getElementsByTagName 使用

getElementsByClassName 使用

x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
 document.getElementsByClassName('te')[0].innerHTML="哈哈";

document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";
事件显示隐藏
onclick="document.getElementById('p1').style.visibility='hidden'"

onclick="this.innerHTML='Ooops!'"

属性添加方法
document.getElementById("myBtn").onclick=function(){displayDate()};
事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

nload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

转成大写
x.value=x.value.toUpperCase();
<input type="text" id="fname" onchange="myFunction()">

onmouseover="mOver(this)" onmouseout="mOut(this) 传递当前对象this

使用
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown="lighton()" onmouseup="lightoff()"

onfocus="myFunction(this)

onmouseover="style.color='red'

添加事件监听
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>

事件句柄允许同时添加多个事件
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

document.getElementById("myDiv").addEventListener("click", myFunction, true); 后面的true表示捕获点击
默认false 冒泡点击

移除事件
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

Math.random();随机数

添加标签
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除标签
parent.removeChild(child);

 

转载于:https://www.cnblogs.com/wwx-blog/p/4624831.html