<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ background-color: #eaffea; list-style: none; font-size: 14px; width: 150px; display: block; position: relative; cursor: pointer; /*把鼠标变成小手*/ display: none; z-index: 999; } li{ padding-left: 20px; line-height: 25px; } li:hover{ background-color: #fffdef; } </style> </head> <body> <ul> <li>查看网页源代码</li> <li>刷新网页（F5）</li> <li>离开网页</li> <li>跳转到百度</li> <li>根据文本框内容搜索</li> <li>输入内容搜索</li> </ul> <div style="margin: 20px auto;width: 500px;position: relative"> <span>搜索内容：</span><input type="text" style="width: 300px;"> </div> <script> window.onload=function(){ var ul=document.querySelector('ul'); //系统右键菜单禁用事件【contextmenu】 document.oncontextmenu = function (eve) { return false; };//return false表示事件禁用 document.onmouseup=function (eve) { // console.log(eve.button);//查看鼠标哪个键被点击 左键0 滑轮1 右键2 if (eve.button==2){ ul.style.display='block'; ul.style.left=event.clientX+'px'; ul.style.top=event.clientY+'px'; }else { ul.style.display='none'; } } //事件委托 ul.onmousedown=function (eve) { // console.log(eve.target.innerHTML);//根据这个来判断是哪一个li if (eve.button==2||eve.button==0){ if (eve.target.innerHTML=='查看网页源代码'){ alert('我不告诉你！！！'); ul.style.display='none'; } else if (eve.target.innerHTML=='刷新网页（F5）'){ window.location.reload(); } else if (eve.target.innerHTML=='离开网页'){ var a=confirm('Do you sure 要离开网页？？？？？'); // console.log(a); if (a){ window.close(); } else { ul.style.display='none'; } }else if (eve.target.innerHTML=='跳转到百度'){ window.location.replace('http://www.baidu.com'); }else if (eve.target.innerHTML=='根据文本框内容搜索'){ var resukt=document.getSelection().toString(); window.open('http://www.baidu.com/s?wd='+resukt); } } } } </script> </body> </html>
老师，当点击鼠标右键的时候，ul的display属性取值为block或inline-block ，都会使得我本来设置的文本框向下移动；请问老师怎么设置能够使文本框在ul出现时依旧保持之前的位置
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> var ul=document.createAttribute('ul'); ul.style.listStyle='none'; ul.style.padding='0'; var arr=["首页","军事","娱乐","历史","政治"]; for(var i=0;i<arr.length;i++){ var li=document.createAttribute("li"); li.style.cssText="display:inline-block;width:100px;height:30px;line-height:30px;" + "text-align:center;margin-left:5px;background-color:skyblue"; li.innerHTML=arr[i]; ul.appendChild(li); li.onmouseenter=function(){ this.style.backgroundColor="blue"; } li.onmouseleave=function(){ this.style.backgroundColor="pink"; } } document.body.appendChild(ul); </script> </head> <body> </body> </html>
listStyle出错，onmouseenter和onmouseleave是我手动敲出来的，编辑器没有自动提示，我的webstrom版本是10.0.3
<script> var arr = ["首页","军事","新闻","我们"]; var ul = document.createElement('ul'); ul.style.listStyle='none'; ul.style.padding="0"; for (var i = 0;i<arr.length;i++){ var li = document.createElement("li"); li.style.cssText="width: 150px;height: 50px;line-height: 50px;text-align: center;"+ "background:pink;margin-left:30px;display: inline-block;float: left;"; li.innerHTML=arr[i]; ul.appendChild(li); li.onmouseenter=function () { this.style.backgroundColor="blue"; } li.onmouseleave=function () { this.style.backgroundColor="pink"; } } document.body.appendChild(ul); </script>
这样应该没错吧
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var div1=document.getElementById("#div1"); var div2=document.getElementById("#div2"); var div3=document.getElementById("#div3"); div1.onclick=function(){alert("div1被点击")}; div2.onclick=function(){alert("div2被点击")}; div3.onclick=function(){alert("div3被点击")}; } </script> </head> <body> <div id="div1" style="width: 300px;height: 300px;background-color: red"> <div id="div2" style="width: 200px;height: 200px;background-color: blue"> <div id="div3" style="width: 100px;height: 100px;background-color: green"></div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{list-style: none; position: absolute; display: none; min-width: 220px; } li{ cursor: pointer; height: 30px; line-height: 30px; } li:hover{ background-color: skyblue; } </style> </head> <body> <ul> <li>我想去吃烤鸭</li> <li>确认关闭本页面吗?</li> <li>去百度搜索页面中选中的内容</li> <li>弹出提示框，用户【在提示框中输入内容】然后跳转至百度进行搜索</li> </ul> <script> var ul=document.querySelector('ul'); document.oncontextmenu = function (eve) { return false; //return false表示事件禁用 }; document.onmouseup=function(eve){ if(eve.button==2){ ul.style.display='block'; ul.style.left=eve.clientX+'px'; ul.style.top=eve.clientY+'px'; }else{ ul.style.display='none'; } } ul.onmousedown=function(eve){ switch (eve.target.innerHTML) { case '我想去吃烤鸭':function test1(){ alert('那就去呗'); } break; default: break; } // if(eve.target.innerHTML=='我想去吃烤鸭'){ // alert('去吧'); } </script> </body> </html>
老师为啥我这个mousedown事件用swtich来判断真正触发者，点击了第一个li没反应 但是用if语句判断就可以
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> li:hover{background-color: orange} li{background-color: skyblue} </style> </head> <body> <script> var arr=["首页","军事","娱乐","历史","政治"]; var ul=document.createElement('ul'); var ul_style=document.createAttribute("style"); ul_style.value="list-style:none; padding:0; margin:0"; ul.setAttributeNode(ul_style); for(var i=0;i<arr.length;i++){ var li=document.createElement('li'); var li_style=document.createAttribute("style"); li_style.value="display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;margin-left:5px"; li.setAttributeNode(li_style); var a=document.createElement("a"); var a_style=document.createAttribute("style"); a.setAttributeNode(a_style); a.innerHTML=arr[i]; li.appendChild(a); ul.appendChild(li); } document.body.appendChild(ul); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document节点练习</title> <!--<style type="text/css"> ul{ list-style: none;margin: 0;padding: 0; } ul li{ display: inline-block;width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: #0086b3; } li a{ } li:hover{ background-color: #0077aa; } li a:hover{ color:red; } </style>--> <style> li:hover{background-color: #b3d4fc} li a:hover{color:red} </style> </head> <body> <!--<ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">军事</a></li> <li><a href="#">娱乐</a></li> </ul>--> <script> var arr=["首页","新闻","军事","娱乐"] var ulText=document.createElement('ul'); var ulText_style= document.createAttribute('style'); ulText_style.value="list-style: none;margin: 0;padding: 0;"; ulText.setAttributeNode(ulText_style); for(var i=0;i<arr.length;i++){ var liText=document.createElement('li'); var liText_style= document.createAttribute('style'); liText_style.value='display:inline-block;width:100px;height:30px;line-height:30px;\ text-align:center;margin-left:5px'; liText.setAttributeNode(liText_style); var aText=document.createElement('a'); var aText_style= document.createAttribute('style'); aText_style.value="text-decoration: none;"; aText.setAttributeNode(aText_style); aText.innerHTML=arr[i]; liText.appendChild(aText); ulText.appendChild(liText); } document.body.appendChild(ulText); var arr2 = ['cnode社区也切换到let\'s encrypt了','【深圳】nodeparty 2016.04.09总结','国内nodejs2015','展望nodejs 2016','基础javascript']; var ul1 = document.createElement('ul'); var ul1_style = document.createAttribute('style'); ul1_style.value = 'height: 30px;list-style: none;padding: 0;margin: 0;'; ul1.setAttributeNode(ul1_style); document.body.appendChild(ul1); for (var j =0;j<arr2.length;j++){ var li1 = document.createElement('li'); var li1_style = document.createAttribute('style'); li1_style.value = "height: 30px;line-height: 30px;text-align: left;border-bottom: 1px solid gainsboro;"; li1.setAttributeNode(li1_style); var a1 = document.createElement('a'); a1.innerHTML = arr2[j]; li1.appendChild(a1); ul1.appendChild(li1); } </script> </body> </html>
这样写的话应该是没有什么问题的吧
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <span>这是span标签</span> <script> var span=document.querySelector('span'); //第一种 var sp=span.ownerDocument; console.log(sp===document);//true console.log(sp.nodeName);//#document //第二种 var span=document.getElementsByTagName('span'); var sp=span.ownerDocument; console.log(sp===document); console.log(sp.nodeName); </script> </body> </html>
老师 您好 为什么第二种方法得不到true 和#document呢？只是获取元素的方法不同。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button> 跨域传输 </button> <script> var but=document.querySelector('button'); but.onclick=function(){ var iframe=document.createElement('iframe'); iframe.src='page.html';//加载页面 iframe.style.display='none'; document.body.appendChild(iframe); } window.onload=function(eve){ var iframeWindowName=eve.target.contentWindow.name; eval(iframeWindowName); console.log(num); } </script> </body> </html>
老师，为啥报错的 contentWindow.name和eval()是啥意思
老师为什么关闭不了窗口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> open('https://www.baidu.com'); window.close(); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>鼠标事件_1</title> </head> <body> <div style="width:200px;height: 200px;background-color: pink "></div> <script> var div = document.querySelector('div'); //鼠标移动时触发 div.onmousemove=function(){ //event对象，仅在函数内部使用，表示事件本身 //clientX clientY ,表示鼠标在视口中的坐标 var x=event.clientX; var y=event.clientY; console.log('(x,y):('+x+','+y+')'); } </script> </body> </html>
老师，
console.log('(x,y):('+x+','+y+')');
这段代码是里面的单引号都是什么作用 , （‘+x+’，‘+y+’）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> <input type="text" name="userName"/> <input id="in" type="submit"/> </form> <button id="but">获取发送信息</button> <script> document.getElementById("but").onclick=function(){ console.log(document.location.search); } </script> </body> </html>
老师，现在这个js代码是点击
<button id="but">获取发送信息</button>
这个id=‘but’的button从而在控制台看到文本框的信息，
老师为什么不能把下面的onclick功能放到id=’in‘的那个submit上呢，就是点击一次就可以把文本框的信息输入到控制台中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>函数提升</title> </head> <body> <script> var bb='11111'; function a() { alert(bb); } a() /* var bb='11111111'; function aaa(){ //函数提升：var bb； alert(bb); //undefined 会产生一个函数提升 alert（bb）产生var bb； 会提升到函数内开头 var bb='test'; alert(bb); //'test' var cc='test1'; alert(age); //报错 } aaa();*/ </script> </body> </html>
老师这两段代码，为什么第一个调用函数a()就可以alert出 bb的值；
第二段 alert （bb）；就会出现undifined， 第二个不也是在函数外调用的函数么，为什么不能获取全局变量bb的值呢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var i=0; while (i<5){ var j=0; while (j<=i){ console.log('*'); j++; } i++; console.log('\n'); } </script> </body> </html>
老师我想让我的代码达到一个这样的效果，
但是运行起来并不是这样的，我希望知道我的错误出在哪里？是哪里的代码写错了呢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var season=prompt('请输入十以下的数字'); switch (season) { case '1'||'2'||'3':{ alert('winter'); } break; case '5'||'4':{ alert('spring'); } break; case '6'||'7'||'8':{ alert('summer'); } break; case '9'||'10'||'0':{ alert('automn'); } break; default:{ alert('meiyou'); } } </script> </body> </html>
老师用||或不可以进行选择吗v
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号