js一些常用的知识

最新推荐文章于 2023-05-02 09:40:35 发布

ATen_hong

最新推荐文章于 2023-05-02 09:40:35 发布

阅读量209

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/ATen_hong/article/details/80231831

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.文本框禁用
.disabled 取值false 或者true
事例：

2.复选框全选
checkbox
cgecked选中状态
实例：
<body>
<input type="checkbox" name="" id="box1" value="" />
<input type="checkbox" name="heihei" id="heihei" value="" />
<input type="checkbox" name="heihei" id="heihei" value="" />
</body>
<script type="text/javascript">
document.getElementById("box1").οnclick=function(){
var a= document.getElementsByName("heihei");

if(document.getElementById("box1").checked==false){
for (var i = 0; i < a.length; i++) {
a[i].checked=false;
}
}
else if(document.getElementById("box1").checked==true){
for (var i = 0; i < a.length; i++) {
a[i].checked=true;
}
}
}
</script>
3.判断注册界面
获取文本框之后根据长度判断
或者正则表达式匹配
window.location.href="";跳转页面
doucument.weite（""）;再页面输出

4.获取节点

//这里的div1是一个div盒子通过盒子去获取他的父节点和子节点
div1.parentNode w3c提供的标准获取父节点 .parentElement民间标准
div1.chlidNodes获取子节点 .chlidren民间标准
div1.chlidNodes.nodename(); nodename标签名称节点名称
//html中标签之间的衔接 #text 所以查找子节点中应该吧#text刨掉
//用if判断
for(var =1,i<div1.chlidNodes.length,i++){//集合要先拿节点
if(div1.chlidNodes.nodetype[i]==1){
console.log(div1.childNodes[i].nodename);
}
}
//当nodetype=1时是标签属性当nodetype=3时是#text；
//console.log在网页控制台输出网页控制台按f12展现出来

节点使用示例：
var a=document.getElementById("p");
var b=a.parentNode.childNodes;//拿到的是一个集合
console.log(a.nextElementSibing);//.nextElementSibing获取下一个节点元素删除elment获取的就是文本
console.log(b[3]);

.nextElementSibing下一个兄弟节点
.firstChild第一个子节点
.previousSibling获取上一个兄弟节点
。。。。

5.自动生成表格
（1）方法一
<div id="div1"></div>
<div></div>
<script>
//appendChild添加子节点
var div1=document.getElementById("div1");
//div1.innerHTML="<a href="www.baidu.com">百度一下</a><p>春眠不觉晓</p>";//生成a标签
//div1.appendChild="<table border='1'><tr><td>我爱你</td></tr><table>";//生成表格
div1.innerHTML="<select><option>想你</option><option>等你</option><option>念你</option></select>";//下拉列表
//innnerhtml会把上面一个覆盖（缺陷），解决方法，多放一个盒子
var div2=div1.nextElementSibling;
div2.innerHTML="<a>我喜欢你</a>";
//innerhtml可以无限添加值生成新页面
</script>

（2）方法二
<div id="div1"></div>
<div></div>
<script>
var div1=document.getElementById("div1");
var table=document.createElement("table");//创建table
table.setAttribute("border","1");//给table设置属性
var tr=document.createElement("tr");//创建tr
var td=document.createElement("td");//创建td
td.innerHTML="我想你了";//给td加入值
tr.appendChild(td);//吧td放到tr中
table.appendChild(tr);
div1.appendChild(table);
</script>

//这种方法比较完美
（3）方法三

//1.创建表哥元素
var table=document.createElement("table");
//2.获得div
var div1=document.getElementById("div1");
//3设置表哥元素
table.setAttribute("border","1");
//4.获取行
var tr=table.insertRow();//插入行
//5.获取列
//cell单元单元格
var td=tr.insertCell(0);
var td2=tr.insertCell(1);
var td3=tr.insertCell(2);
var td4=tr.insertCell(3);
var td5=tr.insertCell(4);
td.innerHTML="我爱你，你这个笨蛋";
td2.innerHTML="我爱你，你这个笨蛋";
td3.innerHTML="我爱你，你这个笨蛋";
td4.innerHTML="我爱你，你这个笨蛋";
td5.innerHTML="我爱你，你这个笨蛋";
//6.生成表格存放div
div1.appendChild(table);
6.加载
onload 加载完成后去执行
//页面关闭后弹框等
onunload =function(){
}

7.计时器
<input type="button" name="btn" id="btn" value="笨" οnclick="hehe()"/>
<script type="text/javascript">
var timeout=setTimeout(function(){
alert("你是笨蛋");
},100)//发生间隔时间 1000毫秒等于一秒

function hehe(){
clearTimeout(timeout);//取消即使器内的内容弹出
}

</script>

方法二
<input type="button" name="btn" id="btn" value="" οnclick="hehe()" />
<script type="text/javascript">
var setInterVal=setInterval(function(){
alert("我喜欢你");
},1000)
function hehe(){
clearInterval(setInterVal);
}
</script>

7.js改变style属性

实例：一个图片在范围内移动

ATen_hong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js一些常用的知识

1.文本框禁用.disabled 取值false 或者true事例：2.复选框全选 checkbox cgecked选中状态实例： &lt;body&gt; &lt;input type="checkbox" name="" id="box1" value="" /&gt; &lt;input type="checkbox" name="heihei&q
复制链接

扫一扫