Math
Math本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法
Math.abs() 获取一个对象的绝对值
Math.round() 四舍五入
Math.PI π
Math.max() 求几个数的最大数
Math.min() 求几个数的最小数
Math.ceil() 向上取整
Math.floor() 向下取整
Math.random() 随机数 (随机生成0 ~1之间的数)
//应用例子
var arr = [1,3,5,7,9,2,90,66]
console.log(Math.max.apply(null,arr))//90
JS选取DOM元素的方法
注意:原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
document.getElementById('myid');
2、通过class选取元素
document.getElementsByClassName('myclass')[0];
3、通过标签选取元素
document.getElementsByTagName('div')[0];
4、通过name属性选取元素(常用于表单)
document.getElementsByName('myname')[0];
JS修改CSS样式
document.getElementById('myid').style.display = 'none';
JS修改class属性
document.getElementById('myid').className = 'active';
如果有多个CLASS属性,即用空格隔开
document.getElementById('myid').className = 'active div1';
移除该元素上的所有class
document.getElementById('myid').className = '';
注意:使用classList会优于使用className
document.getElementById('myid').classList.item(0); //item为类名的索引
document.getElementById('myid').classList.length; //只读属性
document.getElementById('myid').classList.add('newClass'); //添加class
document.getElementById('myid').classList.remove('newClass'); //移除class
document.getElementById('myid').classList.toggle('newClass'); //切换,有则移除,没有则添加
document.getElementById('myid').classList.contains('newClass'); //判断是否存在该class
补充:add和remove方法不允许链式操作,因为返回的都是undefined,其次,也不允许同时添加或删除多个class,可以自行扩展一下
JS修改文本
document.getElementById('myid').innerHTML = '123';
JS创建元素并向其中追加文本
var newdiv = document.createElement('div');
var newtext = document.createTextNode('123');
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);
同理:removeChild()移除节点,并返回节点
cloneNode() 复制节点
insertBefore() 插入节点(父节点内容的最前面)
注意:insertBefore() 有两个参数,第一个是插入的节点,第二个是插入的位置
追加元素的几种方法:
//1.在父级最前面追加一个子元素:prepend()
$('#page ul').prepend('<li id="prevPage">上一页</li>');
//2.在父级最后面追加一个子元素:append()
$('#page ul').append('<li id="nextPage">下一页</li>');
//3.将子元素追加到父级的最前面:prependTo()
$("<li id="prevPage">上一页</li>").prependTo($("#page ul"));
//4.将子元素追加到父级的最后:appendTo()
$("<li id="nextPage">下一页</li>").appendTo($("#page ul"));
//5.在当前元素之前追加(是同级关系):before()
$("#wrap").before("<p class='siblings'>我是同级元素before</p>");
//6.在当前元素之后追加(是同级关系):after()
$("#wrap").after("<p class='siblings'>我是同级元素after</p>");
//7.将元素追加到指定对象的前面(是同级关系):insertBefore()
$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
//8.将元素追加到指定对象的后面(是同级关系):insertAfter()
$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
//9.在节点的最后追加子元素:appendChild()
// 创建script标签
var script = document.createElement('script');
// 设置src属性
script.src = 'http://localhost:3001/better?callback=fn2';
// 将script标签追加到页面中
document.body.appendChild(script);
// 或者
// 创建p节点
var para = document.createElement("p");
// 创建文本节点
var node = document.createTextNode("我是子集appendChild新段落。");
// 把文本节点添加到p节点里
para.appendChild(node);
// 查找div
var element = document.getElementById("wrap");
// 把p节点添加到div1里
element.appendChild(para);
JS返回所有子节点对象 childNodes
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点对象
nextSibling 返回下一个兄弟节点对象
previousSibling 返回前一个兄弟节点对象
nodeName 返回节点的HTML标记名称
var mylist = document.getElementById('myid');
for(var i=0,i<mylist.childNodes.length;i++){
console.log(mylist.childNodes[i]);
}
参考文章:https://www.cnblogs.com/joe235/p/13679218.html
对里面的内容进行了一些修改和补充,有问题请联系修正,Thanks♪(・ω・)ノ
未完待续~