JavaScript总结_javascript parselent-CSDN博客

本文链接：https://blog.csdn.net/qq_40749055/article/details/81010175

03-JavaScript

简单数据类型

简单数据类型存在栈中

string字符串

/*字符串使用双引号引起来的*/
//var string = "";

/*string类型为什么可以调用属性和方法*/
/*是先将自身转换成基本包装类型创建一个临时对象  var str = new String("hello world")用这个临时对象去调用属性和方法调用玩之后立即清除这个临时对象*/

/*属性 length字符串长度*/
var str = "shishunlin";
console.log(str.length) /*10*/

/*方法*/

/*toUpperCase()字符串转换为大写 toLowerCase()把字符串转换为小写*/
var txt="Hello world!"
document.write(txt.toUpperCase())
//HELLO WORLD!

/*match()可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配*/
var str="Hello world!"
document.write(str.match("world") + "<br />")    //world
document.write(str.match("World") + "<br />")    //null
document.write(str.match("worlld") + "<br />")   //null
document.write(str.match("world!"))         //world! 

/*indexOf()可返回某个指定的字符串值在字符串中首次出现的位置*/
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

/*replace()替换与正则表达式匹配的子串*/
var str = "abcdefabcdefabcdef";
// str= str.replace("d","m");  //从做开始第一个值被转换
console.log(str);   //abcmefabcdefabcdef
str = str.replace(/d/g,"m"); // 所有的都会转换
console.log(str);   //abcmefabcmefabcmef

/*link()用于把字符串显示为超链接*/
var str="Free Web Tutorials!"
document.write(str.link("http://www.w3school.com.cn"))

/*charAt()返回指定位置的字符*/
var str = "abcdef";// 字符串可以看成是字符的数组
var result = str.charAt(2); //c

/*[]跟charAt功能一样现在索引值*/
var str = "abcdef";// 字符串可以看成是字符的数组
var result =str[3];
console.log(result);        //d

/*charCodeAt()可返回指定位置的字符的 Unicode 编码*/
var str="Hello world!"
document.write(str.charCodeAt(1))   //101

/*trim() 清除前后空白,清除字符串两边的空格*/
var str = " abc a da  adfsd  ";
str = str.trim();  // 去掉字符串两边的空格
console.log("==="+str+"===");       //===abc a da  adfsd===

/*concat()用于连接两个或多个字符串*/
var str1="Hello "
var str2="world!"
document.write(str1.concat(str2))
//Hello world!

/*slice()可提取字符串的某个部分，并以新的字符串返回被提取的部分，会改变原来的字符串*/
//两个是正数，索引star开始，end结束
var str = "我叫石顺麟我是最棒的"
var str = str.slice(2,5);
console.log(str); //石顺麟
//一个是正数，从索引star开始到最后
var str = "我叫石顺麟我是最棒的"
var str = str.slice(2);
console.log(str); //石顺麟我是最棒的
//star是正数，end是负数，end从后面开始数，长度+end结束
var str = "我叫石顺麟我是最棒的"
str = str.slice(2,-2);  //slice(2,8)
console.log(str);   //石顺麟我是最
//star是负数，从后面数，长度+end结束，截取到最后
var str = "我叫石顺麟我是最棒的"
str = str.slice(-2);  //str.slice(8)
console.log(str);   //棒的

/*split()会把字符串转化为数组*/
var str = "Hello world!"
console.log(str.split(''))  //print is ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

/*字符串拼接最简单的方法*/
//原始HTML代码
 <div class="confirm-logic-invoice-content-list">
    <p class="clearfix p-top">
        <span class="fl p-name">石顺麟</span>
        <span class="fr p-telphone">13597611220</span>
    </p>
    <p class="p-address">湖北省</p>
</div>
//把服务器传过来的数组对象放到里面[{name:"shi",age:18},{name:"ke",age:19}]
//用单引号链接方便些，并且把变量放进去，可以  '+arr[0].name+'
var str = 
    '<div class="confirm-logic-invoice-content-list">'+
        '<p class="clearfix p-top">'+
            '<span class="fl p-name">'+arr[0].name+'</span>'+
            '<span class="fr p-telphone">arr[0].age</span>'+
        '</p>'+
        '<p class="p-address">湖北省</p>'+
    '</div>';

number数字类型

/*number数组类型0-9的数字和NaN也是*/
var number = 0;

/*方法*/

/*toFixed()把数字转换为字符串，结果的小数点后有指定位数的数字*/
var num = 5.56789;
var n=num.toFixed(2); //5.57

/*paseFloat()转化为数字类型这是我们常用的方法*/
var str = '12.56.23';
console.log(parseFloat(str))  //print is 12.56

/*parseInt()转化为整数*/
var str = '12.56.23';
console.log(parseInt(str))  //print is 12

/*Number() 字符串必须是数字的字符串，否则会是NaN*/
var str = '12.56.23';
console.log(Number(str))  //print is NaN

var str1 = '12.56';
console.log(Number(str1))  //print is 12.56

boolean布尔值

/*只有true和false连个状态 true对的 false错的*/

undefined未定义

/*声明了变量没有赋值*/
var a;
console.log(a) //is not defined

null空

/*空 null*/

复杂数据类型

存在堆中

array数组

/*数组对象的作用是：使用单独的变量名来存储一系列的值*/
/*数组定义*/
//字面量
var arr = [10,20,30,40];
//构造函数
var arr = new Array();

/*属性length数组的长度，length-1是数组最后一个 constructor prototype*/
var arr = [10,20,30,40];
console.log(arr.length); //4

数组重组

/*数组重组 sort()*/
var  numberArray  =   [3, 6, 2, 4, 1, 5];
numberArray.sort(function(a,b){
    return b-a;
 })
console.log(numberArray)  //[6,5,4,3,2,1]

清空数组

/*清空数组 length=0 []*/
var arr = [1,2,3,4,5];
arr = []  //已经清空数组了，最常用的方式
arr.length = 0; //也可以清空数组
arr.splice(0,arr.lentth) //也能清空数组

检测数据类型

/*数组类型检测 Array.isArray(Object); Object instanceof Array;*/
var arr = [1,2];
Array.isArray(arr) //检测是不是数组，返回值true或者false
arr instanceof Array; //返回值也是true或者false,注意：只能检测数组和对象 不能测试伪数组

遍历数组

/*遍历数组*/
数组其实也就是一个对象，不过它的属性名是索引值类似于
var arrayObj = {
    "0":10,
    "1":20,
    "2":30,
    "3":40
}

//for in 循环数组  
var nums = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
for (let key in nums) {
    console.log(key)  //key是索引值，如果是对象，key是属性名
    console.log(nums[key])  //数组对应的每个值
}

//for循环
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for(var i=0; i< mycars.length; i++) {
    document.write(mycars[i] + "<br />")
}

//forEach()
var nums = [10,20,30,40,50,60,70,80,90,100];
    nums.forEach(function(value,index){
        console.log(value,index)
    })
//10 0
//20 1
//.. ..
//100 9

//filter()

插入元素

/*方法*/
//splice()用于插入、删除或替换数组的元素，接受3个参数
//参数1是开始索引值
//参数2是需要替换几个元素，如果是0则是添加数据，如果是1，一对一替换元素，如果大于等于2则是n个元素替换参数3
//参数3是替换的值
//插入元素
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
//George,John,Thomas,James,Adrew,Martin
//George,John,William,Thomas,James,Adrew,Martin
//一对一替换元素
arr.splice(2,1,"William")
document.write(arr)
//George,John,Thomas,James,Adrew,Martin
//George,John,William,James,Adrew,Martin
//删除多个元素替换元素
arr.splice(2,3,"William")
document.write(arr)
//George,John,Thomas,James,Adrew,Martin
//George,John,William,Martin

//根据索引值删除数组
var abc = [0,1,2,3,4,5];
abc.splice(1,1);
console.log(abc) //[0,2,3,4,5]

删除数组元素

/*删除数组元素 shift()前面删除 pop后面删除 都会改变数组原来的值，不会重新创建*/
//shift()用于把数组的第一个元素从其中删除，并返回第一个元素的值
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
//George,John,Thomas
//George
//John,Thomas

//pop用于删除并返回数组的最后一个元素,注意:这也会改变数组的长度
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr)
document.write(arr.pop())
document.write(arr)
//George,John,Thomas
//Thomas
//George,John

连接数组元素

/*连接数组元素 concat()连接更多数组 unshift()数组前面添加 push()末尾添加元素*/
//concat()连接两个或更多的数组，并返回结果
var a = [1,2,3];
document.write(a.concat(4,5));
//1,2,3,4,5 
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
//George,John,Thomas,James,Adrew,Martin,William,Franklin 

//unshift()可向数组的开头添加一个或更多元素，并返回新的长度,直接修改原来的数组
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)
//George,John,Thomas
//4
//William,George,John,Thomas

//push()可向数组的末尾添加一个或多个元素，并返回新的长度
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
//George,John,Thomas
//4
//George,John,Thomas,Jame

查找数组元素

/*查找数组元素 indexOf() lastIndexOf()*/

/*indexOf()查找参数中的值，如果有返回索引值，没有返回-1*/
var nums = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
console.log(nums.indexOf(30))  //print is 2
console.log(nums.indexOf(110))  //print is -1

/*查找顺序从右边查lastIndexOf()*/

排序数组元素

/*排序数组元素 reverse()颠倒数组元素 sort()顺序排序*/

/*reverse()用于颠倒数组中元素的顺序 会覆盖原来的数据*/
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.reverse())
//George,John,Thomas
//Thomas,John,George 

/*sort()对数组的元素进行排序 注意:数组在原数组上进行排序，不生成副本 */

//从字面上A-B-C-D
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
//George,John,Thomas,James,Adrew,Martin
//Adrew,George,James,John,Martin,Thomas


//从数字上1-2-3-4
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
//10,5,40,25,1000,1
//1,5,10,25,40,1000

数组转化为字符串

/*数组转化为字符串 join() toString()*/

/*join()用于把数组中的所有元素放入一个字符串 不会改变原来的数组*/
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
//George,John,Thomas

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
//George.John.Thomas

/*toString() 可把数组转换为字符串，并返回结果*/
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.toString())
//George,John,Thomas

选定数组元素

/*选定数组元素 slice()可从已有的数组中返回选定的元素 注意:该方法并不会修改数组，而是返回一个子数组*/
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
//George,John,Thomas
//John,Thomas
//George,John,Thomas

object对象

javaScript是面向对象的语言

通过字面量方式创建

将成员信息写到{}中，并且赋值给一个变量。此时的这个变量就是一个对象
这个是我们经常用到的

var person={
    name:'jack',
    sex:'girl',
    job:function(){}
}
 person.job();

通过构造函数创建

方法：var person=new 函数名();
通过该方法创建对象时，会自动执行该构造函数
构造函数也是函数，只是为了区分开，首字母采用大写

function Person() {
    this.name = 'jack';
    this.sex = 'girl';
    this.job = function() {
        console.log('构造函数的创建');
    }
}
var child = new Person();
console.log(child)  //这变成1个对象了

通过object方式创建

通过object构造器new一个对象，再丰富成员信息，这个类似于构造函数创建，只是我们把Object当做公共的

var person = new Object();
person.name = 'jack';
person.sex = 'girl';
console.log(person) //这也变成了1个对象，跟构造函数类似

通过object.create方式创建

用这个方式创建，新对象的原型里会有原始的对象

var p = {
    name: 'jack',
    sex: 'girl'
};
var object1 = Object.create(p);
console.log(object1) //p对象的东西在object1的prototy原型里

遍历对象

变量对象可以采用for in 的方法

/*遍历对象for...in*/

var json = {
       "width":"200px",
       "height":"300px",
       "left":"20px",
       "top":0
     }
for(var key in obj){
        console.log(key+"===="+obj[key]);
        //key是从上到下的属性名称 obj[key]是对应的属性名称的值
}

function函数

函数是为了解决重复运行的代码或者功能
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

/*return用来规定从函数返回的值，返回后退出函数*/
function product(a,b){
    return a*b
}
document.write(product(6,5)) //30

/*函数声明 必须在调用的前面*/
var fun1 = function(n1,n2){
    return n1+n2;
}

/*函数表达式 这个到哪里都是可以的*/
getsum(n1,n2);
function  getsum(n1,n2) {
    return n1+n2;
}

/*回调函数 就是一个普通的函数，把这个普通的函数单做参数来传递*/

Date事件对象

/*日期对象用于处理日期和时间 Data*/

/*获取当前时间*/
var myDate=new Date();

/*创建日期对象*/
var date = new Date(2017,4,10) //月份从0开始
var date = new Date("2017-4-10") //月份从1开始
var date = new Date(1234567891234);

//方法 getFullYear()获取年份 getMonth()获取月份 getDate()获取月份天数
//getDay()返回星期几 getHours()获取小时 getMinutes()获取分钟 getSeconds()获取秒数 
//getMilliseconds()获取毫秒 getTime()从1970.1.1的毫秒数
//获取时间戳(timestamps)这个在JavaScript很常见

/*getFullYear() 可返回一个表示年份的 4 位数字*/
var d = new Date();
document.write(d.getFullYear()); //2017

/*getMonth() 可返回表示月份的数字，从0-11的数字*/
var d=new Date();
document.write(d.getMonth());

/*getDate() 可返回月份的某一天 1-31的数字*/
var d = new Date();
document.write(d.getDate());

/*getDay() 返回表示星期的某一天的 0-6的数字*/
var d=new Date();
document.write(d.getDay());

var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])

/*getHours() 返回 Date 对象的小时 (0 ~ 23)*/
var d = new Date()
document.write(d.getHours())

/*getMinutes() 返回 Date 对象的分钟 (0 ~ 59)*/
var d = new Date()
document.write(d.getMinutes())

/*getSeconds() 返回 Date 对象的秒数 (0 ~ 59)*/
var d = new Date()
document.write(d.getSeconds())

/*getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。*/
var d = new Date()
document.write(d.getMilliseconds())

/*getTime() 返回 1970 年 1 月 1 日至今的毫秒数，也相应于是时间戳的毫秒*/

/*new Date()/1000获取时间戳*/
var d = new Date() /1000
console.log(d)  //获取的是时间戳，也就是1970年1月1日至今的秒杀，是getTime()的一千倍



/*显示一个钟表*/
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
h=checkTime(h);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>


/*获取时间戳*/
//获取当前的时间戳
Math.round(new Date() / 1000)
//获取当天凌晨的时间戳，这个目的可以到凌晨刷新页面
var now = new Date();
now.setHours(24, 00, 00, 00); //这个必须加上，不然是当前的时间戳
console.log(now.getTime()); //次日凌晨的时间戳

Regexp正则表达式

json对象

/*json的属性是用双引号引起来的 保存的是键值对的数据。*/

/*JSON.parse()json字符串转化为对象*/

/*JSON.stringify() json对象转化为字符串*/
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
//结果变为字符串
{"name":"runoob","alexa":10000,"site":"www.runoob.com"}

事件

/*事件只有触发才执行的函数*/

/*事件名称*/
//onclick   鼠标点击
//onmouseover   鼠标移入元素之上
//onmouseout    鼠标移入元素之上
//onload    整个页面加载玩
//onunload  用户退出页面时发生
//keydown   键盘按下会触发的事件
//keyup 键盘放手触发的事件
//onscroll  键盘放手触发的事件
//onresize  会在窗口或框架被调整大小时发生
//onmouseover   会在鼠标指针移动到指定的对象上时发生
//onmousemove   会在鼠标指针移动时发生
//onmousedown   会在鼠标按键被按下时发生，不放手的状态
//onmouseup 鼠标按键被松开时发生
//onblur    对象失去焦点时发生

/*注册事件addEventListener 谷歌和火狐和IE高级浏览器支持 只需加类型，不需要加“on”， 后面必须加false（支持冒泡）和true（支持捕获）*/
Node.addEventListener("click",function(){...},false)
Node.addEventListener("click",function(){...},true)

/*attachEventIE8及之前的浏览器 必须同一个函数名字才起作用*/
var btn = document.getElementById("btn");
var fn = function (){
    alert("但行善事");
}
btn.attachEvent("onclick",fn);
btn.detachEvent("onclick",fn);

/*封装兼容的*/           
/**
 * 封装了一个兼容的注册事件的函数
 * @param obj
 * @param type
 * @param listener
 */
function addEventListener(obj, type, listener) {
  // 能力检测
  if (obj.addEventListener) {
    obj.addEventListener(type, listener, false);
  } else if (obj.attachEvent) {
    obj.attachEvent("on" + type, listener);
  } else {
    obj["on" + type] = listener;
  }
}          

/*移除事件*/  
/*removeEventListener谷歌和火狐和IE高级浏览器支持 必须同一个函数名字才起作用 匿名函数不行，后面需要加false*/ 
var btn = document.getElementById("btn");
    var fn = function (){
        alert("但行善事");
    }
btn.addEventListener("click",fn,false);
btn.removeEventListener("click",fn,false)

/*detachEventIE8及之前的浏览器 IE8及之前的浏览器 attachEvent下清除事件 */
var btn = document.getElementById("btn");
var fn = function (){
    alert("但行善事");
}
btn.attachEvent("onclick",fn);
btn.detachEvent("onclick",fn);

/*封装兼容的*/
/**
       * 封装了一个兼容版本的移除事件的函数
       * @param obj
       * @param type
       * @param listener
       */
      function removeEventListener(obj,type,listener){
        // 能力检测
        if(obj.removeEventListener){
          obj.removeEventListener(type,listener,false);
        }else if(obj.detachEvent){
          obj.detachEvent("on"+type,listener);
        }else {
          obj["on"+type] = null;
          // 把对象的值设置为null ，就相当于移除此对象了
    }
}

/*事件阶段*/     

//1.捕获阶段    先从祖先级元素开始，然后一层层的直到目标元素为止                       //2.目标阶段    正在执行事件处理程序的阶段
//3.冒泡阶段    子级和父级 都有相同的注册事件，并且是嵌套关系                         //冒泡的好处，可以事件委托
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移除事件</title>
    <script>
        window.onload = function() {
            var ul = document.getElementsByTagName("ul")[0];
            var lis = ul.children;
            var fn = function (){
             alert(this.innerHTML)
            };
            ul.onclick = function (e) {
                e = e ||window.event;
                console.log(e.target.innerHTML);
                //target  目标，源头  原始的事件事件源
            }
        }
    </script>

</head>
<body>
    <ul>
  <li>这是第1个li标签</li>
  <li>这是第2个li标签</li>
  <li>这是第3个li标签</li>
  <li>这是第4个li标签</li>
  <li>这是第5个li标签</li>
  <li>这是第6个li标签</li>
</ul>
</body>
</html>

/*阻止事件冒泡事件*/  
function(e){
  e.stopPropagation() //高级浏览器支持的方式
  e.cancelBubble()  //IE浏览器支持的方式
}

/**
* 封装了一个兼容性的阻止冒泡的写法
* @param e
*/
function stopPropagation(e){
    if(e&&e.stopPropagation){
        e.stopPropagation();
    }else {
        e.cancelBubble= true;
    }
}  

/*检测事件阶段 1表示捕获阶段，2表示目标阶段，3表示冒泡阶段*/
for(var i =0;i<arr.length;i++){
    arr[i].addEventListener("click",function (e){
        e  = e || window.event;
        console.log(e.eventPhase);
    },true);
}  

/*检测事件类型*/         
btn.onmouseover = function (e){
    e = e || window.event;
    alert(456);
    console.log(e.type);
}

/*which 检测鼠标哪个按键触发*/
//1表示左键，2表示中键，3表示右键

/*事件属性*/
//e = e || window.event;
//this 表示当前对象，正在执行事件处理程序的那个事件源头
//target 目标 源头   最原始的触发事件的源头,IE8不支持
//currentTarget 正在执行事件处理程序的当前对象,IE8不兼容和this的用法是一样的
//srcElement 表示最最原始的事件源头 target的用法是一样的

/*事件对象 e = e || window.event;*/

/*screen 屏幕*/
//e.clientX e.screenY 屏幕可视区

/*client 客户端*/
//e.clientX e.clientY 客户端可视区

/*page 页面*/
//e.pageX e.pageY 整个文档页面可视区

变量

内存中用来保存数据的一块空间

/*变量声明和赋值*/
var obj = 10;
var obj1= 20;
obj = obj1;

/*命名规则*/
//不能使用数字开头
//不能使用关键字和保留字
//严格区分大小写
//开头要以 $ _ 字母

/*变量交换*/
var num1 = 100;
var num2 = 20;
//交换后num1 = 20；  num2 = 10;
var temp = num1;
num1 = num2;
num2 = temp;

数据类型转换

number数字类型

Number()

number()只能打是数字类型的字符串转化为number类型，这个不经常用
~~~javascript
/number数字类型/

//Boolean值返回是1(true)和0(false)
//null值返回是0
//undefined返回是NaN

/字符串/
var num = Number(“123”); //123
var num = Number(“1.52”); //1.52
var num = Number(“011”); //11
var num = Number(“Hello World”); //NaN
~~~

ParseInt()会转化成整数，忽略后面的小数点

var num = parseInt("1234px"); //1234
var num = parseInt("22.56");  //22

parseFloat()浮点数

parseFloat是经常用的
~javascript
var num = parseFloat("1234px"); //1234
var num = parseFloat("0xA"); //0
var num = parseFloat("22.54") //22.54
var num = parseFloat("0908.5") //908.5
var num = parseFloat("22.35.4") //22.35
var num = parseFloat("3.125e7") //31250000
~

toFixed() Number 四舍五入为指定小数位数的数字

var num = 5.56789;
var n=num.toFixed(2);  //5.57 是一个字符串

string字符串类型

// +"" 加一个空格字符
var string = 123 +"";  //"123"

//String()
var age = 10;
var ageString = String(age); //"10"
var string = String(true);  //"true"
var string = String(null)   //"null"

//toString()  null和undefined没有这个方法
//toString(): 返回表示 Integer 值的 String 对象。
//toString(int i): 返回表示指定 int 的 String 对象。
public class Test{
    public static void main(String args[]){
        Integer x = 5;

        System.out.println(x.toString());  //5
        System.out.println(Integer.toString(12));  //12
    }
}

boolean布尔值

/*Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。*/
//取反 !!

//Boolean() 
//转为false的 false o -0 undefined null NaN ""

var b1=new Boolean(0);  //false
var b2=new Boolean(1);  //true
var b3=new Boolean("");  //false
var b4=new Boolean(null); //false
var b5=new Boolean(NaN);  //false
var b6=new Boolean("false"); //false

算术运算符

// +加 -减 *乘 /除 %取余

/* + */
//连接符
var string = 123+"ab"  //"123ab"
//算术
var num = 12+13  //25

/* % */
var num = 100%3 //1

赋值运算符

/* =把右边的值赋值给左边 */

/*复合赋值运算符 += -= *= /= %=*/
// +=加等于 在原来的基础上在相加
mun = num +5;  //等价于num+=5
// -=减等于 在原来的基础上相减
num = num-5;  //等价于num-=5

一元运算符

/*自增运算符 ++num自己先先加1，运算也加1 mun++自己加1，运算不加1*/
//++num
var num = 5;
sum = ++num;  //6
sum += num;   //12

//num++
var num = 5;
sum = num++;  //5
sum += num;  //11

/*自减运算符 --num自己减1，运算也减1 num--自己减1，运算不减1*/
//--num
var num = 5;
sum = --num;  //4
sum += num;  //8

//num--
var num = 5;
sum = num--;  //5
sum += num;   //9

关系运算符

/* <小于 >大于 <=小于等于 >=大于等于 ==相等 !=不相等 ===全等 ！==不全等 */

//==
"55" == 55;  //返回true会反生隐士转换，只需数组相等就行

//===
"55" === 55;  //返回false数值和类型相等

逻辑运算符

/* &&并且，全真就是真，有假就是假 ||或者，有真就是真，全假就是假 !取反 */

//返回值都是布尔值 true或者false

//短路问题
//&&
//如果第一个表达式可以转换成false的话，那么这整个逻辑与表达式的结果就是这个表达式1的值,发生了短路，表达式2就不会运算了
//如果第一个表达式不能转换成false的话，那么这整个逻辑与表达式的结果就是表达式2的值，不管表达式2的值是什么

//||
//如果第一个表达式可以转换成true的话，那么这整个逻辑或表达式的结果就是这个表达式1的值，此时发生了短路，表达式2就不会运算
//如果第一个表达式不能转换成true的话，那么就直接返回表达式2的结果，不管表达式2是什么

三元运算符

/*a>b?a:b a大于b吗？如果大于是a否则是b*/
var num1 = 20;
var num2 = 30;
var  res = num1>num2 ? num1 :num2  //30

Math对象方法

~~~javascript
//floor()向下取整 ceil()向上取整 random()返回0-1随机数
//max()取最大值 min()取最小值 abs()取绝对值
//pow()求方 round()四舍五入

//Math.floor()向下取整
var a = Math.floor(1.12); //1
var a = Math.floor(-1.12); //-2

//Math.ceil()向上取整
var a = Math.ceil(0.12); //1
var a = Math.ceil(-5.9); //-5

//Math.random()返回0-1的随机数
var a = Math.random() //返回0-1的随机数

//max()取最大值
var a = Math.max(4,12); //12

//min()取最小值
var a = Math.min(4,12); //4

//abs()取绝对值
var a = Math.abs(-9) //9

//pow()求a的b次方
var a = Math.pow(2,3); //2的3次方 8

//round()四舍五入
var a = Math.round(0.6) //1
var a = Math.round(0.49) //0
~~~

控制判断语句

/*if if...else if...else if...else switch case*/

//if在一个指定的条件成立时执行代码。  注意：请使用双等号 (==) 来比较变量！
var a = 10;
if(a > 0){
  console.log(a);  //10
}

//if...else在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
var a = 10
if(a>15){
  console.log(a)  //不会执行
}else{
  console.log(a)  //10
}

//if...else if....else 使用这个语句可以选择执行若干块代码中的一个，else可以不写，区间从大往小。 
var a = 10
if (a > 20) {
    console.log(a) //不会执行
} else if (a > 16) {
    console.log(a) //不会执行
} else if (a > 10) {
    console.log(a) //不会执行
} else {
    console.log(a) //10
}
//switch case 选择执行若干代码块中的一个，你可以使用 switch 语句
var d=new Date()
theDay=d.getDay()
switch (theDay)
   {
   case 5:
     document.write("Finally Friday")
     break
   case 6:
     document.write("Super Saturday")
     break
   case 0:
     document.write("Sleepy Sunday")
     break
   default:
     document.write("I'm looking forward to this weekend!")
}

//注意:没有110>a>90，只有110>a && a>100

//break直接终止循环，整个循环结束
var i=0
for (i=0;i<=10;i++){
    if (i==3){
        break
    }
document.write("The number is " + i)
document.write("<br />")
}
//The number is 0
//The number is 1
//The number is 2

//continue 结束当前本次循环，没有结束整个循环 命令会终止当前的循环，然后从下一个值继续运行。
var i=0
for (i=0;i<=10;i++){
    if (i==3){
        continue
    }
document.write("The number is " + i)
document.write("<br />")
}
//The number is 0
//The number is 1
//The number is 2
//The number is 4
//The number is 5
//The number is 6
//The number is 7
//The number is 8
//The number is 9
//The number is 10

循环

/* for while do...while */

//for循环是最常用的 现在定义变量最好是let了，最好不用var了
for (let i = 0; i <= 5; i++){
    document.write("数字是 " + i)
    document.write("<br />")
}
//数字是0
//数字是1
//数字是2
//数字是3
//数字是4
//数字是5

//while 用于在指定条件为 true 时循环执行代码 i++不能忘记
var i = 0
while (i <= 5){
    document.write("数字是 " + i)
    document.write("<br>")
    i++
}
//数字是0
//数字是1
//数字是2
//数字是3
//数字是4
//数字是5

//do...while 初次运行时会首先执行一遍其中的代码 i++也不能忘记
var i = 0
do{
    document.write("数字是 " + i)
    document.write("<br>")
    i++
}while (i <= 5)

//九九乘法表
for(var i=1;i<=9;i++) {
    for(var j=1;j<=i;j++) {
        document.write(i+"*"+j+" = "+(i*j)+"  ");   
    }
    document.write("<br/>")
}

类名操作

/*className()增加类和删除类*/

//增加类 demo1,会覆盖以前的类型，所有增加的话加前面的
obj.className("demo demo1");

//删除类
obj.className("");

this

//在事件当中，如果操作的是同一个事件源的话，那当前对象可以用this来指代

//改变this指向 call apply
call(thisObj,Object1,Object2...);
apply(thisObj,[argArray,argArray1]);

文本内容

/*innerText textContent innerHTML*/

//innerHTML获取内容和设置内容，纯文本直接获取，有嵌套标签会被一并获取
//obj.innerHTML 获取内容
//obj.innerHTML 设置内容，有标签会渲染出来

//innerText获取内容，纯文本直接读取，有嵌套标签会被忽略掉，有兼容性，IE8之前的浏览器只支持innerText
//obj.innerText 获取内容
//obj.innerText="内容" 纯文本直接设置，有带标签会进行转义，不会渲染出来

arguments

/*是一个伪数组，跟this类似，可以求和*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>arguments</title>
</head>
<body>

</body>
</html>
<script>
  function getSum(){
    // arguments  伪数组
    var sum = 0;
    for(var i=0;i<arguments.length;i++){
       sum += arguments[i];
    }
    return sum;
  }
  // 2   6   12
  getSum(20,35);
  console.log(getSum(20,35));  
  // return的用法
  // 1. 用来返回函数里面的数据，返回之后跳出当前函数
  // 2. 执行到return语句后，后面的代码不会执行，也要跳出当前函数
</script>

表单相关

/*文本框*/
//this.value=""  清空文本框
//this.value="请输入一个值"  设置文本框

/*全选*/
//obj.checked=true 设置为选中状态
//obj.checked=false 设置为不选中状态

属性相关

/*自定义属性 setAttribute 用setAttribute设置的属性必须用getAttribute来获取*/
//obj.setAttribute("index","123") 设置属性
//obj.getAttribute("index")  获取属性
//obj.index  获取属性值

/*移除属性*/
//obj.removeAttribute("index")  会移除属性名和属性值

/*属性相关的API*/
//obj.index = i  为标签设置索引值属性
//obj.mm="aaa"
//this.index  获取设置index属性名的i属性值
//this.className  获取类名
//this.type  获取属性

DOM

Document Object Model 文档对象模型

获取对象元素

/*通过ID获取*/
//document.getElementById("id名")  不需要加#

/*通过标签名获取*/
//document.getElementsByTagName("li")  获取的是伪数组

/*通过类名*/
//document.getElementsClassName("demo")

/*某个元素内部通过标签获取元素*/
//ul.getElementsByTagName("li")

动态创建元素

/*document.write() 像文档写内容，动态添加会覆盖以前的标签和元素*/

/*innerHTML获取和设置内容*/
//Node.innerHTML  获取元素内容
//Node.innerHTML="我叫石顺麟" 设置元素内容
//Node.innerHTML="<li>我是li</li>"  会渲染标签

/*document.creatElement 只能创建标签*/
//Node.document.creatElement("a")  创建a标签,p标签,img标签，button标签也一样

显示隐藏元素

/*显示元素*/
obj.style.display="block"

/*隐藏元素*/
obj.style.display="none"

节点

/*类型的判断*/
//nodeType  返回节点类型
//nodeName  返回节点名称
//nodeValue  返回节点内容

/*节点的类型*/

//标签，类型的判断
//nodeType  返回 1
//nodeName  返回 标签名
//nodeValue  返回 null

//属性，类型的判断
//nodeType  返回 2
//nodeName  返回 属性名
//nodeValue  返回 属性值

//文本，类型的判断
//nodeType  返回 3
//nodeName  返回 #text
//nodeValue  返回 文本的内容

//注释,类型的判断
//nodeType   返回 8
//nodeName  返回 #comment
//nodeValue  返回 注释的内容

/*父标签节点*/
//parentNode

/*子节点*/

//childNodes  标准的DOM属性，高浏览器会显示其他标签节点，隔行变色，返回值是数组

//children  没有兼容性，返回值是数组，不是标准的DOM属性，但是获得了所有浏览器的支持，隔行变色

/*下一个兄弟姊妹节点*/

//nextSibling  没有兼容性，高级浏览器不但会获得标签节点，还会获得文本节点或注释节点，低版本的浏览器如IE8，会忽略空白文本节点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>previousSiblingg与previousElementSibling</title>
</head>
<body>
<div>
  <p></p>
  <ul id="list"> <!--这是一个注释-->123
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>456
    <!--这是一个注释--><li id="li3">这是第3个li标签</li>123 <!--这是一个注释-->123 <!--这是一个注释-->
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
  </ul>
</div>
</body>
</html>
<script>
 var li3 = document.getElementById("li3");
 var node = li3.previousSibling; 
</script>

//previousElementSibling  有兼容性的问题，高级浏览器支持的方式，只会获得上一个标签节点，而低版本的浏览器比如IE8不支持此属性

//封装兼容性的
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>封装兼容的previousSibling</title>
</head>
<body>
<div>
  <p></p>
  <ul id="list"> <!--这是一个注释-->123
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>456
    <!--这是一个注释--><li id="li3">这是第3个li标签</li>123 <!--这是一个注释-->123 <!--这是一个注释-->
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
  </ul>
</div>
</body>
</html>
<script>
 var li3 = document.getElementById("li3");
 var node = getPreviousElement(li3);
 console.log(node.innerHTML);
 console.log(node.nodeType);
 /**
  * 封装了一个兼容版本的获得上一个标签节点的函数
  * @param ele
  * @returns {*}
  */
 function getPreviousElement(ele){
   // 能力检测
   if(ele){
    if(ele.previousElementSibling){ // 高级浏览器支持的方式
      return ele.previousElementSibling;
    }else {
       ele= ele.previousSibling;
       while(ele.nodeType!=1){
         ele= ele.previousSibling;
       }
        return ele;
    }
   }
 }
</script>

/*下一个兄弟姊妹节点*/

//nextSibling  没有兼容性，高级浏览器不但会获得标签节点，还会获得文本节点或注释节点，低版本的浏览器如IE8，会忽略空白文本节点

//nextElementSibling  有兼容性的问题，高级浏览器支持的方式，只会获得下一个兄弟姊妹级的标签节点，低版本的浏览器比如IE8不支持此属性

//封装兼容的
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>children</title>
</head>
<body>
<div>
  <p></p>
  <ul id="list"> <!--这是一个注释-->123
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>
    <li id="li3">这是第3个li标签</li>123 <!--这是一个注释-->123 <!--这是一个注释-->
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
  </ul>
</div>
</body>
</html>
<script>
 var li3 = document.getElementById("li3");
 var node = getNextElement(li3);
 console.log(node.innerHTML);
 /**
  * 封装了一个兼容版本的获取下一个标签节点的函数
  * @param ele
  * @returns {*}
  */
 function getNextElement(ele){ // undefined
   //能力检测  就是要看当前的浏览器是否支持此对象的属性或是方法
   if(ele&&ele.nextElementSibling){ // 逻辑   短路运算
     return ele.nextElementSibling;
   }else { // IE8
     if(ele){
       ele = ele.nextSibling; // 因为下一个节点，有可能是文本、注释、或是标签，所以需要判断节点类型，而且需要用while来判断
       while(ele.nodeType!=1){
         ele = ele.nextSibling;
       }
       return ele;
     }
   }
 }
</script>

/*第一个子节点*/

//firstChild  是没有兼容性的，各浏览器都支持的属性，高级浏览器不但会获得子标签节点，还会获得文本节点或是注释节点，而低版本的浏览器比如IE8，会忽略空白文本节点

//firstElementChild  有兼容性的问题，高级浏览器支持的方式，只会获得第一个子标签节点，而低版本的浏览器比如IE8，不支持此属性

//封装兼容的firstChild
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>firstChild与firstElementChild</title>
</head>
<body>
<div>
  <p></p>
  <ul id="list"><!--注释-->
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>456
    <li >这是第3个li标签</li>
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
  </ul>
</div>
</body>
</html>
<script>
  var ul = document.getElementById("list");
  var node = getFirstElement(ul);
  console.log(node.innerHTML);
  console.log(node.nodeType);
  /**
   * 封装了一个兼容版本的获得第一个子标签节点的函数
   * @param ele
   * @returns {*}
   */
  function getFirstElement(ele){
    // 能力检测
    if(ele){
      if(ele.firstElementChild){
        return ele.firstElementChild;
      }else {
        ele = ele.firstChild;//先用各浏览器支持的这个属性获得一下第一个子节点
        while(ele.nodeType!=1){
          ele= ele.nextSibling;
        }
        return ele;
      }
    }
  }
</script>

/*第一个子节点*/

//firstChild  是没有兼容性的，各浏览器都支持的属性,高级浏览器不但会获得子标签节点，还会获得文本节点或是注释节点,而低版本的浏览器比如IE8，会忽略空白文本节点

//firstElementChild  有兼容性的问题，高级浏览器支持的方式，只会获得第一个子标签节点,而低版本的浏览器比如IE8，不支持此属性

//封装兼容的firstChild
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>firstChild与firstElementChild</title>
</head>
<body>
<div>
  <p></p>
  <ul id="list"><!--注释-->
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>456
    <li >这是第3个li标签</li>
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
  </ul>
</div>
</body>
</html>
<script>
  var ul = document.getElementById("list");
  var node = getFirstElement(ul);
  console.log(node.innerHTML);
  console.log(node.nodeType);
  /**
   * 封装了一个兼容版本的获得第一个子标签节点的函数
   * @param ele
   * @returns {*}
   */
  function getFirstElement(ele){
    // 能力检测
    if(ele){
      if(ele.firstElementChild){
        return ele.firstElementChild;
      }else {
        ele = ele.firstChild;//先用各浏览器支持的这个属性获得一下第一个子节点
        while(ele.nodeType!=1){
          ele= ele.nextSibling;
        }
        return ele;
      }
    }
  }
</script>

/*最后一个子节点*/

//lastChild
//lastElementChild

//封装兼容的lastElement
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>lastChild</title>
</head>
<body>
<div>
  <p></p>
  <ul id="list"><!--注释-->
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>456
    <li >这是第3个li标签</li>
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
  </ul>
</div>
</body>
</html>
<script>
  var ul = document.getElementById("list");
  var node = getLastElement(ul);
  console.log(node.innerHTML);
  /**
   * 封装了一个兼容版本的获得最后一个子标签节点的函数
   * @param ele
   * @returns {*}
   */
  function getLastElement(ele){
    // 能力检测
    if(ele){
      if(ele.lastElementChild){
        return ele.lastElementChild;
      }else {
        ele = ele.lastChild;//先用各浏览器支持的这个属性获得一下第一个子节点
        while(ele.nodeType!=1){
          ele= ele.previousSibling;
        }
        return ele;
      }
    }
  }
</script>

/*设置节点*/

//克隆节点
//cloneNode(true)  深度克隆，里面的内容也克隆
//cloneNode(false)  只克隆标签,里面的内容不克隆

//追加节点
//appendChild()

//插入节点
//Node.insertBefore(li4,lis[1])  

//替换节点
//Node.replaceChild(li4,lis[1])

//移除节点
//Node.removeChild(li4)

消息框

/*alert警告框 confirm确认框 prompt显示可提示用户进行输入的对话框*/

控制台

//console.log(123)

BOM

浏览器对象模型

/*window对象*/
//一切定义在全局作用域内变量或是函数，都是window下的属性和方法

/*方法*/

//window.open(url,target,param)
//url 网络地址 http//www.baidu.com
//target  窗口打开方式  _blank新窗口  _self当前窗口

//window.close()  关闭新打开页面

//location
//window.location.href ="http://www.baidu.com"
//window.location.reload();  重新加载
//window.onload  页面加载完之后才会执行

//history
//window.history.forward();  后退

定时器

/*setTimeout()间隔时间之后只执行一次 setInterval()间隔时间之后无限循环*/

//setTimeout()
function index(){
  console.log(123);
}
index() //时间长的话可以先运行一次
var timeSetTimeout = setTimeout(index,1000);  //时间到1s后就执行了
clearTimeout(timeSetTimeout);

//setInterval()
function abc(){
  console.log(456);
}
abc()  //时间长的话可以先运行一次
var timeSetInterval = setInterval(abc,1000);
clearInterval(timeSetInterval)

预解析

//在执行代码之前，会将所有的js代码都扫描一遍，是将变量的声明，函数的声明，提升到当前作用域的最前面，而变量的赋值还是在原位置

//局部两种中没有var声明会变成全局变量

var a=b=c=9;
//类似于var a=9, b=9 ,c=9

特效

offset

/*offsetWidth 获取元素宽度，只会获取整数，没有单位*/
//内嵌和行内都可以获取，不带“px”，边框以内的部分，margin不算，width+padding+border

/*offsetHeight 获取元素高度 与宽类似*/

/*offsetLeft 获取左边距离*/
//offsetLeft与父级元素的定位有关，如果有定位获取的是自己的边框到最近的定位的父级元素之间的距离，如果父级元素没有定位，则默认是以页面或是body为准，以border左上角为准

/*style.left 设置左边距离(子绝父相)，需要配合position*/

/*offsetTop 获取顶部距离*/

/*offsetParent 获取自己最近的具有定位的父元素，没有以body为准*/

/*parentNode 获取父元素*/

scroll

/*scrollWidth 获取元素宽度*/
//width+padding ，不包括滚动条和边框

/*scrollHeight 获取元素高度*/
//height+padding+内容超出部分

/*scrollTop 滑轮滑动页面上面减去的距离，也就是卷进去的距离*/

/*scrollLeft 左边减去的距离*/

client

/*可视区，浏览器可看到的，只针对浏览器可视区*/

/*clientWidth 获取元素在可视区的宽度*/

/*clientHeight 获取元素在可视区的高度*/

/*clientWidth和clientHeight有兼容性*/

/*clientLeft 左边框的宽度*/

/*clientTop 上边框的宽度*/

/*获取可视区宽度数值*/
//window.innerWidth
//document.documentElement.clientEidth
//document.body.clientWidth

/*onscroll 滚动触发事件*/

事件对象

/*三个坐标 screen对象距离屏幕的距离圆点是左上角 client在浏览器中的可视区域圆点是左上角 page页面的距离*/

//screen  对象距离屏幕的距离圆点是左上角
//e.screenX  e.screenY

//client  在浏览器中的可视区域圆点是左上角
//e.clientX  e.clientY

//page 页面的距离 在IE8不兼容
//e.pageX  e.pageY

//只要事件被触发，系统会给我们一个默认事件对象
//高级浏览器将事件对象存在函数形参当中
//IE8存在window.event中

window事件

/*window.onload  页面加载玩*/

/*window.scroll  当页面滚动的时候*/

/*window.onresize  可视区页面大小改变的时候，会触发的事件*/

document下的一些标签

/*document.body  body标签*/

/*document.head  head标签*/

/*document.title  标题内容*/

/*document.html  获取的是标签间的文本内容*/

/*document.documentElement  documentElement就是页面中的html标签*/

阻止是哪一个设备

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
    try{
        if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
            //手机访问
            location.href="http://www.hhlme.com/wap";
        }else if(/iPad/i.test(navigator.userAgent)){
            //ipad访问
        }else{
            //其他设备访问
        }
    }catch(e){}
}

PC到移动端等比例缩放

<meta name="viewport" content="width=1400>

window对象

/*返回上一步*/
window.history.go(-1);  //返回上一页
window.history.back();  //返回上一页

/*返回上一步并刷新页面*/
window.location.go(-1);

获取url的参数

比如url是http://localhost:9527/tpls/good-productList.html?cat_id=18

封装一个函数 getUrlParam

function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}

在调用这个函数

var productList_url = getUrlParam("cat_id");
console.log(productList_url)；//18

JavaScript总结

03-JavaScript

简单数据类型

string字符串

number数字类型

boolean布尔值

undefined未定义

null空

复杂数据类型

array数组

数组重组

清空数组

检测数据类型

遍历数组

插入元素

删除数组元素

连接数组元素

查找数组元素

排序数组元素

数组转化为字符串

选定数组元素

object对象

通过字面量方式创建

通过构造函数创建

通过object方式创建

通过object.create方式创建

遍历对象

function函数

Date事件对象

Regexp正则表达式

json对象

事件

变量

数据类型转换

number数字类型

Number()

ParseInt()会转化成整数，忽略后面的小数点

parseFloat()浮点数

toFixed() Number 四舍五入为指定小数位数的数字

string字符串类型

boolean布尔值

算术运算符

赋值运算符

一元运算符

关系运算符

逻辑运算符

三元运算符

Math对象方法

控制判断语句

循环

类名操作

this

文本内容

arguments

表单相关

属性相关

DOM

获取对象元素

动态创建元素

显示隐藏元素

节点

消息框

控制台

BOM

定时器

预解析

特效

offset

scroll

client

事件对象

window事件

document下的一些标签

阻止是哪一个设备

PC到移动端等比例缩放

window对象

获取url的参数

“相关推荐”对你有帮助么？