JavaScript开发常用知识

一、JavaScript基础知识

1.基本语法

每行语句以 ; 结束
语句块用 {} 包围
行注释用 // 
块注释用 /**/ 
大小写严格

2.数据类型和变量

数据类型

Number:包括整型和浮点数
例如：
	123
	0.123
	1.2345e3
	-0.1
	NaN 表示无法计算的结果，比如 0/0
	Infinity 表示无限大

字符串：用 '' 或 "" 包围的一串字符
	如果字符串里需要有特殊字符就需要用 \ 来转义
	转义字符：
		\n 换行
		\t 制表符
		\\ 表示一个\
		'\x41' 表示'A' ---ASCII字符可以用 \x##形式的十六进制字符表示
		'\u4e2d\u6587' 表示 ‘中文’ 两个字
	ES6新语法 
		``  多行字符串，简化了字符串拼接操作
		${} 模板字符串，简化了字符串和变量的拼接操作
	字符串的访问：
		字符串可以使用类似Array的下标操作来获取字符串某个指定位置的字符，索引号从0开始 例：s[0]
		因为字符串是不可变的，所以用下标赋值是无效的
	字符串常用方法： 以下方法只返回新字符串，对原字符串没有影响
		toUpperCase() ---把一个字符串全部转为大写
		toLowerCase() ---把一个字符串全部变为小写
		indexOf()	  ---搜索指定字符串出现的位置,找不到返回-1
		substring()	  ---返回指定索引区间的子串，左包右不包
布尔值：true 或 false
null空值 和 undefined未定义

运算符

&& 与运算
|| 或运算
!  非运算
> 、< 、 >= 、 <= 比较运算符
== 相等运算符（自动转换数据类型再比较）
=== 相等运算符（不会自动转换数据类型，当类型不同时直接返回false，类型相同时才比较值是否相同）
特殊的NaN，NaN只能用 isNaN()函数来判断相同，它与其它任何变量（包括自身）都不相同
浮点数比较，只能比较两个数差的绝对值小于某个阈值，计算机无法精确比较两个无限循环小数

对象

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
获取对象属性： 对象变量.属性名

变量

var 关键字用来定义一个变量

数组

Array可以包含任意类型的数据，并通过索引来访问每个元素
例如：
	var arr = [1, 2, 3.14, 'Hello', null, true];
	arr.length; // 获取数组长度
	
直接给Array的length赋一个新的值会导致Array大小的变化	
例如：
	var arr = [1, 2, 3];
	arr.length; // 3
	arr.length = 6;
	arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
	arr.length = 2;
	arr; // arr变为[1, 2]
Array可以通过索引把对应的元素修改为新的值，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化
例如：
	var arr = [1, 2, 3];
	arr[5] = 'x';
	arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

数组方法：
indexOf()	---搜索指定元素的下标位置
slice()		---截取部分元素来返回一个新Array，左包右不包
push()		---给数组末尾添加若干元素
pop()		---删除数组最后一个元素
unshift()	---给数组头部添加若干元素
shift()		---删除数组的第一个元素
sort()		---排序
reverse()	---反转数组中的元素
splice()	---从指定的索引开始删除若干元素，然后再从该位置添加若干元素. splice(指定索引位置,删除元素个数,'要添加的元素1','要添加的元素2')
concat()	---数组拼接，返回一个新数组，原数组不受影响
join()		---把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

对象

对象是一种无序的集合数据类型，它由若干键值对组成
	用一个 {...} 表示一个对象,键值对以xxx: xxx形式申明
	最后一个键值对不需要在末尾加 ,
	对象访问是由 . 来操作的，如果属性名包含特殊字符，就必须用''括起来
可以自由的添加或删除对象的属性：
例如
	var xiaoming = {
	    name: '小明'
	};
	xiaoming.age; // undefined
	xiaoming.age = 18; // 新增一个age属性
	xiaoming.age; // 18
	delete xiaoming.age; // 删除age属性
	xiaoming.age; // undefined
	delete xiaoming['name']; // 删除name属性
	xiaoming.name; // undefined
	delete xiaoming.school; // 删除一个不存在的school属性也不会报错
in  ---检测一个对象是否拥有某一属性，继承自父类的属性也会返回true
	'name' in xiaoming; // true
hasOwnProperty() ---检测一个对象是否拥有某一属性，只限于自己拥有的属性，不包括父类的属性
	xiaoming.hasOwnProperty('name'); // true

二、JQ应用

1.JQ实现可拖动进度条实例

html

<div class="progress">
	 <div class="progress_bg">
	  	<div class="progress_bar"></div>
	 </div>
	 <div class="progress_btn"></div>
	 <div class="text">0%</div>
</div>

css

.progress{position: relative; width:300px;margin:100px auto;}
.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
.progress_btn:hover{border-color:#F7B824;}

js(H5页面触屏拖动)

let progress1w = window.screen.width - 92 - 17;
        var tag = false, ox = 0, left = 3, bgleft = 0;
        var _element = document.getElementById('progress_btn');
        _element.addEventListener('touchstart', function (e) {
            ox = e.touches[0].pageX - left;
            tag = true;
        }, false);
        _element.addEventListener('touchend', function (e) {
            updateDemo3Val();
            tag = false;
        }, false);
        var _element1 = document.getElementById('progress1');
        _element1.addEventListener('touchmove', function (e) {
            if (tag) {
                left = e.touches[0].pageX - ox;
                if (left <= 0) {
                    left = 3;
                } else if (left > progress1w) {
                    left = progress1w;
                }
                $('.progress_btn').css('left', left);
                $('.progress_bar').width(left);
                let min = (parseInt(left / (progress1w / 11)) * 15) + 15;
                pyl = min;
                let text = "";
                if (min > 60 && min % 60 != 0) {
                    text = parseInt(min / 60) + '小时' + min % 60 + '分钟';
                } else if (min >= 60 && min % 60 == 0) {
                    text = parseInt(min / 60) + '小时';
                } else {
                    text = min + '分钟';
                }
                $('.text').html(text);
            }
        }, false);

js(鼠标拖动)

$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
     ox = e.pageX - left;
     tag = true;
    });
    $(document).mouseup(function() {
     tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
     if (tag) {
      left = e.pageX - ox;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').width(left);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
     if (!tag) {
      bgleft = $('.progress_bg').offset().left;
      left = e.pageX - bgleft;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').animate({width:left},300);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
   });