就可随时变为感应或点击了,JavaScript 能够改变页

作者: 前端开发  发布:2019-09-07

一经是反射触发.就选onmouseover
只如果点击触发.就选onclick    [把它们两互相替换,就可天天变为感应或点击了]

近年做项目时,碰着的主题材料
“想透过javascript在浏览器新标签页或新窗口张开四个新的页面,结果被浏览器大大残忍给拦住了”
作业供给:前端提交数据到后端,后端再次回到url,然后在新窗口张开该url。
(前后端数据要求使用异步要求的情势)

HTML DOM (文书档案对象模型)

当网页被加载时,浏览器会创造页面的文书档案对象模型(Document Object Model)。
HTML DOM 模型被组织为目的的树。如下图

巴黎人游戏官网 1

AA65CE2D-511A-4BD0-BFC0-974858A70246.png

透过可编制程序的对象模型,JavaScript 获得了十足的力量来创建动态的 HTML。
JavaScript 能够退换页面中的所有 HTML 成分
JavaScript 能够更动页面中的全体 HTML 属性
JavaScript 能够转移页面中的全部 CSS 样式
JavaScript 能够对页面中的全数事件做出反应

  1. 通过id去获得成分:document.getElementById

     <html>
     <body
     <p id="test">通过id方法来改变我的内容哦</p>
    
     <br>
    
     <button type="button" onclick="changText()">点击我改变上面文本的内容</button>
    
     <script>
    
    function changText(){
    
       var x = document.getElementById('test')
       x.innerHTML = "我是通过id获取元素来改变的"
     }
     </script>
    
     </body>
     </html>
    

地点例子中式茶食击开关调用JS方法通过元素的id获取到成分,然后改成它的剧情

  1. 由此标具名取得具备的价签,document.getElementsByTagName.例子如下

     <html>
     <body>
    
     <p>Hello World!</p>
    
     <p>什么鬼东西啊</p>
    
     <script>
    
     var y=document.getElementsByTagName("p");
     document.write('第二p标签中的第一段文本是:'                       y[0].innerHTML);
     </script>
    
       </body>
     </html>
    
  2. 改变HTML属性:document.getElementById(id).attribute=new value
    巴黎人游戏官网,一般来讲例子,点击开关替换img的src属性

     <html>
     <body>
    
     ![](https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1474525644&di=d19c63d9d54b7a38491c4db1ba1b35fc&src=http://www.sz-ruiyu.com/uploads/allimg/190907/11425RA6-1.jpg"button" onclick="changeImg()">点击切换一个更好看的美女图片行不</button>
    
     <script>
     function changeImg(){
    
      var x = document.getElementById("image")
      x.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1474525644&di=eabddabe6fac4f92a6158697ab3c0d9d&src=http://www.sz-ruiyu.com/uploads/allimg/190907/11425S031-2.jpg"
     }
     </script
     </body>
     </html>
    
  3. 改变 HTML 样式
    document.getElementById(id).style.property=new style
    例子:
    <p id="p2">Hello World!</p>

     <script>
       document.getElementById("p2").style.color="blue";
     </script>
    
  4. 利用 HTML DOM 来分配事件

     <html>
    
     <body>
    
     <p>点击按钮就弹窗</p>
    
     <button id="btn">点我出弹窗</button>
     <script>
      var x = document.getElementById('btn').onclick = function(){alert("该弹窗的要弹窗啊")}
    
     </script>
    
     </body>
     </html> 
    
  5. onload 和 onunload 事件
    onload 和 onunload 事件会在客户步向或离开页面时被触发。
    onload 事件可用以检查测量检验访谈者的浏览器类型和浏览器版本,并依据这一个新闻来加载网页的正确性版本。
    onload 和 onunload 事件可用于拍卖 cookie。

    <html>
    <body onload="checkCookies()">

    <script>
  function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("已启用 cookie")
}
else
{
alert("未启用 cookie")
}
}
</script>

<p>提示框会告诉你,浏览器是否已启用 cookie。</p>
</body>
</html>

7.onchange 事件
onchange 事件常结合对输入字段的注脚来利用。

<p>输入小写字母变大写</p>
<input type="text" id="userName"     onchange="upperName()">

<script>

function upperName() {

  var x = document.getElementById("userName")
  x.value = x.value.toUpperCase();
}
</script>

8.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用来在顾客的鼠标移至 HTML 成分上方或移出成分时触发函数

<html>
<body>

<p onmouseover="mouseOn()" onmouseout="mouseM()">鼠标移动到我上面,或者移走都会有不能的效果</p>

<script>

function mouseOn(){

 alert("鼠标移动上来了")
}

function mouseM(){

 alert("鼠标移动走了")
}


</script>

</body>
</html>

9.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的有着片段。首先当点击鼠标按键时,会触发 onmousedown 事件,当释放鼠标开关时,会触发 onmouseup 事件,最终,当成功鼠标点击时,会触发 onclick 事件。

 <html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

10 . 成立新的 HTML 成分
如需向 HTML DOM 加多新成分,您必须首先创造该因素(成分节点),然后向一个已存在的成分追加该因素。

  <p>不好意思我需要自己去实现</p>

<div id="yjDiv">

<p>很明显这是一个标签</p>
<p>这是第二个标签</p>

</div>

<button type="button" onclick="appendTag()">新增一个标签</button>


<script>

function appendTag(){

  var pTag = document.createElement("p"); // 创建一个p标签
  var childNode = document.createTextNode("我需要新建一个标签"); // 新建一个节点
  pTag.appendChild(childNode); // 添加节点到元素中

  var newDiv = document.getElementById("yjDiv"); //获取div元素
  newDiv.appendChild(pTag);  // 往元素中添加标签


}

</script>

11.刨除已有的HTML成分
如需删除 HTML 成分,您必须首先获得该因素的父成分

<div id="yjDiv">

<p id="yjP">我是段落1</p>
<p id="yjp1">我是段落2</p>

</div>

  <button type="button" onclick="deleteP()">点击删除一个段落</button>

<script>
function deleteP(){

 var parent = document.getElementById("yjDiv"); // 获取父元素
 var child = document.getElementById("yjP"); // 获取需要删除的标签
 parent.removeChild(child)
}
</script>

11、获取浏览器内部窗口的宽高(不包罗内滚动条/工具栏)

<p id ="test">点击下面的按钮获取窗口的宽高</p>

<button type="button" onclick="getWindowInfo()">点击获取</button>

<script>
  function getWindowInfo() {

   var h=window.innerHeight||document.documentElement.clientHeigh||document.body.clientHeigh;
var w = window.innerWidth || document.documentElement.clientWidth||docuemnt.body.clientWidth;


var x = document.getElementById("test");

x.innerHTML = "获取到的宽高 "  w  ",高度:"  h  ""

}
</script>

而只要想在多个页面上有N个滑动门
就复制一套...将myTab0改成myTab1  myTab2  myTab3    等等等..都足以..只怕换到你和煦喜好的名字...当然myTab0_Content0那一个亦是要一呵而就变动!


封存自个儿用

投机常用的二种展开新窗口的格局

自个儿的滑动门

  1. window.open()
  2. 用a标签的target="_blank"
    在模板中插入贰个a标签,然后javascript去触发a链接的click,完结跳转。(该办法在jQuery跟js中有坑...)
  • 全部
  • 日志
  • 咨询
  • 相册
  • 商城
  • 社区

000

//***jQuery***
<a href="http://wuliv.com" id="openNew"></a>
$(function(){
  $('#openNew').click()
})
//失败无效

//***jQuery***
<a href="http://wuliv.com" id="openNew">

</a>
$(function(){
  $('#openNew span').click()
})
//成功打开新页面

//***javascript***
<a href="http://wuliv.com" id="openNew"></a>
document.getElementById('openNew').click()
//成功打开新页面

本文由巴黎人游戏官网发布于前端开发,转载请注明出处:就可随时变为感应或点击了,JavaScript 能够改变页

关键词:

上一篇://向编辑器插入钦赐代码 
下一篇:没有了