1. js的内置样式###
仅作为了解：<button onclick="alert('大家早上好')">按钮</button>
2. 全选/全不选/反选###
input.checked=!input.checked
HTML代码：
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<br>
<ul>
<li><span>你好</span><input type="checkbox"></li>
<li><span>你好</span><input type="checkbox"></li>
<li><span>你好</span><input type="checkbox"></li>
<li><span>你好</span><input type="checkbox"></li>
<li><span>你好</span><input type="checkbox"></li>
</ul>
JS代码：
<script>
//选取事件元素
var btns = document.getElementsByTagName('button');
console.log(btns);
//选取目标元素
var input = document.getElementsByTagName('input');
//代码抽离—功能相似，代码相同的部分抽取出来，不同的部分当作变量用参数的形式传进去
function checkFn(btn){
btns[btn].onclick= function () {
for(let i=0;i<input.length;i++){
input[i].checked= btn==0?true:btn==1?false:!input[i].checked;
}
}
}
for (let i=0; i<btns.length; i++){
checkFn(i);
}
</script>
3. 九宫格###
一些关键点：
- position:absolute
- count：总列数
- 当前行数（row)=当前i除以总列数
- 当前列数（col）=当前i对总列数取余
- 再利用row和col分别计算每一个块所在的位置。
CSS代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*width: 1200px;*/
margin: 0 auto;
/*border: 1px solid #000;*/
position: relative;
top:20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid #000;;
text-align: center;
line-height:100px;
/*position: absolute;*/
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 5px;
}
button{
margin: 10px auto;
text-align: center;
}
</style>
HTML代码：
<button>点击输入列数</button>
<div class="box">
<div><span>第1个</span></div>
<div><span>第2个</span></div>
<div><span>第3个</span></div>
<div><span>第4个</span></div>
<div><span>第5个</span></div>
<div><span>第6个</span></div>
<div><span>第7个</span></div>
<div><span>第8个</span></div>
<div><span>第9个</span></div>
<div><span>第10个</span></div>
<div><span>第11个</span></div>
<div><span>第12个</span></div>
</div>
JS代码：
<script>
var box = document.getElementsByTagName('div');
document.getElementsByTagName('button')[0].onclick=function(){
let count = prompt("请输入数字");
//当前行
let row=0;
//当前列
let col=0;
//对每一个块进行处理
for(let i=1; i<=box.length; i++){
box[i].style.position="absolute";
//当前块的索引除以总列数得出当前块所在行
row = parseInt((i-1)/count);
//当前块的索引对总列数求余得出当前块所在列
col = (i-1)%count;
//利用得出的行和列对块的位置进行定位
box[i].style.top=row*110+"px";
box[i].style.left=col*110+"px";
}
}
</script>
4. 排他思想###
我们的主旨是：干掉所有人，包括自己，最后再让自己复活
HTML代码：
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
<button>第五个</button>
JS代码：
//获取事件元素
var btns = document.getElementsByTagName('button');
//对每个按钮添加事件
for(let i=0;i<btns.length;i++){
btns[i].onclick= function () {
//排他思想：干掉所有人，包括自己
for(let i=0;i<btns.length;i++)btns[i].style.backgroundColor="#FFF";
//然后再复活自己
this.style.backgroundColor="green";
}
}
5.JS中IE浏览器兼容###
通过类名称获取标签，有兼容性问题：IE6/7/8不支持
document.getElementsByClassName("class");
所以需要自己定义一个利用Class来获取标签的工具函数
//定义一个利用class属性获取标签的函数—自己封装工具类，目的：兼容低版本浏览器
function getElementsByClass_name(className){
//检测当前环境是否可以直接使用class来获取标签，如果能，直接返回该方法
// if(document.getElementsByClassName)return document.getElementsByClassName(className);
//如果不能，let do it.
//定义一个存储符合条件标签的数组
var arr = [];
//获取页面上所有的标签
var doms = document.getElementsByTagName('*');
//对页面上所有的标签进行遍历
for(var i = 0; i<doms.length; i++){
//获取每一个标签的class属性，并将每一个标签的class属性存到数组中
var domClassArr = doms[i].className.split(" ");
//便利每个标签的class属性，是否是所要查找的标签，如果是，则存到数组arr中
for(var j = 0; j<domClassArr.length; j++){
if(domClassArr[j]==className)arr.push(doms[i]);
}
}
return arr;
}
6. 字符串的切割###
var strArr = str.split("分割条件"); //分割条件一定是字符串中已有的内容，返回值为数组
7.非字符串类型转换成字符串类型###
布尔类型转换为字符串类型
var flag = false;
var rst = flag.toString();
console.log(typeof rst);
数值类型转换为字符串类型
var num = 123;
var rst = num.toString();
console.log(typeof rst);
var result = num.toString(进制);//转换成指定进制的字符串
补充："+"运算符
也可以用来连接字符
var str1 = "HELLO";
var str2 = "WORLD";
var rst = str1 + str2;
console.log(rst);
当数字类型和字符串类型相加的时候，数字类型会转换为字符串类型
数字类型转换成字符串类型最快的方式：
var num = 90;
var str = num+"";
console.log(typeof str);
8.字符串转成数值类型###
8.1 parseInt();只能转换出整数类型，当遇到0~9的整数就转换，如果是其他的那么就停止转换，并且返回当前转换完的数字
var str = "123";
var num = parseInt(str);
console.log(typeof num);
8.2 parseFlota();只有遇到第一个小数点的时候会继续转换，再有遇到其他不是0~9的数字就会退出转换，并返回当前转换完的数字
var str = "123.45abc";
var num = parseFloat(str);
console.log(num);
9.对象###
定义：具有特定功能的功能组
属性和方法
- 变量：相对属性，更加自由，在作用域内任意位置都可以使用
- 属性：隶属于对象（就是变量），想要使用，必须由对象.属性
- 方法：隶属于对象（就是函数）
自定义属性：
var arr=[12,345];
arr.length;
//自定义属性
arr.selfProp=123;
console.log(arr.selfprop);
网友评论