A.今天学到了什么
1.间接触发
<script>
// 传参(函数，时间)
// setTimeout(function(){
// alert(1);
// },2000)
// 每隔一段时间触发一次
// setInterval(function(){
// alert(1);
// },2000)
function go(){
alert("hello world")
setTimeout(go,1000)
}
go();
</script>
2.获取输入
<div>
<input type="text" id="txt">
<button id="add">添加</button>
</div>
<ul id="parent">
</ul>
<script>
var txt= document.getElementById("txt");
var add =document.getElementById("add");
var parent= document.getElementById("parent");
add.onclick=function(){
var value=txt.value;
var li=document.createElement("li");
li.innerHTML=value;
parent.appendChild(li);
}
</script>
3.获取父节点
<div class="parent">
<p id="child">hello world</p>
</div>
<script>
// p.parentNode 获得父元素
var p =document.getElementById("child");
var parent = p.parentNode;
console.log(parent);
</script>
4.实现点击删除
<ul>
<li>小米手机<a href="#">删除</a></li>
<li>华为手机<a href="#">删除</a></li>
<li>小米手机<a href="#">删除</a></li>
</ul>
<script>
var shows= document.getElementsByTagName("a");
for(let i=0;i<shows.length;i++){
shows[i].onclick=function(){
this.parentNode.style.display="none";
// 阻止a的跳转
return false;
}
}
</script>
5.子节点
5.1获取子节点
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// childNodes 获取所有类型的子节点 换行包括在内
// nodeType 为1的时候是元素节点
let parent= document.getElementById("parent");
var childs=parent.childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType==1){
childs[i].style.backgroundColor="red";
}
}
</script>
5.2获取子节点其他方法
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// var childs=document.getElementById("parent").children;
// console.log(childs.length)
// firstChild 获取第一个子节点
// lastChile 获取最后一个字节点
// lastElementChild 获取最后一个元素子节点
var fc=document.getElementById("parent").firstChild;
var fElement=parent.firstElementChild;
console.log(fc);
console.log(fElement);
</script>
6.获取兄弟节点
<div>
<p>hello world 01</p>
<p id="test">hello world 02</p>
<p>hello world 03</p>
</div>
<script>
// previousSibling 获取前面的兄弟节点
// previousElementSibling
// nextSibling获取下一个兄弟节点
// nextElementSibling 获取下一个兄弟的元素节点
let test=document.getElementById("test");
let beforetest=test.previousSibling;
let eSibling=test.previousElementSibling;
let neSibling=test.nextElementSibling;
let nSibling=test.nextSibling;
// console.log(beforetest);
console.log(eSibling);
console.log(neSibling);
console.log(nSibling);
</script>
7.offset的用法
css部分
<style>
*{margin: 0;padding: 0}
div{
width: 100px;
height: 100px;
background: red;
margin: 100px;
position: absolute;
left: 100px;
}
</style>
js部分
<div id="test">
</div>
<script>
// offsetLeft 元素水平偏移位置
// offsetTop 垂直方向偏移的位置
// offsetWidth 获取元素的宽度 特点 只能读取属性，不能修改属性
// offsetHeight 获取元素的高度
let tset=document.getElementById("test");
let offL=test.offsetLeft;
console.log(offL);
</script>
8.传属性
当传入的属性是变量时
<p id="test">hello world</p>
<script>
var p=document.getElementById("test");
// test.style.color="red";
// 当传入的属性是变量的时候使用
// test.style["color"]="blue";
// 当传入的属性是变量时 不能直接点出来
function changeStyle(ele,attr,value){
ele.style[attr]=value;
}
changeStyle(p,"backgroundColor","green");
</script>
9.通过属性设置样式
<P id="test">hello world</P>
<script>
// 同过设置属性的方式，设置样式
let test =document.getElementById("test");
test.setAttribute("style","color:red");
</script>
10.对属性的操作
<p class="one" id="test">hello world </p>
<script>
// 1.获取属性值 getAttribute
// 2.设置属性值 setAttribute
// 3.移除属性值 removeAtrribute
let test=document.getElementById("test");
let cValue=test.getAttribute("class");
test.setAttribute("class","two");
test.removeAttribute("class");
console.log(cValue);
</script>
11.动态添加title
<p id="test">hello world</p>
<script>
let test=document.getElementById("test");
test.setAttribute("title","title");
</script>
12.浏览器可视窗口大小
<p>hello world</p>
<script>
var windowWidth=window.innerWidth;
var windowHeight=window.innerHeight;
var wd=document.documentElement.clientWidth;
var hd=document.documentElement.clientHeight;
// ie浏览器
// 内容的高度
var bw=document.body.clientWidth;
var bh=document.body.clientHeight;
console.log(windowWidth);
console.log(windowHeight);
console.log(wd);
console.log(hd);
console.log(bw);
console.log(bh);
</script>
13.获取页面内容的宽高
<script>
var width=document.documentElement.scrollWidth;
var height=document.documentElement.scrollHeight;
console.log(width);
console.log(height);
</script>
14.文档碎片
<ul id="parent">
</ul>
<button id="btn">btn</button>
<script>
var btn=document.getElementById("btn");
var parent=document.getElementById("parent");
// 后面需要加();
var frame=document.createDocumentFragment();
btn.onclick=function(){
for(let i=0;i<=10;i++){
let li=document.createElement("li");
frame.appendChild(li);
}
parent.appendChild(frame);
}
</script>
15.表格
css部分
<style>
table,td,th{
border: 1px solid #333;
}
table{
border-collapse: collapse;
width: 500px;
line-height: 50px;
text-align: center;
}
</style>
html部分
<table id="table">
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr><td>JD</td><td>苹果手机</td></tr>
<tr><td>天猫</td><td>小米手机</td></tr>
<tr><td>淘宝</td><td>华为手机</td></tr>
<tr><td>苏宁</td><td>魅族手机</td></tr>
</tbody>
</table>
script部分
<!-- tHead 获取表格的标题 -->
<script>
// thead,tBodies,row,cells
// 1.标题的背景颜色 #eee;
// 2.tbody下奇数行#ff2d51 偶数行为#44cef6
var table=document.getElementById("table");
var thead=table.tHead;
var tbody=table.tBodies[0];
var rows=tbody.rows;
var firstCell=tbody.rows[0].cells[0];
thead.style.backgroundColor="#eee";
// console.log(thead);
// console.log(tbody);
for(let i=0;i<rows.length ;i++){
if(i%2==0){
rows[i].style.backgroundColor="#ff2d51";
}else{
rows[i].style.backgroundColor="#44CEF6";
}
}
firstCell.innerHTML="银泰百货";
console.log(firstCell);
</script>
16.动态添加表格
css部分
<style>
table,th,td{
border: 1px solid #333;
width: 500px;
line-height: 50px;
}
table{
text-align: center;
border-collapse: collapse;
}
tbody tr:nth-child(even){
background: red;
}
tbody tr:nth-child(odd){
background: skyblue;
}
</style>
html部分
<div>
手机品牌<input type="text" id="phone">
价格<input type="text" id="price">
<button id="btn">添加</button>
</div>
<table id="table">
<thead>
<tr><th>手机品牌</th><th>价格</th></tr>
</thead>
<tbody>
<tr><td>苹果</td><td>8k</td></tr>
</tbody>
</table>
script部分
<script>
var phone=document.getElementById("phone");
var price=document.getElementById("price");
var btn=document.getElementById("btn");
var tbody=document.getElementById("table").tBodies[0];
btn.onclick=function(){
var tr=document.createElement("tr");
var td=document.createElement("td");
td.innerHTML=phone.value;
tr.appendChild(td);
var td1=document.createElement("td");
td1.innerHTML=price.value;
tr.appendChild(td1);
tbody.appendChild(tr);
}
</script>
17.函数
<script>
// go()可以在前面调用;
// 1.直接书写的方式
function go(){
console.log("hello world");
}
go();
// 2.变量申明的方式（不推荐）
var one=function(){
console.log("one");
}
one();
// 3.构造函数的方式声明（不推荐）
var two =new Function("two","console.log(two)")
two("a");
</script>
18.箭头函数
<script>
var go=()=>{
console.log("hello world");
}
go();
</script>
19.函数的传参
<script>
function go(a,b){
console.log(a);
console.log(a+b);
console.log("没有参数");
}
go(4,4);
// JS中如何支持重载 用 arguments 对象
// 函数内部有一个arguments 对象来管理函数传入的参数
function test(){
console.log(arguments);
}
test(2,3,4);
</script>
20.JS中的重载
<script>
function test(){
if(arguments.length==1){
console.log(arguments[0]);
}else if(arguments.length==2){
console.log(arguments[0]+arguments[1]);
}else{
console.log("hello world");
}
}
// test();
test(1);
// test(2,3);
</script>
21.基本类型和引用类型的区别
<script>
// 1.基本类型只传值
// 2.引用类型传值也传地址
// var a=10;
// var b=a;
// console.log(b);
var arr=[1,2,3];
var b=arr;
arr[arr.length]=4;
console.log(b);
var obj={
name:"chengchao"
}
var jiang=obj;
obj.age=30;
console.log(jiang);
</script>
网友评论