javascript基础知识精华笔记汇总

　　javascript源自C，学好js不仅对以后做前端和SEO意义重大，对以后学习PHP的知识也是受益匪浅的。今天整理出来的都是JavaScript的基础知识。包括Js语法（变量，语句等），JS函数，JS对象，jsDOM，JS表单验证等。

1.JavaScript添加到XHTML的方法
在(X)Html中嵌入JavaScript脚本
<script type=“text/javascript”>
   JavaScript代码
    ……
</script>
在(X)Html中链接一个外部的javaScript文件。(页面文件)
<script type=“text/javascript” src=“danger.js”></script>
将JavaScript存入单独的文件中(ajax.js)
var prjName="/MyTodoes/";
var ajaxObj;

function createAjaxObject(){
try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){};
try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){};
try{return new XMLHttpRequest();}catch(e){};
alert("XmlHttpRequest not supported!");
return null;
}

function $(id){
     return document.getElementById(id);
}
直接编写在元素的事件属性中。
<input type="button" value="Press Me" onclick="alert('Hello World');" />
<a href="javascript: alert('hello World');">Click</a>
<input type=“button” value=“delet” onclick=“confirm('确定删除吗？');” />

2.JS变量
JS中变量的定义是用var运算符加变量名定义，JS是弱类型。定义变量时无需申明变量类型，也不一定要初始化，甚至变量无需事先定义也可使用。不过，为了语义更好

的表示，使用变量前还是要事先申明。
var test="ht",test1=90;
var test;
不能使用保留关键字做为JS变量。如：break,for,double,import,public,else,new,try,if,in,while,null,typeof,void,var

3.JavaScript数据类型
JavaScript数据类型分为：原始类型和引用类型
原始类型包括5种：
- undefined:
• 当声明的变量未初始化时，值为undefined。
• 当函数无明确返回值时，其调用结果也是undefined。
- null:
• 值为null，Null是从Undefined派生来的。因此null==undefined
• null表示不存在的对象。
- boolean:
• ture或false
- number:
• 即可表示32位整数，也可表示64位浮点数。
• Number.MAX_VALUE和Number.MIN_VALUE定义了上下限。
• Number.POSITIVE_INFINITY和Number.NEGATIVE_INFINITY Infinity表示无穷大。isFinit()较验是否无穷大。
• NaN表示非数字，它与自身不相等。一般发生在类型转换失败时，isNaN()较验是否为数字。
–string字符串
• 可用单引号或双引号声明。字符类型提供了很多丰富的方法，详看API。

4.typeof()运算符
对变量或值使用typeof()运算符将返回它的类型：
– undefined : undefined
– boolean : boolean
– number : number
– string : string
– null或引用类型：object

5.数据类型转换
//自动类型转换
var x = “10”-2;结果：8 —— 自动将”10”转为Number类型
var x=“10”+2;结果：102-------如有一个为字符串，则是连接
var s=9+2+”8“;结果：118 —— 先进行9+2结果为11，再和”8”连接
var x=“2”*”3”;结果：6 。自动将字符串转为整型
var y=“4”*”abc”;结果：NaN ——相乘如有一个为非数字NaN，则结果为非数字NaN
alert(55==‘55’);结果为true;
alert(0==false);结果为true;
===比较时，同时比较类型
alert(55==‘55’);结果为true; alert(55===‘55’);结果为false;
//toString()方法
Var num = 123;
alert(num.toString());
//parseInt()和parseFloat
var a = parseInt("1234"); //返回1234
var b = parseInt("abc"); //返回NaN
//强制类型转换有，Boolean(value)、String(value)、Number(value)

6.逻辑表达式
或运算符(||)                                 返回第一个值为真的操作数, 如果两个操作数的值都为假，则返回最后一个操作数。
与运算符(&&)                                返回第一个值为假的运算符，如果两个操作数的值都为真，则返回最后一个操作数。
比较运算符 ==等于、===完全等于、!=或<>不等于、>大于、<小于
三元运算符 var foo = bar ? 1 : 0      如果bar=1，则foo值为1，否则foo值为0；

7.js语句（参见《javascript语句大全》）

8.js函数

<script>
   function img()
{
   document.write( '<img src="images/logo2.png" />' )
}

img();
img();
img();
img();
//同一个脚本标签，先加载调用函数，再加载定义函数
//不同的脚本标签按先后顺序加载；
</script>
js变量的作用域：局部变量与全部变量
<script>
var name= "8" ;//全局变量
function ts()
{
   var name="lin";//函数内部加了var申明，此时为局部变量，只对函数ts()有作用，不加var时，由于属于全局变量，相当于第一个var申明又重新将name变量申明了一次。因此，此时的name属于全局变量。
   alert(name);
}
ts();
alert(name);
</script>

<script>
img();
</script>

var str="ok";
    function img(src1,w,h) 　　//形参，可以将同一图片文件夹下名称不同的部分换成参数。
       {
           //形参初始化1
           //w = w ? w: 100; 　　//三元运算符,test ? 语句1 : 语句2，当test为ture时，执行语句1，当test为false时，执行语句2.
           //h = h ? h: 100;
           //形参初始化2
           w = typeof(w) =='undefined' ? 100:w;　　//typeof() 可得数据类型，即使w的值取0，也不会=='undefined'。只有w没有任何值的时候，才会在语句成立后取默认的100.
           h = typeof(h) =='undefined' ? 100:h;
           //document.write('<img src="images/'+src1+'" width="'+w+'" height="'+h+'" />'); //定界符''，用+号连接变量和字符串。
           return '<img src="images/'+src1+'" width="'+w+'" height="'+h+'" />'
           //return 返回，有终止语句的作用相当于break，
           /*document.write('<img src="images/'+src2+'" width="'+w2+'" height="'+h2+'" />');
           document.write('<img src="images/'+src3+'" width="'+w3+'" height="'+h3+'" />');
           img('1.png','100px','200px','11.jpg','100px','200px','3.jpg','100px','300px');    //实参   */
        }



<script>
   img2()                   //此时可以不按顺序写。
   function img2()
       {
           document.write('<img src="images/11.jpg" />')
       }

   </script>

匿名函数（闭包）：

9.js对象：

原生对象
–     由JavaScript提供，独立于浏览器的对象。
–     Object,Array,String,Boolean,Number,Date,RegExp...
内置对象
–     也是一种原生对象，只是在使用时不需要初始化。
–     Global,Math
宿主对象
–     与浏览器有关的对象。
–     BOM,DOM
自定义对象
原生对象 - Object
Object是JavaScript中所有类的父类。
Object的属性：
–    constructor :指向创建对象函数的引用。
–    prototype :对该对象的对象原型的引用，默认返回Object类的一个实例。
Object的方法：
–    hasOwnProperty("property") :判断对象是否有指定属性。
–    isPrototypeOf(object) :判断该对象是否是另一个对象的原型。
var re = new Object();                        //初始化变量。
alert (Object.prototype.isPrototypeOf(re));
–    propertyIsEnumerable("property") :判断指定属性是否可以用for...in语句枚举。
–    toString() :返回对象的原始字符串。
–    valueOf() :返回最适合该对象的原始值。
原生对象 -原始数据类型包装器类 Boolean、String、Number
原生对象-RegExp   Javascript正则表达式对象、var x=/^a{2,8}$/; 、alert(x.test("aaa"));
//创建数组对象
var a = new Array();         //定义一个数组，长度为0
a[0] = 0;            //此时数组长度自动增长为1.
a[1] = 1;            //此时数组长度自动增长为2.
var b = new Array(20);     //定义一个数组，长度为20
var c = new Array(1,2,3,4,5);    //定义一个数组，并赋值。
alert(c[2]);            //输出3
alert(c.length);         //取得数组长度，输出5
c[30] = 1;
alert(c.length);         //取得数组长度，输出31
push('o');           //加入元素
Join("d");           //在每个元素后加入d（最后一个除外），并做元素连接
原生对象 - Date
//创建日期对象，保存当前时间。
var d = new Date();
//参数为1970/1/1到今的毫秒数。
var e = new Date(10);
//转换为1970/1/1至今的毫秒数
Date.parse("May 25, 2004“);
//转换为1970/1/1至今的毫秒数
Var x = new Date(Date.UTC(2003, 12,10));
//获得日期的年、月、日
alert(date.getYear()+"   "+date.getMonth()+" "+date.getDate());
内置对象 - Global
isNaN()——判断是否是数字
isFinite()——验证是否无穷大
//将URL中允许的字符编码,解码，如空格，汉字
encodeURI(),decodeURI()
//将特殊字符进行编码解码：如斜杠，问号等。
encodeURIComponent(),decodeURIComponent()
//解释执行一段字符串
(); (“alert(‘abc’)”); == alert(‘abc’);
Var x=(“2+3”)      x=5

js oops

alert(window.location);
//顶级定义中的window可以省略。如：document.write()

//页面跳转的方法：
window.location.href='http://baidu.com';
window.location.replace('http://baidu.com');

var ok = window.confirm('您真的要删除吗');
if(ok) //确定
{
   alert('你点击了确定');
}else
{
   alert('你点击了取消');
}

window.setInterval("t()",1000);           //每隔一秒钟就会执行一次"t()"
window.setTimeOut("t()",1000);           //一秒钟后，执行一次"t()"就停止。
//函数必须写在""里面，否则就会马上执行。

js DOM
传统的HTML文档顺序是:
document->html->(head,body)
一个浏览器窗口中的DOM顺序是:
window->(navigator,screen,history,location,document)

function tz(obj)
{
   var val = obj.value
   window.location = val;
}
//window.location 跳转
//抓取对象
//通过节点的ID值来抓取对象只适用于文档对象
//alert(document.getElementById('test'));   返回的是一个对象对象是没有length属性抓取一个特定对象
//通过节点的name属性值来抓取对象只适用于文档对象
//document.getElementsByName(); 返回的是一个集合因为 Name属性值不像id，它可以出现多次集合拥有length属性即拥有多少个值如果Name属性相同
//通过标签属性抓取适用于闭合标签以及用于文档对象
//document.getElementsByTagName(); 返回的依然是个集合，

//当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.

//表示当前所属的位置:this，all代表其下层的全部元素。parent代表父亲对象,top代表最顶端对象

//document.getElementById("表单中元素的ID号").name(或value).

//JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
</script>
select的value值是选中状态的那个选项
<select onchange="tz(this)">
   <option value="">请选择</option>
   <option value="http://baidu.com">百度</option>
    <option value="http://google.com">谷歌</option>
</select>
<a href="http://baidu.com" id="test">百度</a>
<script>
document.getElementById('test').click();   //一定要写入ID节点才能使JS查找到相应的代码
</script>

<input name="sex" type="radio" />男
<input name="sex" type="radio" />女
<script>
document.getElementsByName("sex")[0].onclick = function(){alert('ok');}
</script>-->
<div>这是第一个层</div>
<div>这是第二个层</div>
<div>这是第三个层</div>

---------------------------------------------------------------------------------------------------------------------

<input type="text" id="username" value="" name="" />
<input type="button" value="点击" onclick="test()" />-->

<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女
<input type="radio" name="sex" value="secret" />保密

function test()
{
//获取对象的属性
//内置属性   对象.属性
var u = document.getElementById("username");
//alert( document.getElementById("username").value );
//不是内置的属性即自定义属性 getAttribute() setAttribute()
//获取对象的属性
u.setAttribute('abc' , 123);
//弹出abc=123
alert( u.getAttribute('abc') );

}*/
//让某个单选按钮处于选中状态-->

//特殊情况 class属性虽然是内置的属性但是必须用.className 抓取标签名   getElementsByTagName('必须用大写的标签名')
//下拉菜单 selected = selected document.getElementById('select').options

<script>
setSelRadio("sex","woman"); //value值变成字符串需要加引号
function setSelRadio(name, value)
{
var jh = document.getElementsByName(name);
for(var i=0; i<jh.length; i++) //可以将该段代码优化为 for(var i=0 len=jh.length ; i<len; i++) 这样就只要计算一次len=jh.length
{
   if(jh[i].value == value)
   {
       jh[i].checked = true;
       break;   //终止循环
   }
}
}
</script>

<select id="s">
   <option value="1">win</option>
   <option value="2">MAC</option>
   <option value="3">linux</option>
</select>
<script>
test("s",3);
function test(id,value)
{
   var s = document.getElementById(id);
   var arr = s.options;
   var len=arr.length;
   for( var i=0; i<len; i++ )
   {
       if(arr[i].value == value)
       {
           arr[i].selected = true;
           break;
       }
   }
}
</script>

-----------------------------------------------------------------------------------------------------------------

JS事件

<body onselect="document.selection.empty();">
<script>
function test()
{
return false;
}
</script>
<div id="box">无法复制</div>
        1. onclick 鼠标点击
       2. onFocus 获得焦点
       3. onBlur   失去焦点
       4. onChange 改变文本内容注意：在XHTML中，JS代码小写
               -->
   
   
<script>
function test(obj)
{
obj.select();
}
function test2(obj)
{
if(obj.value == '') //对象的值   用obj.value表示
{
   alert('请输入用户名');
}
}
document.getElementById('bt')
</script>
<p>用户名：<input type="text" onblur="test2(this)" /></p>
<p>密码：<input type="password" onfocus="test(this)" /></p>

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

JS表单验证与特效：

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

问题补充———一些让人疑惑的地方：

posted on 2012-12-05 01:04 付潭阅读(752) 评论(0) 编辑收藏举报

刷新页面返回顶部

付潭

导航

公告

javascript基础知识精华笔记汇总