javascript

程序员文章站 2022-03-08 22:57:58

...

javascript

嵌入方式

1.行间事件

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

2.页面script标签嵌入

<script type="text/javascript">        
    var a = '你好！';
    alert(a);
</script>

3.外部引入

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

注释

1.单行注释

//var a = 1;

2.多行注释

/*
var name = 'xuhaixiang';
console.log(name)
*/

数据类型

1.number
2.string
3.boolen
4.undefined
5.null
6.object

DOM(document object map)

1.window.onload = function(){} 用法

放在头部的js在操作dom元素时，由于页面是从上到下执行，会报错；将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了

2.操作元素属性

2.1 “.”操作

<a href="http://www.baidu.com" id="baidu">百度</a>
var oA = document.getElementById('baidu');
//读取属性值
console.log(oA.href,oA.id)
//设置属性
oA.title = '前往百度'；
oA.style.color = 'red';
oA.style.fontSize = '15px';

2.2 “[]”操作

<a href="http://www.baidu.com" id="baidu">百度</a>
var oA = document.getElementById('baidu');
oA['title'] = '前往百度';
oA['style']['fontSize'] = '20px';
oA['style'].backgroundColor = 'red';
var test = 'style';
oA[test].backgroundColor = 'blue';

3.属性写法

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

条件语句

运算符

1.算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2.赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3.条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

var a = 6;
if(a>6)
{
    console.log('greater');
}
else if(a==6)
{
    console.log('equal');
}
else
{
    consle.log('less');
}

switch

var a = 6;
switch (a){
    case 4:
        console.log(4);
        break;
    case 5:
        console.log(5);
        break;
    default:
        console.log(6);
}

数组

定义创建

1.对象实例创建

var aList = new Array(1,2,3);

2.直接变量创建

var aList = [1,2,'abc'];

多维数组

多维数组指的是数组的成员也是数组的数组

var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;

方法

1.获取数组的长度：aList.length;

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

2.用下标操作数组的某个数据：aList[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.slice 切片

var aList = [1,2,3,4];
aList.slice(0,2);
console.log(aList);     //[1,2]

9.sort

var aList = [3,2,1,4];
aList.sort()
console.log(aList);     //[1,2,3,4]

10.splice() 在数组中增加或删除成员

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

循环

for循环

//for循环数组去重示例
var aList = [1,2,3,2,4,5,6,,7,5];
var aList1 = [];
for(var i=0;i<aList.length;i++){
    if(aList.indexOf(aList[i]) == i){
        aList1.push(aList[i]);
    }
}
console.log(aList1);

while循环

var i = 0;
var aList = [];
while(i<5){
    aList.push(i);
    i++;
}

javascript的组成

1.ECMAscript javascript的语法（变量、函数、循环语句等语法）
2.DOM 文档对象模型操作html和css的方法
3.BOM 浏览器对象模型操作浏览器的一些方法

字符串处理

1.字符串合并操作：“ + ”
2.parseInt() 将数字字符串转化为整数
3.parseFloat() 将数字字符串转化为小数
4.split() 把一个字符串分隔成字符串组成的数组
5.charAt() 获取字符串中的某一个字符
6.indexOf() 查找字符串是否含有某字符
7.substring() 截取字符串用法： substring(start,end)（不包括end）
8.toUpperCase() 字符串转大写
9.toLowerCase() 字符串转小写

类型转换

1.加号和减号的区别
加号不仅代表运算符，字符串拼接也是用加号

console.log('1'+2)  //12
console.log(parseInt('1')+2)    //3
console.log('2'-1)  //1

2.隐式转换”==”和”-“

'3' == 3    //true
'5' - 1 //4

3.NaN 和 isNaN

isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况
console.log(isNaN('123'))   //false
console.log(isNaN('123a'))  //true
console.log(isNaN('a123'))  //true
console.log(isNaN(123))     //false
console.log(isNaN(123-1))   //false
console.log(isNaN(-1.5))    //false

定时器

定时器类型及语法

setTimeout 只执行一次的定时器

function func(){
    console.log('一次');
}
var time1 = setTimeout(func,2000);
或者
var time1 = setTimeout(function(){
        console.log('一次');
    },2000);

clearTimeout 关闭只执行一次的定时器

function func(){
    console.log('一次');
}
var time1 = setTimeout(func,2000);
clearTimeout(time1);

setInterval 反复执行的定时器

function func(){
    console.log('一次');
}
var time1 = setInterval(func,2000);
或者
var time1 = setInterval(function(){
        console.log('一次');
    },2000);

clearInterval 关闭反复执行的定时器

    var n = 1;
    var time1 = setInterval(function(){
        console.log(n);
        n++;
        if(n>10){
            clearInterval(time1);   //关闭定时器
        }       
    },1000);

定时器应用实例

1.定时器制作时钟

    <div id="clock">
        clock
    </div>

    function timeShow(){
        var oDiv = document.getElementById('clock');
        var now = new Date();
        // oDiv.innerHTML = now;
        var year = now.getFullYear();
        var month = now.getMonth() + 1;     //javascript的date得到的月份范围0-11，需要加1
        var day = now.getDate();
        var week = now.getDay();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        oDiv.innerHTML = '当前时间是：' + year + '年' + addZero(month) + '月' + addZero(day) + '日 ' + toWeek(week) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
    }
    timeShow();
    setInterval(function(){
        timeShow();
    },1000);
    //对于小于10的数字前加0
    function addZero(num){
        if(num<10){
            return '0'+num;
        }
        else{
            return num;
        }
    }
    //将数字0-6转化为星期格式
    function toWeek(num){
        switch(num){
            case 0:
                return '星期日';
            case 1:
                return '星期一';
            case 2:
                return '星期二';
            case 3:
                return '星期三';
            case 4:
                return '星期四';
            case 5:
                return '星期五';
            case 6:
                return '星期六';
        }
    }

2.定时器制作倒计时

    <div class="clock" id="clock">
        clock
    </div>

   var oDiv = document.getElementById('clock');
    function timeleft(){
        var now = new Date();
        var future = new Date(2018,7,15,24,0,0);//Date中的7代表实际中的8月，
        var lefts = parseInt((future-now)/1000);
        var day = parseInt(lefts/86400);
        var hour = parseInt(lefts%86400/3600);
        var min = parseInt(lefts%86400%3600/60);
        var sec = lefts%60;
        str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
        oDiv.innerHTML = str; 
    }
    timeleft();
    setInterval(timeleft,1000);

闭包

1.什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回

2.闭包计数器

    var count = (function(){
        var num = 0;
        function add(){
            num++;
            return num;
        }
        return add;
    })();
    console.log(count());   //1
    console.log(count());   //2
    console.log(count());   //3

3.将一个变量长期驻扎在内存当中，可用于循环中存索引值

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    //依次点击打印5,5,5,5,5
    var divList = document.getElementsByTagName('div');
    console.log(divList);
    for(var i=0;i<divList.length;i++){
        divList[i].onclick = function(){
            console.log(i);
        }
    }

    //依次点击打印 0,1,2,3,4
    var divList = document.getElementsByTagName('div');
    console.log(divList);
    for(var i=0;i<divList.length;i++){
        divList[i].onclick = (function(i){
            return function(){
                console.log(i);
            }
        })(i)
    }
    //一次点击打印 0,1,2,3,4
    for(var i=0;i<divList.length;i++){
        (function(i){
            divList[i].onclick = function(){
                console.log(i);
            }
        })(i)
    }

面向对象

对象创建的俩种方式

直接创建

var obj = {name:'xhx'};
本质就是
var obj = new Object();
obj.name = 'xhx';

构造函数创建

function Person(name){
    this.name = name;
}
var obj = new Person('xhx');

prototype与`proto`

javascript

1.构造函数具有prototype属性，对象没有；
2.对象有proto属性，对象的proto属性等于该对象的构造函数的prototype

function Foo(){};
var foo = new Foo();
Foo.prototype == foo.__proto__;     //true

3.构造函数也是对象，该对象的构造函数是Function,所以构造函数也有proto属性

function Foo(){};
Foo.__proto__ == Function.prototype;    //true

4.Function是所有构造函数对象的构造函数，Function也是对象,Function对象的构造函数是Function

Function.prototype;     //ƒ () { [native code] }
Function.__proto__;     //ƒ () { [native code] }
Function.__proto__ == Function.prototype;   //true

5.Object构造函数用来生成{}对象，Object构造函数也是对象，该对象的构造函数是Function

var obj = new Object();
console.log(obj);   //{}

Object.__proto__ == Function.prototype;     //true

6.Object.prototype属性对象

//对象的__proto__为其构造函数的prototype，构造函数(Object除外)的prototype的__proto__为Object的prototype
Function.prototype.__proto__ === Object.prototype;      //true
Foo.prototype.__proto__ === Object.prototype;       //true

//Object构造函数的prototype的__proto__为null
Object.prototype.__proto__;     null

javascript

javascript

嵌入方式

注释

数据类型

DOM(document object map)

1.window.onload = function(){} 用法

2.操作元素属性

3.属性写法

条件语句

运算符

if else

switch

数组

定义创建

多维数组

方法

循环

for循环

while循环

javascript的组成

字符串处理

类型转换

定时器

定时器类型及语法

定时器应用实例

闭包

面向对象

对象创建的俩种方式

prototype与`proto`

JavaScript简单实现网页回到顶部功能_javascript技巧

常见的原始JS选择器使用方法总结_javascript技巧

javascript进阶-原型prototype

(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享_javascript技巧

javascript - 前端开发转去后台需要去学哪些知识？

使用JavaScript创建新样式表和新样式规则_php实例

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史_javascript技巧

javascript pop() 删除数组中最后的一个元素

JS取得绝对路径的实现代码_javascript技巧

关于JavaScript对象的动态选择及遍历对象_javascript技巧

javascript

javascript

嵌入方式

注释

数据类型

DOM(document object map)

1.window.onload = function(){} 用法

2.操作元素属性

3.属性写法

条件语句

运算符

if else

switch

数组

定义创建

多维数组

方法

循环

for循环

while循环

javascript的组成

字符串处理

类型转换

定时器

定时器类型及语法

定时器应用实例

闭包

面向对象

对象创建的俩种方式

prototype与__proto__

JavaScript简单实现网页回到顶部功能_javascript技巧

常见的原始JS选择器使用方法总结_javascript技巧

javascript进阶-原型prototype

(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享_javascript技巧

javascript - 前端开发转去后台需要去学哪些知识？

使用JavaScript创建新样式表和新样式规则_php实例

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史_javascript技巧

javascript pop() 删除数组中最后的一个元素

JS取得绝对路径的实现代码_javascript技巧

关于JavaScript对象的动态选择及遍历对象_javascript技巧

prototype与`proto`