前端知识：原生JavaScript用法

最新推荐文章于 2024-01-18 15:00:00 发布

长不大的大灰狼

最新推荐文章于 2024-01-18 15:00:00 发布

阅读量1.1k

点赞数 1

分类专栏：前端知识文章标签： javascript js java

本文链接：https://blog.csdn.net/glpghz/article/details/106206274

版权

前端知识专栏收录该内容

30 篇文章 1 订阅

订阅专栏

原生JavaScript用法

Ⅰ JavaScript嵌入页面的方式

(1) 行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

(2) 页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

(3) 外部引入（开发时用）

<script type="text/javascript" src="js/index.js"></script>

Ⅱ 变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定，无需明确对变量进行声明。
（1）定义变量需要用关键字 'var'。

 var iNum = 123;
 var sTr = 'asd';

同时定义多个变量可以用","隔开。

 var iNum = 45,sTr='qwe',sCount='68';

（2）5种基本数据类型和1种复合类型

number 数字类型
string 字符串类型
boolean 布尔类型 true 或 false
undefined类型，变量声明未初始化，它的值就是undefined.
null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
复合类型：object

Ⅲ javascript语句与注释

（1）一条javascript语句应该以“;”结尾

<script type="text/javascript">    
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>

（2）javascript注释

<script type="text/javascript">    
// 单行注释
var iNum = 123;
/*  
    多行注释
*/
var sTr = 'abc123';
</script>

Ⅳ 变量、函数、属性、函数参数命名规范

区分大小写
第一个字符必须是字母、下划线（_）或者美元符号（$）
其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：变量名=属性+类型+对象描述

对象o Object 如：oDiv
数组a Array 如：aItems
字符串s String 如：sUserName
整数i Integer 如：iItemCount
布尔值b Boolean 如：bIsComplete
浮点数f Float 如：fPrice
函数fn Function 如：fnHandler
正则表达式re RegExp 如：reEmailCheck

Ⅴ 获取元素的方法及加载

（1）获取元素的方法

1）可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    } 
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

2）可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

（2）加载
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

1）将javascript放到页面最下边

<body>
....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

2）将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

Ⅵ 操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法

“.” 操作
“[ ]”操作：操作元素属性，当属性名被变量名代替时，要使用[].

属性写法

html的属性和js里面属性写法一样
“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

（1）通过“.”操作属性

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.com" id="link1">hello world</a>

(2) 通过“[ ]”操作属性：

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        
        // 写(设置)属性
        // oA.style.sVal1 = aVal2; 没反应,用点，没有作用
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.baidu.com" id="link1">寻你千百度</a>

Ⅶ innerHTML

innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //可以直接写入标签
        oDiv.innerHTML = '<a href="http://www.baidu.com">寻你千百度</a>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

Ⅷ 函数

（1）函数定义与执行

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

(2) 函数传参

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

(3) 函数’return’关键字

返回函数执行的结果
结束函数的运行
阻止默认行为

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

(4) 变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

函数搜寻变量，先在内部找。
javascript中，全局变量可以在函数内部进行直接更改（慎用）

<script type="text/javascript">
    //全局变量
    var a = 12;
    function myalert()
    {
        //局部变量
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); 
    弹出 12 23
    alert(a);  
    弹出 12   
     
    alert(b);  
    出错
</script>

Ⅸ 变量与函数预解析

JavaScript解析过程分为两个阶段，编译阶段和执行阶段，在编译（预解析）阶段会将function定义的函数提前，会将var定义的变量声明提前，但是赋值不提前（只有在运行时，才会被赋值），将它赋值为undefined。

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){     //函数的定义会整体提前
        alert('hello!');
    }
    var iNum = 123;
</script>

Ⅹ 提取行间事件

在html行间嵌入javascript函数，和javascript相关联了就无法做到html和javascript的完全分离。

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">

在html行间调用的事件提取到javascript中调用，从而做到结构与行为分离：

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;  //onclick属性
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

十一匿名函数

可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

十二逻辑控制

（1）运算符

算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(取余)
赋值运算符：=、 +=、 -=、 *=、 /=、 %=
条件运算符：==(会自动把不同类型的变量转换为相同的类型)、===、>、>=、<、<=、!=、&&(且)、||(或)、!(非)
自增运算符：++

(2) if语句

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr = '大于';
}else{
    sTr = '小于';
}
alert(sTr);

(3) switch语句
多重if else语句可以换成性能更高的switch语句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

(4) for语句
程序中进行有规律的重复性操作，需要用到循环语句。

for(var i=0;i<len;i++)
{
    ......
}

(5) while语句

var i=0;

while(i<8){
    ......
    i++;
}

十三数组及操作方法

数组就是一组数据的集合，javascript中，数组中的数据可以是不同类型的。
（1）定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];

（2）操作数组中数据的方法

1）获取数组的长度：length;

var aList = [1,2,3,4];
alert(aList.length); 
弹出：4

2）用下标操作数组的某个数据：[0];

var aList = [1,2,3,4];
alert(aList[0]); 
弹出：1

3）join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); 
弹出：1-2-3-4

4）push() 和 pop() 从数组尾部增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); 
弹出：1,2,3,4,5

aList.pop();
alert(aList); 
弹出：1,2,3,4

5）unshift()和 shift() 从数组首部增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); 
弹出：5,1,2,3,4

aList.shift();
alert(aList); 
弹出：1,2,3,4

6）reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  
弹出：4,3,2,1

7）indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8）splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
从第3个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
aList.splice(2,1,7,8,9); 

alert(aList); 
弹出： 1,2,7,8,9,4

9）多维数组
多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3,4,6],['a','b','c']];

alert(aList[0][1]); 
弹出2;

十四字符串

（1）字符串合并操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

（2）parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(sNum03)   
弹出 12

（3）parseFloat() 将数字字符串转化为小数

var sNum03 = '12.32'
alert(parseFloat(sNum03));  
弹出 12.32

（4）split() 把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");  

alert(aRr);  
弹出 ['2017','4','2']
alert(aRr2);  
弹出 ['2','0','1','7','-','4','-','2','2']

（5）charAt() 获取字符串中的某一个字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); 
弹出 #

（6）indexOf() 查找字符串是否含有某字符，不含时返回-1；

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); 
弹出 2

（7）substring() 截取字符串
substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);  #从第二个开始切，一直切到末尾。

alert(sTr2); //弹出 de
alert(sTr3); 
弹出 bcdefghijkl

（8）toUpperCase() 字符串转大写

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); 
弹出 ABCDEF

（9）toLowerCase() 字符串转小写

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); 
弹出 abcdef

（10）reverse()字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join(''); 
alert(str2);

注意：

先将字符串转为数组，再进行反转。

十五类型转换

（1）直接转换 parseInt() 与 parseFloat()

alert('12'+7); 
弹出 127
alert( parseInt('12') + 7 );  
弹出 19 
alert( parseInt(5.6));  
弹出 5
alert('5.6'+2.3);  
弹出 5.62.3
alert(parseFloat('5.6')+2.3);  
弹出 7.8999999999999995

（2）隐式转换 “==” 和 “-”（自动进行类型转换）

if('3'==3)
{
    alert('相等');
}
弹出 '相等'

alert('10'-3);  
弹出 7

（3）NaN 和 isNaN

alert( parseInt('123abc') );  
弹出 123
alert( parseInt('abc123') );  
弹出 NaN

十六定时器

定时器在javascript中的作用

制作动画
异步操作
函数缓冲与节流

定时器类型及语法

setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器

var time1 = setTimeout(myalert,2000);  #2000ms
var time2 = setInterval(myalert,2000);

clearTimeout(time1);
clearInterval(time2);

function myalert(){
    alert('ok!');
}

用匿名函数传参：

var time2 = setInterval(function(){alert('ok!')},2000);

十七封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

（1）封闭函数：（防止被同名函数覆盖）
1）用（）定义封闭函数

(function myalert(){
    alert('hello!');
})();

2）还可以在函数定义前加上“~”和“!”等符号来定义封闭函数

!function myalert(){
    alert('hello!');
}()

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全：

var iNum01 = 12;
function myalert(){
    alert('hello!');
}
(function(){
    var iNum01 = 24;     #在封闭函数内部定义的变量，要用var
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

封闭函数前有一个分号；（js压缩成一行，容易和前面的代码出现混合，所以前面加一个分号。）

;(function(){
    var iNum01 = 24;     #在封闭函数内部定义的变量，要用var
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})();

十八常用内置对象

（1）document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)

（2）location
window.location.href //获取或者重定url地址

oBtn.onclick = function(){
	window.location.href = "http://baidu.com";
}

window.location.search //获取地址参数部分
window.location.hash //获取页面锚点(哈希值)

(3) Math
Math.random 获取0-1的随机数
Math.floor 向下取整 5.9—取5
Math.ceil 向上取整 5.2—取6

十九调试程序的方法

alert() #会阻止程序继续向下运行
console.log() #在console中直接看相关值，不会影响程序向下执行
document.title() #-显示在标题中，即改变标题

长不大的大灰狼

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端知识：原生JavaScript用法

原生JavaScript用法Ⅰ JavaScript嵌入页面的方式(1) 行间事件（主要用于事件）<input type="button" name="" onclick="alert('ok！');">(2) 页面script标签嵌入<script type="text/javascript"> alert('ok！');</script>(3) 外部引入（开发时用）<script type="text/javascri
复制链接

扫一扫