一周掌握js基本知识2

学习目标： 一周掌握js基本知识 学习内容：掌握js内置对象的使用，了解常用方法 小剧场

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

---

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

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

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

1.2 提取部分字符串

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

slice(start, end)substring(start, end)substr(start, length) 1.3 替换字符串内容

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

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

1.4 转换大小写 toUpperCase( )把字符串转换为大写toLowerCase( )把字符串转换为小写 1.5 连接字符串

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

1.5 把字符串转换为数组

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

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

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

let header = "Templates";
    let tags = ["js","es6"];
// 定义一个变量来接收我们需要写入的东西
    let html = `${header}`;
// li使用循环写入
    for (const x of tags){
        html += `${x}`;
    }
    html += ``;
    // 通过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 + "
" +
  cars[1].type + " " + cars[1].year + "
" +
  cars[2].type + " " + cars[2].year;
}
</script>

三、JS Web API

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

可以直接访问到地理坐标（获得经纬度）可以判断表单填入的数据是否合法 四、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="艺术家曲目";
        var x = xmlDoc.getElementsByTagName("TRACK");
        for (i = 0; i <x.length;  i++) {
            table += "" +
                x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue  +
                "" +
                x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue  +
                "";
        }
        document.getElementById("demo").innerHTML = table;
    }

4.3 ajax和dom树相结合

js *** 作dom树用到的属性

parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSiblingnodeValue 代表取得当前属性的值 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 选择器 id选择器 $(“#id”)类选择器 $(“.class”)标签选择器 $(“p”)css选择器 $(“p.intro”)：返回包含 class=“intro” 的所有

元素的列表

6.2 简化 *** 作

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

var myElement.html("
Hello World
");

var myElement.innerHTML = "
Hello World
";

6.3 简化css *** 作 隐藏html元素

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

显示html元素

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

更改html元素的css样式

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