目录
目录
innerHTML ,innerText,textContent对比
encodeURI 与 encodeURIComponent 与 escape转义
encodeURIComponent 与 decodeURIComponent
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") = "中国"