JS随手记
typeof
parseInt
parseFloat
number
string
true false
NaN
null
undefined ?(false)
-------------string---
length
charAt(0)第一個(gè)字符
charAt(a.length-1) 最后字符
indexOf('字') ?第一次出現(xiàn)索引號
lastIndexOf('字') 最后出現(xiàn)索引號
subString(0,3) 截取字符串內(nèi)字符,開始，結(jié)束
前三個(gè)
replace('替換誰','新字');
split(',') ?用逗號分割成片段
例
var old='測試,數(shù)據(jù)';
var new = aa.split(','); 是數(shù)組
new[0];
--------------------array-------
var demo = []; ?(object)
demo.index ? ? ?0 start
demo = ['1','2','3'] ?element
demo.length
demo[0] = 'aaa';
demo.push('aaa'); ?最后+
demo.unshift('bbbb'); ?最前+
demo.pop() ? 返回刪除最后元素后的數(shù)組
demo.shift() ?返回刪除最前元素后的數(shù)組
delete demo[3] 刪除里面元素，不影響數(shù)組長度 返回true
demo.splice(3) 徹底刪除，影響長度
demo.concat(合并數(shù)組); 合并數(shù)組;
.filter() 去篩選符合條件的數(shù)據(jù),和 map的區(qū)別就是MAP是形成的新數(shù)組是原數(shù)組結(jié)構(gòu)的映射，不改變原數(shù)組結(jié)構(gòu)，而filter形成的新數(shù)組會改變原來的結(jié)構(gòu)
const data = [
?{ title: 'aa', rating: 9.7 },
?{ title: 'bb', rating: 9.9 },
{ title: 'cc', rating: 8.8 }
]
const res = data.filter( item => item.rating > 9 );
//定義一個(gè)篩選器 item可以隨便取名
-----數(shù)組的MAP方法
? /**
? ?* map()：創(chuàng)建一個(gè)新數(shù)組，這個(gè)新數(shù)組由原數(shù)組中的每個(gè)元素都調(diào)用一次提供的函數(shù)后的返回值組成。
? ?* 例子，當(dāng)前新的是accessCount 返回的是accessCount.action賦予新的
? ?*/
? const allowedActions = allowAccessCounts
? ? .map(accessCount => accessCount.action)
? ? .map(action => `'${action}'`)
? ? .join(',');
----
join方法用于把數(shù)組中的所有元素放入一個(gè)字符串，元素是通過指定的分隔符進(jìn)行分隔的。
分隔符（可選，如果未填寫，則默認(rèn)為逗號 “，”）
-----------------------if ----
&& ?|| ? ?else if
switch(aaa){
case 'aa':
alert();
break; ? //結(jié)束
default:
break;
}
while-----------------------
var i = 0;
while( i < 10 ){
?? ?i++;
? ?if(i % 2 ===0 ? //求余數(shù) ){
?? ?continue; // 跳過當(dāng)前循環(huán)進(jìn)行下一次循環(huán)
? ? }
? ?console.log(i);
}
for 循------------------------------
let week = ['zhou1','zhou2','zhou3'];
for (var i = 0; i<week.length; i++){
?? ?console.log(week[i]);
}
for in 循環(huán)---------------
for ( var pro in aaa ?//aaa是數(shù)組 ){
?? ?console.log(aaa[pro]); //以此打印出數(shù)組每個(gè)
?? ?console.log(pro); ? //注意pro不是下標(biāo)，而是字符串。
}
function -----函數(shù)---------------------
function aaa(b){
?? ?alert(b);
}
aaa();
表達(dá)式方式
var msg = 'hello';
var abc = function(){
?? ?alert(msg); ? ?//函數(shù)內(nèi)可以訪問函數(shù)外變量
?? ?var new = 'hai'; ?//函數(shù)外不可以訪問函數(shù)內(nèi)的變量
}
alert(new); ?//xxxx函數(shù)外不可以訪問函數(shù)內(nèi)的變量
abc();
對象 ?object-------------
var byd ={?
time:'1983',
age:'18',
art: ['jack','lun','zhao'] ? //數(shù)組屬性
}; ?//設(shè)置屬性
或byd.time='1983'; ?或 byd['time'] = '1983';
byd.art[0]; //訪問對象里的數(shù)組
delete byd.age; //刪除對象里的屬性
byd.show = function(){ ? ?//用函數(shù)作為對象的屬性
?? ?
?? ?for (var i = 0; i<this.art.length;i++){
?? ??? ?document.writeln(this.art[i]);?? ??? ?
?? ?}
}
byd.show(); ?//屬性直接調(diào)用
--------------document的操作
getElementById("aaa") ?//返回對象
getElementByTagName('li') ?
querySelector ? //返回找到的第一個(gè)元素
querySelectorAll ?//返回所有
document.querySelectorAll('.aaa li')
var aaa = getElementById("aaa");
aaa.nodeName ?//返回節(jié)點(diǎn)的元素名稱
aaa.innerText = 'aaa' ?//里面文字
aaa.parentNode ?//找到他的父節(jié)點(diǎn)
aaa.previousElementSibling ?// 上一個(gè)兄弟
aaa.nextElementSibling ?// 上一個(gè)兄弟
<h1>11111</h1>
<p>222222</p>
查看子節(jié)點(diǎn)
<body>
<ul class="aaa">
<li>bbb</li>
<li>bbb</li>
<li>bbb</li>
<li>bbb</li>
</ul>
</body>
var aaa = document.querySelector(".aaa");
alert(aaa.childNodes);
統(tǒng)計(jì)有多少元素的子節(jié)點(diǎn)
aaa.childElementCount ? //返回?cái)?shù)字
aaa.firstElementChild //第一個(gè)子節(jié)點(diǎn) 可重新賦值
aaa.lastElementChild //第一個(gè)子節(jié)點(diǎn)
createElement('li') //創(chuàng)建元素類型節(jié)點(diǎn)
createTextNode('aaa') //創(chuàng)建文本類型的子節(jié)點(diǎn)
removeChild('<li>') //刪除元素節(jié)點(diǎn)?
appendChild('<li>') ?// 拼接到元素的最后
document.querySelector('.aaa').appendChild(bbb);
insertBefore ?// 插入元素
var ccc = document.querySelector('.aaa');
ccc.insertBefore( 新的元素,ccc.firstChild ?//具體的位置);?
yuan.parentNode.insertBefore(title,yuan.previousSibling);
? //大概的意思
-----event------
onclick
onmouseover
onmouseout
window.onload = function(){
var btn = document.querySelecor('.btn');
btn.onclick = function(){
?? ?console.log('clicked');
}?
//addEventListensr對象綁定事件 ，批量綁定
function showMsg(event){ ?//返回事件對象event
?? ?console.log(event);
?? ?console.log(event.target.alt); //圖像的alt屬性 ?//例
?? ?event.stopPropagation(); //停止事件的傳播
}
btn.addEventListener( 'click',showMsg,false ?//事件的傳播 false為冒泡 ?true為捕獲 ); //返回事件對象event
}
?
事件傳播，冒泡，由內(nèi)而外，有下向上，
img > li > ul
事件捕獲方式
?ul 》 ?li > img
如果在ul和img上都綁定了onclick，事件傳播和觸發(fā)的順序
preventDefault ? //去掉事件的默認(rèn)行為
比如點(diǎn)擊A標(biāo)簽瀏覽器的鏈接跳轉(zhuǎn)效果，
總結(jié)
- 上一篇： VBS：基本输出函数
- 下一篇： JavaScript随手笔记之--htm