关于JavaScript的操作

一：js基础。

1. var是定义js变量的关键字。

如： var leng=5;定义一个变量为5
      var length = 16;                                  // Number 通过数字字面量赋值
      var points = x * 10;                              // Number 通过表达式字面量赋值
      var lastName = "Johnson";                         // String 通过字符串字面量赋值
      var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
      var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值 

2. innerHTML和innerText修改标签的文本内容

// 获取元素赋值给变量
// 声明符  变量   访问作用   获取ID名为text的元素
var  Text = document.getElementById('text');
// 打印纯文本信息，会把标签过滤掉  复给str
var str = Text.innerText;
// 打印信息
console.log(str)
// 更改文本信息
Text.innerText='哈哈'

  // innerHTML 打印，包括标签和文本信息a
var str1 = Text.innerHTML;
// 打印信息
console.log(str1)
// 更改信息
Text.innerHTML = '轩辕'

<script>
document.getElementById("image").src="landscape.jpg";
</script>

3. js的样式操作。

var box = document.getElementById('box');
     box.style.width = "200px";
     box.style.height = "120px";
     box.style.marginTop = "20px";
     box.style.marginLeft = "auto";

4.js的属性操作。

           // 操作标签属性
           var box = document.getElementById('box');
           alert(box.id);
           // 修改ID
           box.id = "add";
           alert(box.className);
           // 修改class
           box.className = 'a';
           // setAttribute在这里是设置的意思
           box.setAttribute('hello','晚上好');
           // 修改标签属性值

5.三方块相互切换。

<div>
   <p></p>
   <p></p>
   <p></p>
</div>
<script>
   var op = document.getElementsByTagName('p');
   op[0].onclick = function () {
       this.innerHTML = '终是悟空成了佛';
       op[1].innerHTML = '负了紫霞入了魔';
       op[2].innerHTML = '终是貂蝉白了头'
   }
   op[1].onclick = function () {
       this.innerHTML = '终是世隐算天地';
       op[0].innerHTML = '却未算中命无你';
       op[2].innerHTML = '终是大乔归了海';
   }
   op[2].onclick = function () {
       this.innerHTML = '终是霸王入深渊';
       op[0].innerHTML = '虞姬含泪望着天';
       op[1].innerHTML = '终是木兰弃了剑'
   }
</script>

6.留言板，示例：

<div id="box">你好</div>
<div id="btn"></div>
<button onclick="show()">按钮</button>

<script>
   function show() {

       var box = document.getElementById("box");
       var btn = document.getElementById("btn");
       btn.innerHTML = box.innerHTML
       box.innerHTML = " ";
   }
</script>

7.  switch 的使用：

          var numoff = 2;
          switch (numoff){
              case 1:
                  document.write('');
              case 2:
                  document.write('两');
              case 3:
                  document.write('');
              case 4:
                  document.write('');
              default :
                  document.write('都不对');

8.　　#返回传入的数据　　match

9.　　document.write() 方法将内容写入HTML 文档。

10.　 try的使用：

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

11.　　this的使用

js中的this表示当前：
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

12.　　let的使用

js中let生明变量，在局内声明，局外不受影响
var x = 10;
// 这里输出 x 为 10
{
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

二：js事件处理。

1. 基础事件。

onclick   单击事件　　　　ondblclick   双击事件　　　　

onmouseenter   鼠标划入　　　　onmouseleave   鼠标划出　　　　

onresize   窗口变化　　　　onchange   改变下拉框

2. 计时事件。

setTimeout　　设置定时器　　　　clearTimeout　　清除定时器

setInterval　　设置定时器　　　　 clearInterval　　 清楚定时器

setTimeout(function () {
    console.log(1);
},2000); // 1000毫秒 = 1s

//  格式： setTimeout（函数，时间）；

简易格式：
function fn() {
    console.log(3);
}
setTimeout(fn,2000);

//显示一个时钟
setInterval(function(){myTimer()},1000);
function myTimer(){
      var d=new Date();
      var t=d.toLocaleTimeString();
      document.getElementById("demo").innerHTML=d;
   }
myTimer()

　　//  清除计时器
    <div id="box">
        <p> 还有<span id="timer">5s</span>就开始！ </p>
    </div>

    <script>
        var oTime = document.getElementById('timer');
        var num = 5;
        var time;
        time = setInterval(function () {
            num --;   //  逐渐往下减
            oTime.innerHTML = num +'s'; //打印
            if(num === 1){
                clearInterval(time);
                // clearTimeout(time), 前面用哪个定时器后面就跟哪个，要一一对应
                window.location.href = 'http://www.baidu.com';
                //  去某个地方的固定写法
            }
        },1000);
    </script>

三：js函数操作。

1.

    1.函数可传参，调用
        <p id="demo"></p>
        <script>
        var x = function (a, b) {return a * b};
        document.getElementById("demo").innerHTML = x(4, 3);
    2.函数的调用
        <p id="demo"></p>
        <script>
        function myFunction(a, b) {
            return a * b;
        }
        document.getElementById("demo").innerHTML = myFunction(10, 2);
        </script>
    3.
        <p>函数可以访问函数内部定义的变量:</p>
        <button type="button" onclick="myFunction()">点我</button>
        <p id="demo"></p>
        <script>
        function myFunction() {
            var a = 4;
            document.getElementById("demo").innerHTML = a * a;
        }
        </script>
    4.函数可作为值调用但需要有retuen键
        <script>
        function myFunction(a, b) {
            return a * b;
        }
        var x = myFunction(4, 3);
        document.getElementById("demo").innerHTML = x;
        </script>

2. 有名函数与匿名函数

        // 匿名函数函数
        oBox1.onclick = function () {
            console.log(1);   // 点击会打印1
         };

        // 有名函数
        function fn() {
            console.log(1);  //  设置值，可以直接调用
        }
        oBox1.onclick = fn;  // 如果加括号会自动执行， 一般不用        

3.  js函数的定义方式：

1.函数名定义：
function myFunction()
{
    alert("Hello World!");   //一般用于事物触发调用，可以传参数
}
2.带有返回值的函数：
function myFunction()
{
    var x=5;
    return x;
}
3.在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}
如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

四：数据操作。

在 JavaScript 中有 5 种不同的数据类型：
    string
    number
    boolean
    object
    function
3 种对象类型：
    Object
    Date
    Array
2 个不包含任何值的数据类型：
    null
    undefined

1.  逻辑运算符：      &&（与）　　||（或）　　　　！（非）　　　　

　　优先级： 非》与》或

2.   “%” 取余　　“==”  判断是否相等　　“===”  判断值是否相等      “++”自增　　“--”自减　　！==  不绝对等于值喊类型有一个不相等，或两个都不相等

3.  js字符串方法。

字符串的属性
constructor     返回创建字符串属性的函数
length     返回字符串的长度
prototype     允许您向对象添加属性和方法

字符串方法
charAt()     返回指定索引位置的字符
charCodeAt()     返回指定索引位置字符的 Unicode 值
concat()     连接两个或多个字符串，返回连接后的字符串
fromCharCode()     将 Unicode 转换为字符串
indexOf()     返回字符串中检索指定字符第一次出现的位置
lastIndexOf()     返回字符串中检索指定字符最后一次出现的位置
localeCompare()     用本地特定的顺序来比较两个字符串
match()     找到一个或多个正则表达式的匹配
replace()     替换与正则表达式匹配的子串
search()     检索与正则表达式相匹配的值
slice()     提取字符串的片断，并在新的字符串中返回被提取的部分
split()     把字符串分割为子字符串数组
substr()     从起始索引号提取字符串中指定数目的字符
substring()     提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()     根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()     根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()     把字符串转换为小写
toString()     返回字符串对象值
toUpperCase()     把字符串转换为大写
trim()     移除字符串首尾空白
valueOf()     返回某个字符串对象的原始值

arr.join(分隔符)      以,连接

length  长度

字符串使用split()函数转为数组:
txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔

2. 数组操作。

reverse()　　定义：　　将数组中的元素颠倒顺序，返回逆序的字符串。　　注意：原数组被改变

sort()　　定义：将数组中的元素排序后返回排序后的数组、　　注意：数组以字母表顺序排。　　原数组被改变

concat()　　定义：创建并返回一个新数组。新数组由原数组和concat()里面的参数组成　　注意：不改变原数组

push()　　追加

Unshift()　　添加

pop()　　后删除

定义数组：
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");

3: 字面:
var myCars=["Saab","Volvo","BMW"];

数组方法和属性

使用数组对象预定义属性和方法：
var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

3. Math方法。

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。

五：js的循环操作：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

1. if 判断。

由于这个 if 语句只有一行代码，所以可以省略花括号：
for (i=0;i<10;i++)
{
    if (i==3) break;
    x=x + "The number is " + i + "<br>";
}

       // 控制流程，if   else  循环
        var obj = '对象';
        if(obj==='对象'){
            console.log('谁的'+obj);
        }
        else{
            console.log('陌影')
        }
        if(obj==='对'){
            console.log(obj+'是谁');
        }
        else if(obj==='对象'){
            console.log(obj+'可以');
        }
        else {
            console.log('都不是');
        }

        // 简化写法    正确打印，不正确不打印
        if(obj)console.log('陌影');

2. while 循环和for循环。

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

js中while循环也可以像for循环一样迭代数据：
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
    document.write(cars[i] + "<br>");
    i++;
}

六：js的时间操作。

toDateString()    把 Date 对象的日期部分转换为字符串。
toISOString()    使用 ISO 标准返回字符串的日期格式。
toJSON()    以 JSON 数据格式返回日期字符串。
toLocaleDateString()    根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()    根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()    据本地时间格式，把 Date 对象转换为字符串。
toString()    把 Date 对象转换为字符串。
toTimeString()    把 Date 对象的时间部分转换为字符串。
toUTCString()    根据世界时，把 Date 对象转换为字符串。
UTC()    根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

日期对象：

　　data.getFullYear();获取年

　　data.getMonth();获取月

　　data.getDate();获取日

　　date.getDay();获取周几

　　date.getHours();//返回小时部分

　　date.getMinutes();//返回分钟部分

　　date.getSeconds();//返回秒钟部分

　　date.getMilliseconds();//返回毫秒部分

　　date.getTime();//返回日期对象中的时间与1970年1月1日0时0分0秒所间隔的毫秒数

　　date.getTimezoneoffset();//返回日期对象中的时间与UTC之间的时差数，单位为秒。

获取当前时间：

var  data = new  Date( );

//获取月份，取值为0~11之间的整数，所以要得到正常月份。需要在后面”+1“。

//获取周，取值为0~6之间的整数，所以需要在后面”+1“。

七：js的Windows操作：

window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。

history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的

history forward() 方法加载历史列表中的下一个 URL。
这与在浏览器中点击前进按钮是相同的

window.navigator 对象包含有关访问者浏览器的信息。
window.navigator 对象在编写时可不使用 window 这个前缀。
例如：
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

警告框：
window.alert("sometext");

确认框：
window.confirm("sometext");
window.confirm() 方法可以不带上window对象，直接使用confirm()方法。
例如：
 var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
} 

提示框:
window.prompt("sometext","defaultvalue");
window.prompt() 方法可以不带上window对象，直接使用prompt()方法。
例如：
function myFunction(){
    var x;
    var person=prompt("请输入你的名字","Harry Potter");
    if (person!=null && person!=""){
        x="你好 " + person + "! 今天感觉如何?";
        document.getElementById("demo").innerHTML=x;
    }
}

window.location和document.location互相等价的，可以交换使用

location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有)，而且页面不会被重新加载

注意

URL：http://b.a.com:88/index.php?name=kang&how=#when=2011#first

search:	"?name=kang&how="	第一个"?"之后
hash:	"#when=2011#first"	第一个"#"之后的内容

方法

location.assign( url )

location.assign('http://www.baidu.com'); 等同于 window.location = 'http://www.baidu.com'
这种方式会讲新地址放到浏览器历史栈中，意味着转到新页面后“后退按钮”仍可以回到该页面。

location.replace( url )

与assign方法一样，但会从浏览器历史栈中删除本页面，也就是说跳转到新页面后“后退按钮”不能回到该页面。目前IE、Chrome只是简单的跳转，只有Firefox会删除本页面的历史记录。

location.reload( force )

重新载入当前页面。force为true时从服务器端重载；false则从浏览器缓存中重载，默认值false。

属性	含义	值
protocol:	协议	"http:"
hostname:	服务器的名字	"b.a.com"
port:	端口	"88"
pathname:	URL中主机名后的部分	"/index.php"
search:	"?"后的部分，又称为查询字符串	"?name=kang&when=2011"
hash:	返回"#"之后的内容	"#first"
host:	等于hostname + port	"b.a.com:88"
href:	返回当前页面的完整URL	"http://www.a.com:88/index.php?name=kang&when=2011#first"

js关于数组操作：

concat()    连接两个或更多的数组，并返回结果。

copyWithin()    从数组的指定位置拷贝元素到数组的另一个指定位置中。

entries()    返回数组的可迭代对象。

every()    检测数值元素的每个元素是否都符合条件。

fill()    使用一个固定值来填充数组。

filter()    检测数值元素，并返回符合条件所有元素的数组。

find()    返回符合传入测试（函数）条件的数组元素。

findIndex()    返回符合传入测试（函数）条件的数组元素索引。

forEach()    数组每个元素都执行一次回调函数。

from()    通过给定的对象中创建一个数组。

includes()    判断一个数组是否包含一个指定的值。

indexOf()    搜索数组中的元素，并返回它所在的位置。

isArray()    判断对象是否为数组。

join()    把数组的所有元素放入一个字符串。

keys()    返回数组的可迭代对象，包含原始数组的键(key)。

lastIndexOf()    返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map()    通过指定函数处理数组的每个元素，并返回处理后的数组。

pop()    删除数组的最后一个元素并返回删除的元素。

push()    向数组的末尾添加一个或更多元素，并返回新的长度。

reduce()    将数组元素计算为一个值（从左到右）。

reduceRight()    将数组元素计算为一个值（从右到左）。

reverse()    反转数组的元素顺序。

shift()    删除并返回数组的第一个元素。

slice()    选取数组的的一部分，并返回一个新数组。

some()    检测数组元素中是否有元素符合指定条件。

sort()    对数组的元素进行排序。

splice()    从数组中添加或删除元素。

toString()    把数组转换为字符串，并返回结果。

unshift()    向数组的开头添加一个或更多元素，并返回新的长度。

valueOf()    返回数组对象的原始值