javascript基础知识精华笔记汇总

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>

<script>
   alert(x);           //弹出undefine；定义的阅读优先级最高。
   var x = 'ok';
</script>

<script>
       img('1.png',50,0);       // 形参初始化1中，没写值的属性或是属性值为0的，都将采用默认属性值。
</script>

匿名函数（闭包）：

<script>
//闭包
var str = 'abc';
var arr = [1,2,3]
function test(str)
{
   alert(str);
}
//var s = test(3);
/*s()                        //弹出3，即使不写s()也会弹出数字3.因为上一句中有调用函数的语句：test(3).*/
var s = function () { test (3); }
//闭包，function(){ } 闭包可以传递参数，又不会使test()函数提前运行。
</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>

<script>
var divs = document.getElementsByTagName('div');
alert(divs[1].innerHTML);
</script>
<p id="box">
   <div name="c">这是第一个层</div>
   <div name="c">这是第二个层</div>
   <div name="c">这是第三个层</div>
</p>
<div name="c">这是第四层</div>
<script>
   //alert(document.getElementsByTagName('div').innerHTML);
   //document.getElementById('box').getElementsName("c") //这句是错误的因为document.getElementById('box') 抓取到的是p标签而p标签属于闭合标签，所以只能是由getElementsByTagName抓取里面的对象。
   eval("alert('document.getElementById('box').getElementsTagName('div').innerHTML')"); //这句是对的
</script>

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

<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>

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

<script>
function test(name,num)
{
   var cks = document.getElementsByName(name);
   var len = cks.length;
   if(num == 1)
   {
       for(var i=0; i<len; i++)
       {
           cks[i].checked = true;
       }
   }else if(num == 0)
   {
       for(var i=0; i < len; i++)
       {
           cks[i].checked = false;
       }
   }else if(num == 2)
   {
       for(var i=0; i < len; i++)
       {
           /*if(cks[i].checked = false;
           {

           }else
           {
               cks[i].checked = true;
           }*/
           cks[i].checked = !cks[i].checked;                 // ! “非” ；“相反的”
       }
   }
}
</script>
<input type="checkbox" name="aihao" value="ball" />打球
<input type="checkbox" name="aihao" value="swim" />游泳
<input type="checkbox" name="aihao" value="reading" />读书
<p>
   <input type="button" value="全选" onclick="test('aihao',1)" />
   <input type="button" value="全不选" onclick="test('aihao',0)" />
   <input type="button" value="反选" onclick="test('aihao',2)" />
</p>

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>

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

<script>
function test()
{
   alert('ok');
}
</script>

<input type="button" value="删除" id="bt1" onclick="test()" />
<input type="button" value="还原" id="bt2" />

<script>
   //document.getElementById('bt2').onclick = function(){ test(); }
//function(){} 闭包匿名函数
   document.getElementById('bt2').onclick = test;
//onclick 作为事件可以写在js中
</script>-->









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

<script>
function test ()
{
   var content = document.getElementById("username").value
   if ( content == '' )
   {
       alert ('您没有填写用户名!')
       return false;
   }else
   {
       return true;
   }
}

<p>结果：<input type="text" id="result" /></p>
</body>

JS表单验证与特效：

<script>
function check(obj)
{
   /*if (document.getElementsByName('username')[0].value == '')
   //document.getElementsByName().value 以及document.getElementsByTagName().value抓取的都是一个集合并不是一个单独的值但是getElementById() 抓取的是一个具体的属性值
   表单对象.域（name/id）   也能抓取对象 */
   if ( obj.username.value == "" )
   /*obj.username是简写只适用于拥有唯一的name属性的域（控件）全称是obj.elements['username'] */
   {
       alert('用户名不能为空');
       return false;
   }
   if ( obj.password.value == "" )
   {
       alert('密码不能为空');
       return false;
   }
   alert {obj.elements['aihao[]'].length };   //当拥有同一个name属性的控件为多个时此时的域值为集合   当集合中值的个数只剩下一个的时候 obj.elements[]中获取的属性值自动变成对象的属性值而不再是集合
}
</script>
<form onsubmit="return check(this)">
用户名：<input type="text" name="username" id="username" /> 
密码：<input type="password" name="password" id="password" />
<p>爱好：<input type="checkbox" name="aihao[]" value="0" />篮球 <input type="checkbox" name="aihao[]" value="1" />音乐 <input type="checkbox" name="aihao[]" value="2" />电影</p>
<p><input type="submit" value="提交" /></p>
</form>

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

<script>
function formyz(obj)
{
   if(obj.username.value == "")
   {
       //alert('用户名不能为空');
       document.getElementById("usernametext").innerHTML = "用户名不能为空";
       obj.username.focus();
       return false;         //让函数代表false
   }
   if(obj.pwd.value.length < 4)
   {
       alert('密码少于四位数');
       obj.pwd.focus();
       return false;
   }
   if(obj.age.value<8 || obj.age.value>150)
   {
       alert('请输入合适的年龄');
       obj.age.focus();
       return false;
   }

   //if(a == false)=if(!a) 如果a为假 if(a == true)=if(a) 如果a为真
   //if( !obj.elements['sex'][0].checked && !obj.elements['sex'][1].checked)
   var a=false;
   var sex = obj.elements['sex'];
   for(var i=0,len=sex.length;i<len;i++)
   {
       /* if( !sex[i].checked )
       {
       alert("请选择性别");
       return false;
         break;
       }    */                               //错误的程序 “如果只要有一个没选中就会提交失败”
       if(sex[i].checked)
       {
       a = true;
       break;
       }
   }
   if(!a)
   {
   alert("请选择性别");
   return false;
   }
   var num = 0;
   var aihao = obj.elements['aihao[]'];
   for( var i=0,len=aihao.length; i<len; i++ )
   {
       if(aihao[i].checked)
       {
           num++;
       }
   }
   if(num<2)
   {
       alert("请最少选择两个");
       return false;
   }
   if( obj.os.value == '')
   {
       alert("请选择你所用的操作系统");
       return false;
   }
   function check_name(obj)
   {
       document.getElementById('usernametext').innerHTML="";
   }

}
</script>

<form action="2.php" method="post" enctype="multipart-form-data" onsubmit="return formyz(this)">
<p>用户名：<input type="text" name="username" size="40" maxlength="4" onblur="check_name(this)" /><span id="usernametext" class="cRed"></span></p>
<p>密码：<input type="password" name="pwd" /></p>
<p>年龄：<input type="text" name="age" /></p>
<p>性别：<input type="radio" name="sex" value="man" />男    
<input type="radio" name="sex" value="woman" />女    </p>
<p>爱好：<input type="checkbox" name="aihao[]" value="篮球" />篮球
<input type="checkbox" name="aihao[]" value="音乐" />音乐
<input type="checkbox" name="aihao[]" value="电影" checked="checked" />电影</p>

<p>你所用的系统：
   <select name="os" id="os">
       <option value="" selected="selected">请选择</option>
       <option value="1">windows系统</option>
       <option value="2">Linux系统</option>
       <option value="3">ios系统</option>
   </select>

<p><input type="submit" value="提交" /></p>
</form>

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

<script>
alert( navigator.userAgent );
</script>
<div id="box" myname="fu">内容</div>
<script>
//alert( document.getElementById('box').innerHTML );
//alert( box.innerHTML );        //只能兼容于IE浏览器
//如果没在div中写好myname="fu" 此时的属性需要用 document.getElementById('box').setAttribute( "myname" , "fu" )
//alert( document.getElementById('box').getAttribute('myname') );
alert( document.getElementById('box').myname );    //在IE浏览器中就算是非内置的属性，也可以直接用对象.属性
</script>

<script>
function t(obj)
{
   //obj.focus();
   window.setTimeout( function () {obj.focus();},0 );
   //兼容写法
}

</script>
<input type="text" onblur="t(this)" />


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

<style>
/* #box{ height:500px;400px;background-color:red; }*/
a { background-color:#FC6; color:#FFF; }
div{ background-color:#FC6; height:200px; clear:both; text-indent:20px; }

#a2{ background-color:#99c; color:#FFF; }
#d2{ background-color:#99c; color:#FFF; }
</style>

</head>



<script>
function change(obj)
{
   document.getElementById('d1').style.display = document.getElementById('d2').style.display = 'none';
   document.getElementById('d'+obj).style.display = 'block';
}

</script>
<a onclick="change(1)">这是第一张卡</a><a onclick="change(2)" id="a2">这是第一张卡</a>
<div id="d1">这是第一张卡的内容</div>
<div id="d2" style="display:none;">这是第二张卡的内容</div>

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

function de() {
            var ab = 25;   //数值
            var ba = "25"; //字符串
            if (ab == ba) {   //==，会先转换，后比对。
                //alert("b");
            }
            if (!(ab === ba)) { //===不会转换，而进行直接比对，ab是数值类型数据，而ba是字符串类型数据
                //alert("a");
            }
        }
        /*
            !b
            !!b
        */
        function dd() {
            var b= 1;
            if (!!b) {   //!时它是非0数值，所以返回false，当!!时，则先进一步boolean()方法，然后再对这个布尔值求反，于是得到了本身值。
                //alert("a");
            }
        }
        /*
            parseInt parseFloat
        */
        function parse() {
            var a = "18px";
            var b = parseInt(a);   //返回数值18
            var c = parseInt(a, 10); //返回数值18，可以传参数，进制
            //alert(b);
            alert(c);
            var e = "18.2px";
            var d = parseFloat(e);
            alert(d)

            /*
                parseInt与parseFloat的区别在于，parseFloat转换数值时，不会忽略第一个小数点，也就是说，会保留第一个小数点之后的数，但是会忽略第二个小

数点。
                parseFloat还会忽略第一个位置处的0。
            */
        }
        window.onload = function () {
            parse();
            dd();
            de();
        }
相关阅读:
第07组 Alpha冲刺（1/6）
第07组团队Git现场编程实战
 第07组团队项目-需求分析报告
 团队项目-选题报告
 第二次结对编程作业
 0012---求滑动距离
 0011---绝对值函数
 0010---温度转换
 0009---乘法问题
 0008---三位数倒序问题
原文地址：https://www.cnblogs.com/futan/p/js_basic.html