`

javascript小技巧

    博客分类:
  • js
阅读更多

(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">
<!--
function Bold()
{
var r = document.selection.createRange();
r.execCommand("Bold");
}
-->
</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:">
       

  

分享到:
评论

相关推荐

    JavaScript小技巧全集

    这篇“JavaScript小技巧全集”涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,编写出更简洁、更高效的代码。以下是一些重要的JavaScript知识点,基于描述中的提示: 1. **变量声明与作用域**: - `let`、`...

    JavaScript小技巧全集 JavaScript教程 JavaScript源代码集

    这个“JavaScript小技巧全集”提供了丰富的教程和源代码,旨在帮助开发者深入理解和掌握JavaScript的各种实用技巧。 首先,我们来看看JavaScript的基本语法。JavaScript是一种弱类型、解释型的语言,它的变量声明不...

    javaScript小技巧。

    根据提供的文件内容,我们可以总结出以下几个JavaScript小技巧及相关知识点: ### 1. 引入外部JavaScript文件 在HTML文档中,可以通过`&lt;script&gt;`标签引入外部JavaScript文件来执行脚本代码。例如: ```html ...

    1000个javascript小技巧

    这本名为"1000个JavaScript小技巧"的资源集锦涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,解决实际问题。以下是一些关键的知识点,将从这1000个小技巧中提炼出来: 1. **变量声明与作用域**:了解`var`、`...

    Javascript小技巧之生成html元素.docx

    7. **JavaScript编程的10个有用小技巧**和**12个特别有用的JavaScript小技巧【推举】**:这两篇文章分别分享了10个和12个实用的JavaScript编程技巧,是进阶学习的好资源。 总的来说,掌握生成HTML元素的技巧对...

    40种javascript小技巧

    ### JavaScript小技巧详解 #### 技巧1:屏蔽鼠标右键 通过在HTML元素上设置`oncontextmenu="window.event.returnValue=false"`属性,可以禁止用户在该元素上使用鼠标右键。例如: ```html ;"&gt; 无法右击此表格 ```...

    javascript小技巧全集

    这个"JavaScript小技巧全集"涵盖了各种实用的编程技巧,旨在帮助开发者提升效率,编写出更优雅、性能更好的代码。无论您是在Windows、MacOS还是Linux等任何操作系统上工作,这些技巧都是通用的。 一、函数与闭包 1....

    JavaScript小技巧

    这里我们将深入探讨一些常见的JavaScript小技巧。 1. **事件处理**:在JavaScript中,`event`对象提供了关于当前事件的信息,如`event.srcElement`可以获取触发事件的元素,而`event.keyCode`则用于识别键盘按键。`...

    JavaScript小技巧整理篇(非常全).pdf

    ### JavaScript小技巧整理篇知识点详述 #### 一、引言 本文档旨在总结一系列JavaScript编程中的实用技巧,涵盖从基本操作到高级功能的应用。这些技巧不仅有助于提升开发效率,还能帮助开发者更好地理解和掌握...

    javascript小技巧合集

    标题:javascript小技巧合集 描述:本文将详细介绍一系列实用的JavaScript技巧,这些技巧涵盖了从基本的用户交互到更复杂的页面控制,旨在帮助开发者优化用户体验,增强网站安全性,并提升开发效率。 ### 重要技巧...

    常用的一些javascript小技巧

    ### 常用的一些JavaScript小技巧详解 在前端开发领域,JavaScript是不可或缺的编程语言,其灵活多变的特性使得开发者能够实现丰富的交互效果。本文将深入探讨一系列实用的JavaScript小技巧,帮助开发者提高编码效率...

    javascript小技巧归纳

    根据提供的文件信息,我们...以上列举的各项JavaScript小技巧涵盖了从基本的用户交互到更高级的功能实现,对于提高网站的用户体验及安全性都有着重要作用。开发者可以根据实际需求灵活运用这些技巧来优化自己的项目。

    JavaScript小技巧全集.doc

    本文将探讨几个实用的JavaScript小技巧,包括鼠标控制、显示日期和时间,以及利用历史记录和前进功能。 首先,让我们来看如何用鼠标控制Web页面。在JavaScript中,`onMouseOver`事件是一个非常有用的特性,允许我们...

Global site tag (gtag.js) - Google Analytics