JS随手记

typeof
parseInt
parseFloat


number
string
true false
NaN
null
undefined  (false)

-------------string---
length
charAt(0)第一个字符
charAt(a.length-1) 最后字符
indexOf('字')  第一次出现索引号
lastIndexOf('字') 最后出现索引号
subString(0,3) 截取字符串内字符,开始,结束
前三个
replace('替换谁','新字');
split(',')  用逗号分割成片段

var old='测试,数据';
var new = aa.split(','); 是数组
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()   返回删除最后元素后的数组
demo.shift()  返回删除最前元素后的数组
delete demo[3] 删除里面元素,不影响数组长度 返回true
demo.splice(3) 彻底删除,影响长度
demo.concat(合并数组); 合并数组;

.filter() 去筛选符合条件的数据,和 map的区别就是MAP是形成的新数组是原数组结构的映射,不改变原数组结构,而filter形成的新数组会改变原来的结构

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 );
//定义一个筛选器 item可以随便取名

-----数组的MAP方法


  /**
   * map():创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
   * 例子,当前新的是accessCount 返回的是accessCount.action赋予新的
   */
  const allowedActions = allowAccessCounts
    .map(accessCount => accessCount.action)
    .map(action => `'${action}'`)
    .join(',');


----
join方法用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的。
分隔符(可选,如果未填写,则默认为逗号 “,”)


-----------------------if ----

&&  ||    else if

switch(aaa){
case 'aa':
alert();
break;   //结束

default:

break;

}

while-----------------------

var i = 0;
while( i < 10 ){

    i++;

   if(i % 2 ===0   //求余数 ){
    continue; // 跳过当前循环进行下一次循环
    }
   console.log(i);

}

for 循------------------------------

let week = ['zhou1','zhou2','zhou3'];
for (var i = 0; i<week.length; i++){

    console.log(week[i]);
}


for in 循环---------------


for ( var pro in aaa  //aaa是数组 ){
    console.log(aaa[pro]); //以此打印出数组每个
    console.log(pro);   //注意pro不是下标,而是字符串。

}

function -----函数---------------------

function aaa(b){
    alert(b);
}

aaa();


表达式方式
var msg = 'hello';
var abc = function(){
    alert(msg);    //函数内可以访问函数外变量
    var new = 'hai';  //函数外不可以访问函数内的变量
}

alert(new);  //xxxx函数外不可以访问函数内的变量
abc();

对象  object-------------

var byd ={ 
time:'1983',
age:'18',
art: ['jack','lun','zhao']   //数组属性

};  //设置属性
或byd.time='1983';  或 byd['time'] = '1983';

byd.art[0]; //访问对象里的数组
delete byd.age; //删除对象里的属性


byd.show = function(){    //用函数作为对象的属性
    
    for (var i = 0; i<this.art.length;i++){

        document.writeln(this.art[i]);        

    }
}

byd.show();  //属性直接调用

--------------document的操作

getElementById("aaa")  //返回对象
getElementByTagName('li')  

querySelector   //返回找到的第一个元素

querySelectorAll  //返回所有

document.querySelectorAll('.aaa li')

var aaa = getElementById("aaa");
aaa.nodeName  //返回节点的元素名称
aaa.innerText = 'aaa'  //里面文字
aaa.parentNode  //找到他的父节点
aaa.previousElementSibling  // 上一个兄弟
aaa.nextElementSibling  // 上一个兄弟
<h1>11111</h1>
<p>222222</p>

查看子节点
<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);

统计有多少元素的子节点
aaa.childElementCount   //返回数字
aaa.firstElementChild //第一个子节点 可重新赋值
aaa.lastElementChild //第一个子节点

createElement('li') //创建元素类型节点
createTextNode('aaa') //创建文本类型的子节点

removeChild('<li>') //删除元素节点 
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


}
 
事件传播,冒泡,由内而外,有下向上,
img > li > ul

事件捕获方式

 ul 》  li > img

如果在ul和img上都绑定了onclick,事件传播和触发的顺序

preventDefault   //去掉事件的默认行为
比如点击A标签浏览器的链接跳转效果,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值