一周掌握js基本知识2

学习目标：

一周掌握js基本知识

学习内容：掌握js内置对象的使用，了解常用方法

小剧场

写本篇博客之前总结一下今天做了什么
①上午看了如何使用bootstrap来直接写布局，看了个大概。缺点就是bootstrap样式可能就那么几个、不够灵活。
②在github上找vue开源项目、但是在本地不会部署…猜测是npm、或者node版本不对应，不会改、然后发现layui组件比bootstrap组件要好看、好用。
③感觉今天做的就是在不断试错、不断地在寻找何种方式是适合自己的，虽然一直在学习，但是能看到的进步确实小，最后感觉在自己尝试写前端界面的时候可以先在github上找到好看的界面源码、然后直接copy过来自己用哈哈哈哈。

---

一、字符串

1.1 查找字符串

1. indexOf（ ）返回字符串指定文本首次出现的位置
2. lastIndexOf( ) 返回字符串指定文本最后一次出现的位置
3. search（ ）方法搜索特定值的字符串，并返回匹配的位置
   `两种方法，indexOf() 与 search()，是相等的。

这两种方法是不相等的。区别在于：

search() 方法无法设置第二个开始位置参数。 indexOf() 方法无法设置更强大的搜索值（正则表达式）。

1.2 提取部分字符串

有三种提取部分字符串的方法：

1. slice(start, end)
2. substring(start, end)
3. substr(start, length)

1.3 替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值：

str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");

1.4 转换大小写

1. toUpperCase( )把字符串转换为大写
2. toLowerCase( )把字符串转换为小写

1.5 连接字符串

concat() 连接两个或多个字符串：
String.trim()方法删除字符串两端的空白符

1.5 把字符串转换为数组

可以通过 split() 将字符串转换为数组

1.6 js将数组直接输入到html中

我们先定义一个字符串、然后进行字符串的拼接，以ol、li为例

let header = "Templates";
    let tags = ["js","es6"];
// 定义一个变量来接收我们需要写入的东西
    let html = `<h2>${header}</h2><ul>`;
// li使用循环写入
    for (const x of tags){
        html += `<li>${x}</li>`;
    }
    html += `</<ul>`;
    // 通过dom树写入
    document.getElementById("demo").innerHTML = html;

二、对象数组

js中会对数组对象进行排序，这时我们就可以使用.sort( )方法对数组对象进行排序，如把学生按照年龄排序

<h1>JavaScript 数组排序</h1>

<p>点击按钮按年份对汽车进行排序：</p>

<button onclick="myFunction()">排序</button>

<p id="demo"></p>

<script>
var cars = [
  {type:"BMW", year:2017},
  {type:"Audi", year:2019},
  {type:"porsche", year:2018}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){return a.year - b.year});
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

三、JS Web API

JS Web API给我们提供了一些可以使用某些功能的途径

1. 可以直接访问到地理坐标（获得经纬度）
2. 可以判断表单填入的数据是否合法

四、JS AJAX

AJAX就是在不刷新页面的情况下更新网页

4.1 ajax实例

function loadDoc() {
        // 创建新的XMLHttpRequest对象
        var xhttp = new XMLHttpRequest();
        // onreadystatechange:定义当readyState属性发生变化时被调用的函数
        xhttp.onreadystatechange = function() {
//             readyState：保存 XMLHttpRequest 的状态。
//             0：请求未初始化
//             1：服务器连接已建立
//             2：请求已收到
//             3：正在处理请求
//             4：请求已完成且响应已就绪
//             status
            // 返回请求的状态号：200: "OK"  403: "Forbidden" 404: "Not Found"
            if (this.readyState == 4 && this.status == 200) {
                // responseText	以字符串返回响应数据
                // responseXML	以 XML 数据返回响应数据
                document.getElementById("demo").innerHTML = this.responseText;
            }
        };
//         open方法规定请求的格式：open(method, url, async, user, psw)
//         method：请求类型 GET 或 POST
//         url：文件位置
//         async：true（异步）或 false（同步）
//         user：可选的用户名称
//         psw：可选的密码
        xhttp.open("GET", "ajax_info.txt", true);
        // send() 用于将请求发送到服务器，用于GET请求、
        // send(string) 将请求发送到服务器、用于POST请求
        xhttp.send();
    }

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

4.2 ajax读取xml

     function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState  == 4 && this.status == 200) {
            //这里的this指的是xhttp
                myFunction(this);
            }
        };
        xhttp.open("GET", "music_list.xml", true);
        xhttp.send();
    }
    function myFunction(xml) {
        var i;
        var xmlDoc = xml.responseXML;
        var table="<tr><th>艺术家</th><th>曲目</th></tr>";
        var x = xmlDoc.getElementsByTagName("TRACK");
        for (i = 0; i <x.length;  i++) {
            table += "<tr><td>" +
                x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue  +
                "</td><td>" +
                x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue  +
                "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
    }

4.3 ajax和dom树相结合

js操作dom树用到的属性

1. parentNode
2. childNodes[nodenumber]
3. firstChild
4. lastChild
5. nextSibling
6. previousSibling
7. nodeValue 代表取得当前属性的值

4.4 ajax小结

ajax并不复杂、ajax就是在不刷新网页的前提下来进行数据交互。掌握ajax的步骤就会掌握ajax、需要注意的是用到了回调函数，回调函数到底是什么呢？
ajax请求的步骤：首先创建对象、然后看其状态是否请求成功、然后像浏览器通过open（）规定请求的格式、send（）发送请求。

4.5 回调函数、this关键字

五、JS JSON

JSON.parse( )：会把json数据转换为JavaScript对象
JSON.stringify( ):把JavaScript对象转换为json字符串
放置json数据然后可以通过异步请求ajax访问
在对衍生自数组的 JSON 使用 JSON.parse() 后，此方法将返回 JavaScript 数组，而不是 JavaScript 对象。

六、jquery

6.1 选择器

1. id选择器 $(“#id”)
2. 类选择器 $(“.class”)
3. 标签选择器 $(“p”)
4. css选择器 $(“p.intro”)：返回包含 class=“intro” 的所有

   元素的列表

6.2 简化操作

之前JavaScript中的innerHTML、innerText直接变为

var myElement.html("<p>Hello World</p>");

var myElement.innerHTML = "<p>Hello World</p>";

6.3 简化css操作

1. 隐藏html元素

myElement.hide();
myElement.style.display = "none";

2. 显示html元素

myElement.show();
myElement.style.display = "";

3. 更改html元素的css样式

myElement.css("font-size","35px");
myElement.style.fontSize = "35px";