本帖最后由 大山哥哥 于 2017-9-25 16:05 编辑
在我们的课程中讲到过jQuery大多数的常规语法和用途，基本能够满足我们开发的需求，但是除了这些基本用法之外，jQuery里还有一些我们平常不太注意的用法，在这里简单的做一个介绍，希望同学们能够融会贯通，进一步提升自己的编码水平。
1、禁用页面右键菜单：有一些页面出于信息保护考虑，会禁用掉用户的右键菜单。
[JavaScript] 纯文本查看 复制代码 // 禁用右键
$(function() {
$(document).bind("contextmenu", function(e) {
return false;
});
});
2、快速回到顶部：当页面内容很多的时候，有时候浏览到底部的时候手动上滚很费时间，可以设置一个快速回到顶部的按钮或者超链接，让用户点击后回到页面开始的位置，实际上是做了一个动画。
[JavaScript] 纯文本查看 复制代码 // 返回顶部
$(function(){
$(".top").click(function () {
$(document.body).animate({scrollTop: 0}, 800);
});
});
3、jQuery的选择器很灵活，如果一个选择器（例如类选择器，元素选择器等）可以选中多个元素，也就是找到的是一个元素的集合，当我们调用函数的时候，相当于遍历了集合里的每个元素分别调用了函数，所以可以省掉不必要的each语句。例如，下面代码中的两个操作是等价的。
[JavaScript] 纯文本查看 复制代码 $(function(){
$("div").html("test");
$("div").each(function(){
$(this).html("test");
});
});
5、如果想要批量的判断当前页面中的链接是否是一个外部链接，可以使用hostname属性，然后修改超链接的属性。
[JavaScript] 纯文本查看 复制代码 <ul id="links">
<li><a href="demo1.html">The previous tip</a></li>
<li><a href="./demo2">The next tip</a></li>
<li><a href="http://www.baidu.com/">百度</a></li>
</ul>
// 遍历所有链接
$('#links a').each(function(){
if(this.hostname != location.hostname){
// 这是一个外部链接
$(this).append('<img src="error.jpg" />')
.attr('target','_blank');
}
});
6、如果我们不希望一段文本被别人选中并复制粘贴，可以禁用掉文本的可选中属性。例如一个p标签里写了一段文字，我们不想让用户复制，可以这么写代码来屏蔽掉用户的操作。
[JavaScript] 纯文本查看 复制代码 $(function(){
$("p").attr("unselectable", "on")
.css("user-select", "none")
.on("selectstart", false);
});
7、如果想阻止浏览器事件执行默认行为，例如超链接跳转等，可以使用到事件绑定的function中的event参数进行拦截。
[JavaScript] 纯文本查看 复制代码 $("a").click(function (e) {
e.preventDefault();
});
8、属性选择器可以并列选择多个属性，不仅仅只能写一个中括号来进行选择。例如有这么两个div：
[JavaScript] 纯文本查看 复制代码 <div aaa="111" bbb="222">aaaaa</div>
<div bbb="222">bbbbb</div>
我们想找到第一个div，就可以这么来写选择器：
[JavaScript] 纯文本查看 复制代码 $(function(){
$("div[aaa='111'][bbb='222']").html("test");
});
9、监听不存在的元素上的事件,jQuery拥有一个先进的事件处理机制，通过on()方法可以监听还不存在的事件。 这是因为on方法可以传递一个元素的子元素选择器作为参数。例如我们有如下一个列表：
[JavaScript] 纯文本查看 复制代码 <ul id="testList"> <li>Old</li> <li>Old</li> <li>Old</li> <li>Old</li> </ul>
我们可以使用下面的代码来添加一个新的li标签到列表，并且设置点击事件。
[JavaScript] 纯文本查看 复制代码 $(function(){
var list = $('#testList');
list.on('click','li',function(){
$(this).remove();
});
list.append('<li>这是通过API添加的条目，点击消失</li>');
});
[JavaScript] 纯文本查看 复制代码 $("#button1").one("click",function(){
alert("点一次之后点击事件就失效了");
});
OK，灵活运用这些小技巧，可以帮助你处理一些比较特殊的需求，节省很多时间，希望这些小技巧可以帮助到大家。
| 
收藏
淘帖
踩
