javascript小技巧

最新推荐文章于 2024-06-24 10:00:00 发布

beyondsanli

最新推荐文章于 2024-06-24 10:00:00 发布

阅读量90

点赞数

分类专栏： js 文章标签： JavaScript prototype HTML XHTML F# ViewUI

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一系列前端开发实用技巧，包括CSS样式调整、JavaScript事件监听、DOM操作及页面滚动效果等，帮助开发者提升网页交互体验。

（1）style=cursor.hand
（2）<body style="overflow-x:hidden"> 隐藏水平的滚动条
（3): alert(aa.options[aa.selectedIndex].text);
(4):select 固定大小 style="width:80px"
(5)onpropertychange
(6)表头固定不随滚动条滚动
style='position:relative;top:expression(this.offsetParent.scrollTop-2);'
(7)进入到表底部
window.parent.scrollTo(0,document.body.clientHeight + document.body.scrollHeight);

document.body.scrollTop = document.body.scrollHeight

(8)整个页面对事件的监听
<script language="javascript" for="document" event="onkeydown">
if (event.keyCode==13)
{
}
</script>
(9) 刷新前触发
document.body.onbeforeunload=function()
{
alert(" 刷新前触发");
}
（10）
document.onLoad = mytest(); //要早与下面，
document.onLoad = mytest; 是完全不同的： =<body onload="mytest()">
(11):
动态的修改colspan
要注意的是你定位到th,或者td 的时候用colSpan来访问，不是colspan

(12) 获取table 的真实宽度
offsetWidth
(12)
onMouseOver="this.focus()"
onFocus="this.select()"
"onFocus="this.value='"

(13) 这个是选定的

document.selection.createRange()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>document.selection 的 createRange</title>
</head>
<body>

<div>请选中这里的部分文字。</div>
<div><input type="button" value="加粗" onclick="javascript:Bold();" /></div>
<script type="text/javascript" language="javascript">

</script>

</body>
</html>

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

14：涉及到数组的一个函数，还有event属性 prototype 使用等等

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <script language="javascript">

 var clubs=new Array("a","b","c","d","e","f");
var italyclubs=clubs.slice(2,5);
document.write("这个是数据截取后的东西 "+italyclubs);


  function catchEvent()
  {
  
  var eventSrcID=event.srcElement.id;
  var eventtype=event.type;
  var posX=event.clientX;
  var posY=event.clientY;

  window.status="鼠标的位置是"+posX+","+posY+"  "+eventSrcID+"捕获到了"+eventtype+"事件";

  }

var person=new Object();
person.name="开心";
person.sex="男";
person.age="23";

person.sayHello=function()
{
alert('大家好，我们的名称是 '+this.name);
}


function MyObject(name,size)
{
this.name=name;
this.size=size;
}
MyObject.prototype.tellSize=function()
{
alert("size of "+this.name+" is "+this.size);
}
var myObj=new MyObject("test",'77.5 meters');
myObj.tellSize();
MyObject.prototype.color="red";
var obj1=new MyObject();


 </script>
 </HEAD>

 <BODY >
  <input type="text" name="textfield" id="text" onclick="catchEvent()"><br><br><br>
  <input type="submit" name="submit" value="提交" id="button" onclick="catchEvent();">
   <input type="submit" name="submit" value="对象测试" id="button" onclick="person.sayHello()">
   <input type="submit" name="submit" value="prototype测试" id="button" onclick="person.sayHello()">

<div id="mydiv" >fffffff</div>


 </BODY>
</HTML>
<script language="javascript">
function clickHandler()
{
alert(this.id);
}
mydiv.onclick=clickHandler;

</script>

15:不通过拖拉滚动条实现滚动效果

      //查询元素向左右移动
     var scrollleftvalue=document.body.scrollLeft;
      function left()
      {
scrollleftvalue-=50;
document.body.scrollLeft=scrollleftvalue;
      }    
      //查询元素向右移动
      function right()
      {      
scrollleftvalue+=50;
document.body.scrollLeft=scrollleftvalue;
      }

16：固定坐标的案例

 <div class="loading" id="loading" style="position:relative; left:expression(this.offsetParent.scrollLeft+document.body.clientWidth-100); top:0px;  z-index:1;display:">