Javascript

js页面交互

选择器

Copy
<body> <h1 id="hhh">js页面交互</h1> <h2 class="hhh2">副标题1</h2> <h2 class="hhh2">副标题2</h2> </body> <script> // 1. js选择器: js如何与html标签建立起联系 // 1) 通过标签名,id名,类名 let h1 = document.getElementById('hhh'); console.log(h1); console.log(hhh); //id是标签的唯一标识,所以js通过id名可以直接拿到标签 let h2s=document.getElementsByClassName('hhh2'); // let h2s=document.getElementsByTagName("h2"); console.log(h2s); console.log(h2s[0]); console.log(h2s[1]); //2)同css3选择器 通过id,css或标签,都可以定位到某一个或某几个 // querySelector就是获取一个 // Uncaught SyntaxError: Identifier 'h1' has already been declared 如果这里使用let就会报错 // h1=document.querySelector('#hhh'); h1=document.querySelector('body h1#hhh'); console.log(h1); h21=document.querySelector('#hhh~.hhh2'); console.log(h21); // querySelector就是获取多个 h2s=document.querySelectorAll('#hhh~.hhh2'); console.log(h2s); console.log(h2s[0]); console.log(h2s[1]); // 通过伪类直接找到第二个h2标签 h22=document.querySelector('.hhh2:nth-of-type(2)'); console.log(h22) </script>

修改样式

Copy
<body> <h1 id="hhh">js页面交互</h1> <h2 class="hhh2">副标题1</h2> <h2 class="hhh2">副标题2</h2> <img src="" alt=""> </body> <script> // 找目标标签 let h1=document.querySelector('h1'); console.log(h1); // 修改样式,内容,属性 h1.style.color='red'; //js可以直接修改样式 h1.style.backgroundColor='green'; h1.style.borderRadius='50%'; //css的 - 链接语法对应 js的 小驼峰命名法 //修改内容 h1.innerText='修改后的内容'; //修改标签里的内容 h1.innerHTML='<b>owen好骚啊</b>'; //修改标签里的HTML标签 //修改属性 let img=document.querySelector('img') if (Math.random() >0.5) { img.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562264210859&di=0c5f59b938258572a231c1049a3a5769&imgtype=0&src=http%3A%2F%2Fimg5.ph.126.net%2FF9nUurMtslbfvdjT-Tvsyg%3D%3D%2F2483735194511999125.jpg') } else { img.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562264211121&di=711c2f7bf55e3df83a9f7568b8188114&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F10%2F20150410H0341_dtVa2.jpeg') } </script>

查看样式

Copy
<head> <meta charset="UTF-8"> <title>js页面交互</title> <style> h1 { background-color: orange; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 id="hhh" style="font-size: 30px">js页面交互</h1> <h2 class="hhh2">副标题1</h2> <h2 class="hhh2">副标题2</h2> </body> <script> // 找目标标签 let h1=document.querySelector('h1'); console.log(h1); //获取样式 //标签.style.属性名 只能获取行间式 let fontsize=h1.style.fontSize; console.log(fontsize); //getComputedStyle(ele_name,伪类显示器(通常用null填充))能获取所有方式的样式(内联与外联叫计算后样式) let bgColor=getComputedStyle(h1,null).backgroundColor; console.log(bgColor); fontsize=getComputedStyle(h1,null).fontSize; console.log(fontsize)

查看内容

Copy
<body> <h1 id="hhh" style="font-size: 30px" owen="saonan"><i>js页面交互</i></h1> <h2 class="hhh2">副标题1</h2> <h2 class="hhh2">副标题2</h2> </body> <script> let h1=document.querySelector('h1'); console.log(h1.innerText); console.log(h1.innerHTML); //获取标签里的html格式,如果标签里只有文本则输出文本 console.log(h1.getAttribute('id')); console.log(h1.getAttribute('style')); console.log(h1.getAttribute('owen')) </script>

表单内容的查看和修改

Copy
<body> <h1 id="hhh" style="font-size: 30px" owen="saonan"><i>js页面交互</i></h1> <h2 class="hhh2">副标题1</h2> <h2 class="hhh2">副标题2</h2> <img src="" alt=""> <input type="text" value="12345"> </body> <script> //获取表单内容 let inp=document.querySelector('input'); console.log(inp.value); console.log(inp.getAttribute('value')); // 修改表单内容 inp.setAttribute('value','000000000'); console.log(inp.value); inp.value=67890; console.log(inp.value); </script>

事件

Copy
<head> <meta charset="UTF-8"> <title>js页面交互</title> <style> h1 { background-color: orange; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 id="hhh" style="font-size: 30px" owen="saonan"><i>js页面交互</i></h1> <h2 class="hhh2">副标题1</h2> <h2 class="hhh2">副标题2</h2> <img src="" alt=""> <input type="text" value="12345"> </body> <script> //鼠标事件 let h1=document.querySelector('h1'); //onclick,ondbclick,onmouseover,onmouseleave,onmousemove,onmousedown,onmouseup h1.onclick=function (ev) { alert(123); console.log(ev); //鼠标点击点 console.log(ev.clientX,ev.clientY); }; //点击和放开h2标签,在h1标签显示 h2=document.querySelector('h2'); h2.onmouseover=function () { h1.innerText='h2被悬浮了'; h1.style.color='green'; }; h2.onmouseleave=function () { h1.innerText='h2被放开了'; h1.style.color='red'; }; //为某个标签绑定事件,去控制页面中任何一个标签(绑定事件中的this就代表自身) let count=1; h2.onmousemove=function () { count++; h1.innerText='鼠标在h1上面游走'+count + '下'; this.innerText='鼠标在h1上面游走'+count + '下'; }; //键盘事件 //只要在窗口下,点击鼠标就可以触发 //onkeydown onkeyup onkeypress document.onkeydown=function (ev) { console.log(ev.keyCode); if (ev.keyCode == 37) { console.log('你按了左键'); } else if (ev.keyCode==38) { console.log('你按了上键'); } else if (ev.ctrlKey && ev.keyCode==17){ console.log('留言'); } }; //表单事件 let inp=document.querySelector('input'); let h22=document.querySelector('h2:nth-of-type(2)'); //onchange 当input失去焦点才会触发 oninput 内容改变时触发 inp.oninput=function () { h22.innerText=this.value; } ; inp.onchange=function () { h22.innerText=this.value; }
posted @   cjw1219  阅读(172)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示