原生 知识点(个人记忆)
2019-01-30 本文已影响0人
初入前端的小菜鸟
- Object.assign()
=> MDN
Object.assign() //方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
------------
let obj1 = {
a: 1,
b: 2,
c: 3
}
let obj2 = Object.assign({ d: 4, e: 5 }, obj1)
console.log(obj2.d) //4
- String.trim()
=> MDN
String.prototype.trim() //方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）
-----------------------------
var orig = ' foo ';
console.log(orig.trim()); // 'foo'
- 获取select下拉选择框的option中的value
<select name="types" class="form-control required" style="width: 200px; border-radius: 5px;">
<option value="disabled selected hidden">请选择</option>
//如果为form 表单提交 应该删除disabled， 它会阻止默认选项的value值传递
<option value="1">分公司</option>
<option value="2">代理商</option>
<option value="3">客户</option>
</select>
</form>
<button class="a">获取</button>
<script>
$('.a').on('click',function() {
var options=$(".required > option:selected")
console.log(options.val())
})
</script>
- 字符串转变为number
var a = '123'
parseInd(a) // number 123
- 手机号正则
function checkPhone(){
var phone = document.getElementById('phone').value;
if(!(/^1[34578]\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
return false;
}
}
- 正则匹配 0～1 之间的小数(包含0和1)
var re=/^(1|0(\.\d{1})?)$/
- 取消input type=“text” 的搜索记录
autocomplete="off"
- 截取字符串 substring()
var a = "350100"
a.substring(3,6) // 从下标3到下标6 100
- select option 下拉列表，页面刷新依旧为之前选择的值
原文章地址：https://blog.csdn.net/ONEDAY_789/article/details/79961968
html:
<body onload="selectIndex();">
<form action="history.php" method="post">
<select style='width:10%;height:20%;' class='form-control' name='searchtitle' onchange='getTitleData()' type='text' id='searchtitle'>
<option value='2'>运营32位测试数据</option>
<option value='3'>运营64位测试数据</option>
<option value='4'>主干32位测试数据</option>
<option value='5'>集成32位测试数据</option>
<option value='6'>集成64位测试数据</option>
<option value='8'>主干64位测试数据</option>
</select><br>
</form>
</body>
js:
getTitleData=function(){
var searchtitle = $("#searchtitle").val();
var searchtitle = $.trim(searchtitle);
window.location = 'history.php?id=' + searchtitle;
document.cookie = "id=" + searchtitle; //将select选中的value写入cookie中
};
selectIndex=function(){
var id = 0;
var coosStr = document.cookie; //获取cookie中的数据
var coos=coosStr.split("; "); //多个值之间用; 分隔
for(var i=0;i<coos.length;i++){ //获取select写入的id
var coo=coos[i].split("=");
if("id"==coo[0]){
id=coo[1];
}
}
var stitle=document.getElementById("searchtitle");
if(stitle == 0){
stitle.selectedIndex = 0;
}
else{ //如果从cookie中获取的id和select中的一致则设为默认状态
var len = stitle.options.length;
for(var i=0;i<len;i++){
if(stitle.options[i].value == id){
stitle.selectedIndex=i;
break;
}
}
}
}
- input type=checkbox ,传递 0，1状态码。
<!-- 添加一个input 当checkbox 为true时会覆盖此值。 为false时 则使用此值。为什么使用呢。因为checkbox为false时不传值 -->
<input name="status" type="hidden" value="1" id="public">
<input type="checkbox" name="status" class="onoffswitch-checkbox" id="example7" checked>
- jQuery 遍历 - siblings() 方法
- 自己的用途， 监听ul下li点击事件，为其添加背景颜色
$('.xxx').on('click', 'li', function() {
$(this).siblings('li').removeClass('active') //先删除所有li元素的的点击的时的背景颜色
$(this).addClass('active') //给当前 li 添加背景颜色
})
- Object.keys(obj)
- 参数 obj要返回其枚举自身属性的对象。
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
- Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组
-
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用
for...in循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）
const object1 = { foo: 'bar', baz: '42' };
Object.entries(object1) // [['foo', 'bar'],['baz', '42']]
const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(object2)[2]);
// expected output: Array ["2", "c"]
- Array.every() 方法测试数组的所有元素是否都通过了指定函数的测试。
- 符合返回true, 有一项不符合返回false
function isBelowThreshold(currentValue) {
return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
-------------
var array1 = [1, 30, 39, 29, 10, 13];
function Maxnumber (Max) { return Max > 50}
array1.every(Maxnumber)
// expected output: false
- insertAdajcentHTML
-
原型：
insertAdajcentHTML(swhere,stext) -
insertAdjacentHTML方法：在指定的地方插入html标签语句
参数： -
swhere: 指定插入html标签语句的地方，有四种值可用：
beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后
// 使用方法 示例
append(songs) {
let html = songs.map(song => {
let artist = song.singer.map(s => s.name).join(' ')
return `
<a class="song-item" href="#player?artist=${artist}&songid=${song.songid}&songname=${song.songname}&albummid=${song.albummid}&duration=${song.interval}&songmid=${song.songmid}">
<i class="icon icon-music"></i>
<div class="song-name ellipsis">${song.songname}</div>
<div class="song-artist ellipsis">${artist}</div>
</a>`}).join('')
this.$songs.insertAdjacentHTML('beforeend', html)
}
- abort()
如果该请求已被发出，XMLHttpRequest.abort()方法将终止该请求。当一个请求被终止，它的 readyState 属性将被置为0（ UNSENT )。
// MDN
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method,url,true);
xhr.send();
xhr.abort();
- indexOf()
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
本人应用。表格根据数据返回的尺码组将其渲染到相对应的尺码组位置中。
获取要渲染的尺码组大小。 通过尺码组.indexof('尺码大小') 来确定其位置(不=-1)。将其渲染到相应位置即可。
(详细示例晚上更新之本人github博客中，到时赋值上链接)
