6月15号学习jquery(不常用的事件) -

xjwolaile

浏览: 343322 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

6月15号学习jquery(不常用的事件)

博客分类：

前端技术

今天的学习

1、event.preventDefault()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
  });
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>
</html>

$("a").click(function(event){
event.preventDefault();
});

阻止事件的默认动作防止链接打开 URL a链接进入网站

2、event.type

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").bind('click dblclick mouseover mouseout',function(event){
    $("div").html("事件：" + event.type);
  });
});
</script>
</head>

<body>
<p>该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果您触发了其中的一个事件，下面的 div 中会显示出事件的类型。</p>
<div></div>
</body>
</html>

$("p").bind('click dblclick mouseover mouseout',function(event){
$("div").html("Event: " + event.type);
});

显示触发了哪种类型的事件告诉我们事件是什么样的类型

3、event.which

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
  });
});
</script>
</head>
<body>

请随意键入一些字符：<input type="text" />
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
<div />

</body>
</html>

显示按了哪个键和按键的编号是多少

4、one()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
</body>
</html>

$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
当点击 p 元素时，增加该元素的文本大小

5、trigger()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>

$("button").click(function(){
$("input").trigger("select");
});

触发 input 元素的 select 事件当点击了按钮以后就会自动选定input里面的信息一般用于复制当内容很多的设置一个这样按钮点击一下直接复制内容就可以了

今天晚上将最大一些的图片切好了明天完成两个页面的制作

分享到：

6月16号工作 | 6月14号学习jquery(选择器)

2013-06-16 01:50
浏览 841
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

6月15号学习jquery(不常用的事件)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

6月15号学习jquery(不常用的事件)

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

使用模版的基本尝试-20131209

最近访客更多访客>>