js总结

js简介

javascrip 是一种直译式的脚本语言，弱类型，动态的，基于原型的，内置基本类型
通过js可以操作（处理）html文档的标签及样式，增加鼠标行为，键盘行为，浏览器行为等
js的基本构成：
1.ECMAScript 规定了js的基本语法
2.Dom（Document object model文档对象模型），规定了js访问和处理html标签及样式的属性和方法
3.Bom （Browser object model 浏览器对象模型）规定了js访问和处理浏览器对象的属性和方法
js内容写在固定的标签队里<script>

数据类型

基本数据类型（原始类型）：

• 字符串string
• 数字number
• 布尔值boolean
• 空值null
• 未定义undefined

复杂数据类型（引用类型）：

• .数组array
• .对象object

typeof返回值（六种）

• string
• number
• boolean
• undefined
• object
• function

类型转换
变量：存储在该容器中的数据是可以进行改变的，其数据类型也可以改变的，即类型不唯一：被称为弱类型
强类型：变量在声明时是什么数据类型，赋值时只能是该类型
显示类型转换： 通过变量从重赋值，改变变量的数据类型

var str = '字符串';
// alert(typeof str);  //string
str = 15;
// alert(typeof str);  //number

// str = true;         //boolean

隐式类型转化：

alert(1 + '2');     //'12'
// 数字类型与字符串类型相加时，数字类型会被隐式转换成字符串类型,再相加
alert(typeof(1 + '2')); //string

alert(1 + true);
alert(typeof 1 + 'true');

alert(null + 'aa');
alert(typeof (null + 'aa'));
// 数字类型与其他类型相减时，部分类型会被隐式转换成数字类型
alert('8' - 1);		//7
alert(typeof('8' - 1));	//7
alert(9 - true);	//8  true为1
alert(typeof(9 - true));
alert(10 - false);

赋值运算符

	var num = 14;
    num +=10;
    // alert(num);//24
    num -=10;
    // alert(num);//14
    num *=10;
    // alert(num);//140
    num /=10;
    // alert(num);//14
    num %= 10;//% 取余数
    // alert(num);//4

比较运算符（==等于，!=不等，<=,>=,<,>,===全等，!==全不等）

	console.log('8' == 8);//true（值相等）
    console.log('8' === 8);//false(值与数据类型都相等)
    console.log(true == 1);
    console.log(true != 'true');

逻辑运算符（与或非 &&,||,!）
0 ，undefined，null的布尔值是false
如果两个都为真，输出后者
如果两个都为假，输出前者
如果一真一假，输出假

	 console.log(true && -10);//-10
    console.log(0 && true);//0
    console.log(undefined && null);//undefined
    console.log('dog' && 'aaa');//aaa
    console.log('' && 'aaa');//''
    console.log(2 && 3);//3

如果两个都为真。输出前者
如果两个都为假，输出后者

 console.log(2 || 3);
 console.log(2 || 0);
 console.log(0 || null);

运算符优先级
（）最高
++ – !
* / %
+ -
比较运算符
&& ||赋值运算符

var a=10,b=15,c=20;
 var abc =(a +c) * b - ++a && c;
  console.log(abc);

for循环
for循环的标准写法：
for(设置次数初始值，0或者1 ;次数的范围，即执行多少次;值是怎么变化的)
{
需要循环执行的内容，即循环体
} 如下图

for(var j = 1; j <= 100; j++){
    console.log('开开心心写代码');
    console.log(j);
}

if条件判断语句
条件的真假，布尔值，或者比较运算符
if（条件）{
条件为真时的执行代码
}else{
条件为假时的执行代码
}

var isMale = true;
if(isMale){
	alert('是男性');
	}else{
	alert('是女性');
}

函数
函数，也被称方法，由function关键字声明或创建
function 封装部分功能重复的代码，封装完成之后，函数体内部的内容并不执行
调用函数时才会执行内部代码
有函数之后，代码方便管理，将功能性代码单独封装，执行时调用即可

• 有参函数：函数括号中的内容，被称为参数，本质是个变量，可以直接传入使用
• 有参数，有返回值的函数
• 匿名函数：实现自我调用
• 有返回值的函数
  作用域
  在js的运行环境中，作用域分两种：全局作用域和局部作用域
  局部作用域被称为函数作用域
  全局中声明的变量或函数，被称为全局变量和全局函数，任何作用域均可调用
  局部作用域声明的变量或函数，只能在局部及局部的内部范围内使用

var num = 10;
function show(){
var str = '字符串';
function calc(){
console.log(str);
}
calc();
}
show();

声明提升
声明提升，即，变量或函数的声明，会提升至该做用域的开始位置，但赋值位置不变
三元运算符
三元运算符是if…else的简写

var isMale = true;
var sex;
if(isMale){
     console.log('是男生');
            sex = '男';
        }else{
            console.log('是女生');
            sex = '女';
        }
 // 条件？条件为真时的值：条件为假时的值
        sex = isMale ? '男' : '女';

数组
创建数组：
1.创建字面量数组

var arr= [];
var arr1 = [1,2,3]

2.通过内置函数array 创建数组

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

循环遍历获取数组元素

for(var i = 0; i<arr.length; i++){
console.log(arr[i]);
}

数组对象的常用方法
1.reverse（）将数组元素倒序排列
2.push（）在数组的最后位置添加新元素
3.unshift（）在数组的开始位置添加新元素
4.shift（）删除数组的第一个元素，并返回被删除的元素
5.pop（）删除数组的最后一个元素，并返回被删除的元素
6.splice（index，length，argument）删除某个位置的数组元素
index：删除/添加的开始位置
length：删除元素的数量（如果值不存在，代表删除后面所有的元素）
argument：要添加的元素
7.indexof判断该元素第一次出现的索引值位置（如果元素不存在，值为-1）
8.forEach循环遍历获取数组元素

arr.forEach（function（item，index）{
console.log(item)；	//当前数组元素
console.log(index);		//当前数组元素所对应的索引值
}）

9.sort将数组升序，降序排列

var arr = [5,4,6,78,165];
    arr.sort(function(a,b){
    return a - b;
    })
    console.log(arr);

math对象的方法

var num = Math.random();	//获取[0,1]之间的随机小数
取整数
向下取整  	取小于该数值的、最近的整数
var num = Math.floor（）；
向上取整		取大于该数值的、最近的整数
var num = Math.ceil（）；
四舍五入取整
var num = Math.round（10.40）；		//10
var num = Math.round（10.50） ；		//11
保留小数点
var num = 100.154；
toFixed（n）保留n个小数点
num = num.toFixed（n）；
获取[5,15]之间的随机整数
var num = Math.random() * 10+5;
获取[30,80]与[90,140]之间的随机整数
var num = Math.random() * 80+25;
num<65 ? num : num+30;

字符串对象的方法
1.toUpperCase（）将小写转换为大写
2.toLowerCase（）将大写转化为小写
3.substring（startindex，endindex）截取两个索引值之间的字符串
4.substr（starindex，length）截取指定索引值位置的固定长度的字符串
5.charAt（index）获取指定索引值位置的字符

循环遍历获取所有的字符
for(var i =0; i<str.length; i++){
console.log(str.charAt(i));
}

6.split（）将字符串分割成数组
Date日期
获取当前日期
var now = new Date();
获取年
var year = now.getFullYear();
获取月(月份从零开始，到11结束，故加1)
var mouth = now.getMouth() +1;
获取日
var date = now.getDate();
获取小时
var hour = now.getHours();
获取分钟
var minute = now.getMinutes();
获取秒
var second = now.getSeconds();
文档对象模型

//appendchild()给body添加子元素
document.body.appendchild(h1);
//removechild（）移除子元素
document.body.removechild(h1);

循环遍历获取标签

//querySelectAll（选择器）
var lis = document.querySelectAll('ul li');
//获取每一个li标签
for(var i = 0; i<lis.length; i++){
console.log(lis[i]);
}

Dom对象
获取标签宽度

var w1 = div.clientwidth	//只包括内容加内边距，不包括边框和滚动条
var w2 = div.offsetwidth	//获取标签宽度
var w2 = div.scrollwidth	//

默认事件
默认阻止事件：preventdefault
事件传播行为：冒泡和捕获（默认是冒泡）
停止事件传播：stoppropagation
jQuery对象和原生对象dom对象
jquery是js框架，是个js库，封装了原生dom中部分属性和方法，用$来表示
凡是通过document获取到的标签，被称为dom对象
凡是通过jquery获取到的标签，被称为jquery对象
dom对象只能调用dom中的属性和对象
jquery只能调用jquery中的属性和方法
jquery对象转换成原生dom，有两种方法:

1. $(‘div’).get(0).innerHTML = ‘1’;

2. $(‘div’)[1].innerHTML = ‘2’;
   jquery常用方法
   1.设置样式：css（name，value）name：样式名称 value：样式值
   2.设置属性：attr（name，value）name：样式名称 value：样式值
   3.移除标签属性：removeAttr
   4.循环获取单个标签：each（index，element）
   5.点击事件：click（）
   6.链式调用： $(‘ul’).css(‘color’,‘red’).css(‘background’,‘yellow’).css(‘font-size’,‘20px’);
   7.获取直系子元素：children（）
   8.所有符合条件的子元素:find()
   9.获取同胞元素：siblings（）
   10.增加类名：addclass（）
   11.移除类名：removeclass（）
   12.获取某个标签：eq（）
   13.获取标签及内部的文字：html()
   14.获取标签的文本内容：text()
   15.获取标签与当前窗口之间的偏移量offset()
   16.获取定位元素相对于最近的设置有相对定位的父元素之间的偏移量：position()
   17.滚动事件：scroll()
   默认动画
   淡入：fadein（）
   淡出：fadeout（）
   切换：fadetoggle（）
   向上滑动消失：slideUp（）
   向下滑动出现：slideDown（）
   切换：slideToggle（）
   显示：show（）
   隐藏：hide（）
   切换：toggle（）
   自定义动画
   用animate（{}，time，function）方法来自定义动画
   用stop（）方法来停止动画，stop有三个参数
   stop()暂停当前正在执行的动画，其他队列的动画继续执行，动画可以继续执行
   stop(true)暂停所有队列中的动画，再次点击开始动画时，依然会按照原始队列顺序及其时间，再次重新开始执行动画
   stop(true,true)立即完成当前的动画，即快速结束，再次点击开始动画时，依然会按照原始队列顺序及其时间，再次重新开始执行动画
   筛选
   获取当前标签的所有父元素：parents（）
   获取当前标签的直系父元素：parent（）
   获取当前标签的某个范围内的父元素：parentsUntil（）
   获取当前标签的上一个同胞元素：prev（）
   获取当前标签上面的所有同胞元素：prevAll（）
   获取当前标签某个范围内的同胞元素：prevUntil（）
   获取当前标签的下一个同胞元素：next（）
   获取当前标签下面的所有同胞元素：nextAll（）
   获取当前标签某个范围内的同胞元素：nextUntil（）
   插入标签的常用方法
   在当前标签的结束位置添加子元素：append（）
   在当前标签的开始位置添加子元素：prepend（）
   将前者标签添加到后者标签的开始位置：perpendTo（）
   将前者标签添加到后者标签的结束位置：appendTo（）
   在当前标签的前面位置添加同级元素：before（）
   在当前标签的下一个位置添加同级标签：after（）
   将前者标签添加到后者标签的前面位置：inserBefore（）
   将前者标签添加到后者标签的后面位置：inserAfter（）；
   原始类型和引用类型
   原始值：原始类型的值，存储在变量中的是值本身，即存储在系统空间中是当前的值
   引用值：引用类型的值，存储在变量中的是一个地址（或指针方向），即该变量存储在系统空间中的是个指针方向，指向的是存储在堆中的某个值
   原始值与引用值的不同

   博主在学习js的一点基础知识，总结的不是很到位，因为是刚开始学，写出来是希望能加强自己的记忆力，也给自己的学习经过留下一点痕迹，如果刚好能帮到你，那就真的太棒了，希望能留下你的鼓励！！