文档章节

Js学习笔记一(鼠标事件.....)

hphper
 hphper
发布于 2015/05/30 12:54
字数 1372
阅读 25
收藏 0

1.encodeURI与decodeURI()转化url为有效的url(能被识别)

Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui"

document.write(encodeURI(url));

http://news.baidu.com/p.php?id='%E6%B5%8B%E8%AF%95'&%E5%A7%93%E5%90%8D=hkui

就是把汉字编码

document.write(decodeURI($url));

解码还原

2.encodeURIComponent()与decodeURIComponent()

将字符窜转化为有效的url组件

Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui"

encodeURIComponent(url)

http%3A%2F%2Fnews.baidu.com%2Fp.php%3Fid%3D'%E6%B5%8B%E8%AF%95'%26%E5%A7%93%E5%90%8D%3Dhkui

同理decodeURIComponent()解码

encodeURI与encodeURIComponent()

://->%3A%2F%2F 可知 :->%3A      /-> %2F 

?->%3   =->%3D    &->%26

 2.js外部引入时延迟加载的两种方式

①<script src=’1.js’ type=’text/javascript’ defer ></script>

 利用defer属性,现在大多数浏览器也支持了

这时就是当html文当全部加载完再加载1.js

‚在引入文件中用window.onload=function(){}

包裹代码

 实例代码:

1.Html<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="1.js" type="text/javascript"  ></script></head><body><div id='div'>div11111111111111</div></body></html>

1.js如果直接

 var div1=document.getElementById('div');

 alert(div1.innerHTML);

就会由于按顺序执行,先执行1.js时找不到id=div1的这个元素报错

这时必须给1.html代码的script加上defer属性(浏览器支持)或者在1.js里改为

window.onload=function(){var div1=document.getElementById('div');
alert(div1.innerHTML);
}

 才行

 4.把函数声明放在window.onload=function(){}内部时问题

 代码示例: 

<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>2</title><script type="text/javascript" src="2.js"></script></head><body><input type="button" value='click Me' onClick="say()"></body></html>

2.js代码

window.onload=function(){function say(){
   alert('hello');
}

}

 则会出错 说say未定义

 为何?

 为何say函数未被加载呢?

 Onload()在文档或图像加载完全后再执行 

Say时它内部申明的函数,它执行完毕后,在单独执行say,这时say已失效,与php不同 

5.Js鼠标事件

 对于mousedownmouseup事件来说,在其event对象上存在一个button属性,表示释放或按下鼠标的某个按键(左中右等)

 非ie中的button属性

 0->左键

 1->中键

 2->右键

 Ie中的button属性

 0->没有按下

 1->左键

2->右键

 3->同时左右键 

4->中键

 5->左中

 6->右中

 7->左中右

 但一般就只有左,,右单独使用

 解决兼容的代码

document.onmouseup=function(){if(arguments[0]){alert( window.event.button);}else{switch(window.event.button) {  
     case 1 :alert(0);break; 
     case 4 :alert(1);break;  
     case 2 :alert(2);break;
    }

}

}

或者传一个参数,用此参数代替arguments[0]

 主要利用ie与非ie在处理时间对象的差异:

 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息,包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

 事件对象,我们一般称作为 event 对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的

 看以下代码: 

document.onmouseup = function () {
 alert(arguments.length);
 alert(arguments[0]); 
}

 在非ie

 

分别弹出1object mouseEvent

 

而在ie中是0undefined

 

利用此差异即可所以传递的参数evt代替arguments[0];

 

禁止鼠标右键

 

function right(){

 

if(event.button==2){

 

event.returnValue=false;

 

alert("禁止使用鼠标右键");

 

}

 

}

 

document.onmousedown=right;

6.

所有JScript固有对象都有只读的prototype属性。可以像下面那样为原型添加功能,但该对象不能被赋予不同的原型。然而用户定义的对象可以被赋予新的原型

<script type="text/javascript">

function arr_max(){

var i,max1=this[0];

for(i=1;i<this.length;i++){

if(max1<this[i]) max1=this[i];

}

return max1+1;

}

Array.prototype.max=arr_max;

var x=new Array(1,2,3,4,5,6,7);

alert(x.max());

</script>

 

 

7.

Constructor属性是所有具有prototype的对象的成员

它们包括除GlobalMath对象以外的所有JScript固有对象

<script type="text/javascript">

x="hi";

//x=new String("Hi");

if(x.constructor==String){

alert('ok');

}   //均是ok

 

function myF(){

this.name='ok';

this.age=12;

}

y=new myF;

alert(y.constructor==myF);

</script>

8.

function test(){

alert("test");

}

var bt=document.getElementById('bt');

   //bt.onclick=test;

   bt.addEventListener('click',test,false);

 

Ie不支持这个方法

 

9.event对象的属性

<script type="text/javascript">

document.onkeydown=function(){

if(window.event.ctrlKey&&window.event.shiftKey&&window.event.altKey){

alert("你同时按下了crtl,shif,alt");

 

}

}

</script>

Button属性,参见5,此属性仅仅适用于onmousedown/up/move

对于其他事件,无论状态如何均返回0

 

document.onmousedown=function(){

if(event.button==2){

alert("百度欢迎你!");

window.open("http://www.baidu.com/");

}

 

clientX 

clientY

获取鼠标在浏览器窗口的x,y坐标(只读属性)

应用:图片随鼠标移动而移动

document.onmouseup = function () {


 alert(arguments.length);


 alert(arguments[0]); 


 }

 

Js里用marginLeft表示style里的”margin-left”

left表示left的值带px 比如10px

pixelLeft 表示不带pxleft值比如10px 10

srcElement

<div id="t" style=" position:relative;left:130px; top:140px; width:50px; height:50px; border:solid 2px #00F"></div>

<script type="text/javascript">

var t=document.getElementById('t');

document.onmousedown=function(evt){

alert(evt.srcElement.id);

}

通过事件的srcElement获取当前事件的对象

代码示例:

<style>.move_out{position: relative;cursor: hand;font-family:"华文行楷";}</style></head><body><script type="text/javascript">var move_out=false;var z,x,y;function move(){ if (event.button==move_out) {

  z.style.pixelLeft=temp1+event.clientX-x;

  z.style.pixelTop=temp2+event.clientY-y;  return false;

 }

 

}function down(){if(event.srcElement.className=="move_out"){

   move_out=true;

   z=event.srcElement;

   temp1=z.style.pixelLeft;

   temp2=z.style.pixelTop;

   x=event.clientX;

   y=event.clientY;

   document.onmousemove=move;

 }else{move_out=false;}

}

document.onmousedown=down;</script><font color=’0000ff’ size=10 class="move_out">php100中文网</font></body>

 

代码说明,只要执行down一次(上面部分)z,x,y等变量都是以全局变量存在了,在函数里声明变量得加var 否则就是全局的了

onmousemovebutton属性均为0

而在mousedown/up

则根据鼠标按键了,按了一次状态不变知道下次改变为止

 

 

 

 

 

 

本文转载自:http://www.cnblogs.com/HKUI/p/3237123.html

上一篇: linux学习基本
下一篇: linux学习基本
hphper

hphper

粉丝 13
博文 2
码字总数 1603
作品 0
朝阳
程序员
私信 提问
JavaScript学习笔记(一)——JS基础知识介绍

术语解释 Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为...

长平狐
2013/01/06
145
0
JavaScript零基础入门——(十三)JavaScript的事件

JavaScript零基础入门——(十三)JavaScript的事件 大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了...

JandenMa
2018/07/01
61
0
day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03js学习笔记03_js的事件、js的BOM、js的DOM ============================================================================= 涉及到的知识点有: ==================================......

黑泽明军
2018/04/19
0
0
Ext JS 5 对平板的支持

Ext JS 已经被公认为桌面web应用的领衔框架. 计算机应用市场,无论是在个人还是企业领域,都因为平板开始挑战全球个人PC的销售量而变得云诡波谲起来. Sencha 认识到了这种变化,并在其 Ext ...

oschina
2014/07/30
4.8K
17
JavaScript的基本使用

一、JavaScript的简单介绍   JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaS...

码农47
2018/03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
7
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
9
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部