天天看点
返回

2019年12月前端工作实战整理

目录

目录

目录

js常见的排序方法

冒泡排序

选择排序

插入排序

前段常见的循环方法

for 循环

while 循环

Do-while 循环

Jquery $.each() 循环 

两个关键字：  break, continue

 innerHTML ，innerText，textContent对比

innerHTML 

innerText

textContent

区别整理 

innerText/textContent的用法总结：

innerHTML用法的总结：

设置，获取，删除属性

setAttribute()

getAttribute()

removeAttribute()

文件上传

单选文件

批量上传

encodeURI 与 encodeURIComponent 与 escape转义

encodeURI与decodeURI

encodeURIComponent 与 decodeURIComponent

escape 与 unescape

js常见的排序方法

冒泡排序

冒泡排序作为最常见的排序方法，就是每次比较相邻两个数字的大小，将最大的放在后面，依次类推，最后面一个就是最大的。然后依次往前排序。

var arrayOne = [5, 8, 6, 4, 3, 1, 2, 9, 7];
    console.log(arrayOne);
    var templateVal = "";
    // 冒泡排序就是将一组数组进行从小到大或是从大到小的排列方式。
    for (var i = 0; i < arrayOne.length; i++) {
        for (var j = i + 1; j < arrayOne.length; j++) {
            if (arrayOne[i] > arrayOne[j]) {
                templateVal = arrayOne[i];
                arrayOne[i] = arrayOne[j];
                arrayOne[j] = templateVal;
            }
        }
    }
    console.log(arrayOne);

选择排序

选择排序就是每次循环对比选择一个最小值，然后将最小值依次排列即可得到新的排列好的数组；

// 选择排序
    var arrayOne = [5, 8, 6, 4, 3, 1, 2, 9, 7];
    console.log(arrayOne);
    var templateindex = "";
    var templateVal = "";
    for (var i = 0; i < arrayOne.length; i++) {
        templateindex = i;
        for (var j = i + 1; j < arrayOne.length; j++) {
            if (arrayOne[j] < arrayOne[templateindex]) {
                templateindex = j;
            }
        }
        if (templateindex != i) {
            templateVal = arrayOne[templateindex];
            arrayOne[templateindex] = arrayOne[i];
            arrayOne[i] = templateVal;
        }

    }
    console.log(arrayOne);

插入排序

插入排序是从第二位数开始与之前的所有数字从第一位进行比较，如果当前数小于对比的书；就拿当前数放在该数之前；

// 插入排序
    var arrayOne = [5, 8, 6, 4, 3, 1, 2, 9, 7];
    console.log(arrayOne);
    var templateindex = "";
    var templateVal = "";
    for (var i = 1; i < arrayOne.length; i++) {
        for (var j = 0; j < i; j++) {
            if (arrayOne[i] < arrayOne[j]) {
                templateVal = arrayOne[i];
                arrayOne[i] = arrayOne[j];
                arrayOne[j] = templateVal;
            }
        }
    }
    console.log(arrayOne);

前段常见的循环方法

for 循环 

var arrayOne = [5, 8, 6, 4, 3, 1, 2, 9, 7];
    for (var i = 0; i < arrayOne.length; i++) {
        console.log("当前的索引为：" + i);
        console.log("当前索引的值为：" + arrayOne[i]);
    }

while 循环

只要判断条件为 true ，程序就会一直执行；

var text = "";
    var a = 0;
    while (a < 10) {
        text = "目前a的值为" + a
        console.log(text);
        a++;
    }

Do-while 循环

注意：与while不同的是,do while先不进行判断,直接先将循环体中的代码执行一遍,然后根据while中的条件的返回值判断,如果符合条件,则再一次运行循环体,如果不符合,则执行do while外面的代码

var text = "";
    var a = 0;
    do {
        text = "目前的值为" + a
        console.log(text);
        a++;
    } while (a < 10);

Jquery $.each() 循环  

var arr1 = ['aa', 'bb', 'cc', 'dd'];
    $.each(arr1, function(i, val) {
        console.log("当前的索引为：" + i);
        console.log("当前索引的值为：" + val);
    })

两个关键字：  break, continue

Break的用法：

   1.   用于跳出switch-case 语法结构

   2.   用于跳出循环，break后面的代码不再执行

Continue: 

  用于结束本次循环，回到判断条件处，判断循环条件是否成立，如果成立，再进行下一次循环，如果条件不成立，再跳出当前循环，continue后面的代码也不会执行。

 innerHTML ，innerText，textContent对比

  • innerHTML 

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法： HTMLElementObject.innerHTML=text

<body>
    <div>
        <span>
            <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
            <div>倚天不出，谁与争锋；</div>
        </span>
        <br>
        <input type="button" value="点击html" onclick="htmlGetClick()">
        <input type="button" value="设置html" onclick="htmlSetClick()">
    </div>
</body>
</html>
<script>
    var spanArr = document.getElementsByTagName("span")
    function htmlGetClick(){
        var inHtml = spanArr[0].innerHTML;
        console.log(inHtml); 

        // <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
        // <div>倚天不出，谁与争锋；</div>
    }
    function htmlSetClick(){
        spanArr[0].innerHTML = "人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神";

        // 人间绝品应难识，闲对茶经忆友人
        // 一杯永日醒双眼，草木英华信有神
    }
</script>

  • innerText

var renderedText = HTMLElement.innerText;

HTMLElement.innerText = string;

<body>
    <div>
        <span>
            <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
            <div>倚天不出，谁与争锋；</div>
        </span>
        <br>
        <input type="button" value="点击text" onclick="textGetClick()">
        <input type="button" value="设置text" onclick="textSetClick()">
    </div>
</body>
</html>
<script>
    var spanArr = document.getElementsByTagName("span")

    function textGetClick(){
        var inText = spanArr[0].innerText;
        console.log(inText); 

        // 武林至尊，宝刀屠龙，号令天下，谁敢不从！
        // 倚天不出，谁与争锋；
    }
    function textSetClick(){
        spanArr[0].innerText = "人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神";

        //人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神
    }
</script>

  • textContent

textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。

如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。

提示：有时，此属性可用于取代 nodeValue 属性，但是请记住此属性同时会返回所有子节点的文本。

<body>
    <div>
        <span>
            <span> 武林至尊，宝刀屠龙，号令天下，谁敢不从！</span>
            <div>倚天不出，谁与争锋；</div>
        </span>
        <br>
        <input type="button" value="点击content" onclick="contentGetClick()">
        <input type="button" value="设置content" onclick="contentSetClick()">
    </div>
</body>
</html>
<script>
    var spanArr = document.getElementsByTagName("span")

    function contentGetClick(){
        var inText = spanArr[0].textContent;
        console.log(inText); 
        
        // 武林至尊，宝刀屠龙，号令天下，谁敢不从！
        // 倚天不出，谁与争锋；
    }
    function contentSetClick(){
        spanArr[0].textContent = "人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神";
        
        // 人间绝品应难识，闲对茶经忆友人<br>一杯永日醒双眼，草木英华信有神
    }
</script>

区别整理 

  •     innerText与textContent效果相同，可以设置文本的,标签内容,是没有标签的效果的；
  •     innerHTML可以设置标签内容，且标签保护效果；
  •     innerText与textContent效果相同，可以获取标签内容,且可以获取标签内容中的标签；
  •     innerHTML才是真正的获取标签中间的所有内容

innerText/textContent的用法总结：

  •  innerText可以获取标签间的内容，如果标签间只有文本的话，则是直接获取，如果标签间还有嵌套标签的话，则会将嵌套标签忽略掉
  • 在给标签设置内容的时候，如果是纯文本内容的话，则直接设置，如果设置的内容里面，有标签的话，则会将标签进行转义
  • innerText是低版本的火狐浏览器不支持,高版本的火狐浏览器，两个属性都支持，而IE8及之前的浏览器只支持 innerText不支持textContent

innerHTML用法的总结：

  • 使用innerHTML来获取标签间内容的时候，如果标签间是纯文本内容的话，则是直接获取，如果标签间间有嵌套标签的话，则会将标签一并获取
  • 给标签设置内容的时候，如果设置的内容是纯文本的话，则是直接设置，如果设置的内容里面，有嵌套标签的话，则会将标签在浏览器中渲染出来
  • 没有兼容性的问题  各浏览器都支持

设置，获取，删除属性

  • setAttribute()

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

  • getAttribute()

getAttribute() 方法返回指定属性名的属性值。

  • removeAttribute()

removeAttribute() 方法删除指定的属性。

<body>
    <div>
        <input value="3652">
        <input type="button" onClick="setClick()" value="点击设置">
        <input type="button" onClick="getClick()" value="点击查询">
        <input type="button" onClick="deleteClick()" value="点击删除">
    </div>
</body>
</html>
<script>
    var input = document.getElementsByTagName("input")[0];

    // setAttribute 设置input的type为file
    function setClick(){
        input.setAttribute("type","file")
    }

    // getAttribute 输出input的type
    function getClick(){
        console.log(input.getAttribute("type"));
    }

    //removeAttribute 删除input的value值
    function deleteClick(){
        input.removeAttribute("value")
    }
</script>

文件上传

  • 利用 input 标签设置 type="file" 打开本地的资源管理器；
  • input 标签的 accept 属性可以设置上传什么类型的文件；accept 属性并不会验证选中文件的类型. 他只是为开发这提供了一种引导用户做出期望行为的方式而已, 用户还是有办法绕过浏览器的限制.
  • input file 标签一般对应着一个上传文件；
  • input 标签的 multiple 属性设置该字段可接受多个上传文件；
  • input 选择完文件后标签的 target.files 中存在当前选中的文件内容（信息），此时也可以进行判断上传文件类型及上传文件大小等；

批量上传：每个按钮只选择一个文件渲染到上传列表再进行批量上传

单选文件

1. 创建input file按钮，弹窗选择文件；

2. 选择文件后拿到文件名追加到上传文件列表；

3. 在创建一个新的 input file按钮，隐藏之前的已存储文件的按钮；

4. 把隐藏的input数据放入内存要上传的数据列表list中

批量上传

1. new 一个formData 

2. 构建文件表数组，放入fornData 的 batchUploadEdocReq 中

3. 通过上传列表找到所有上传信息

4. 遍历 input file ,把他们的file[0]放入formData 的fileList中

5. 发送 ajax 请求，把 formData 放入到 data 中

6. 注意设置： contartType = false; processData = false;

```

        this.accompanyingDecumAjaxObj = {

            decId : this.id,

            edocList : this.List

        }

        var formData = new FormData();

        formData.append('batchUploadEdocReq',JSON.stringify(this.accompanyingDecumAjaxObj))

        for(let i=0; i< this.imputFileListInfo.length; i++){

            formData.append('fileList',this.imputFileListInfo[i][0]);

        }

        var _this = this;

        var ajaxUrl = "URL";

        $.ajax({

            type : "POST",

            url : ajaxUrl,

            data : formData,

            cache : false,

            timeout: 120000,

            contentType : false,

            processData : false,

            success : function(data) {

            },

            error : function(data) {

            }

            });

        }

```

encodeURI 与 encodeURIComponent 与 escape转义

encodeURI与decodeURI

encodeURI("中国") = "%E4%B8%AD%E5%9B%BD"

decodeURI("%E4%B8%AD%E5%9B%BD") = "中国"

encodeURIComponent 与 decodeURIComponent

encodeURIComponent("中国") = "%E4%B8%AD%E5%9B%BD"

decodeURIComponent("%E4%B8%AD%E5%9B%BD") = "中国"

escape 与 unescape

escape("中国") = "%u4E2D%u56FD"

unescape("%u4E2D%u56FD") = "中国"

每周学习 web前端基础 冒泡排序 循环方法 设置属性 批量上传 url转义
上一篇: 信息学奥赛真题解析（美国信息学回文数）
下一篇: Ajax实现异步请求

继续阅读