jQuery 中的 39 个技巧

Posted 2020-08-23

1.当document文档就绪时执行javascript代码。

我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

// Different ways to achieve the Document Ready event

// With jQuery
$(document).ready(function(){ /* ... */});

// Short jQuery
$(function(){ /* ... */});

// Without jQuery (doesn‘t work in older IE versions)
document.addEventListener(‘DOMContentLoaded‘,function(){
// Your code goes here
});

// The Trickshot (works everywhere):

r(function(){
alert(‘DOM Ready!‘);
})

function r(f){/in/.test(document.readyState)?setTimeout(‘r(‘+f+‘)‘,9):f()}

</script>
2.使用route。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

var route = {
_routes : {}, // The routes will be stored here

add : function(url, action){
this._routes[url] = action;
},

run : function(){
jQuery.each(this._routes, function(pattern){
if(location.href.match(pattern)){
// "this" points to the function to be executed
this();
}
});
}
}

// Will execute only on this page:
route.add(‘002.html‘, function(){
alert(‘Hello there!‘)
});

route.add(‘products.html‘, function(){
alert("this won‘t be executed : (")
});

// You can even use regex-es:
route.add(‘.*.html‘, function(){
alert(‘This is using a regex!‘)
});

route.run();

</script>
3.使用JavaScript中的AND技巧。

使用&&操作符的特点是如果操作符左边的表达式是false，那么它就不会再判断操作符右边的表达式了。所以：

// Instead of writing this:
if($(‘#elem‘).length){
// do something
}

// You can write this:

$(‘#elem‘).length && log("doing something");
4. is()方法比你想象的更为强大。

下面举几个例子，我们先写一个id为elem的div。js代码如下：

// First, cache the element into a variable:
var elem = $(‘#elem‘);

// Is this a div?
elem.is(‘div‘) && log("it‘s a div");

// Does it have the bigbox class?
elem.is(‘.bigbox‘) && log("it has the bigbox class!");

// Is it visible? (we are hiding it in this example)
elem.is(‘:not(:visible)‘) && log("it is hidden!");

// Animating
elem.animate({‘width‘:200},1);

// is it animated?
elem.is(‘:animated‘) && log("it is animated!");
其中判断是否为动画我觉得非常不错。

5.判断你的网页一共有多少元素。

通过使用$(“*”).length（）;万花楼论坛方法可以判断网页的元素数量。

// How many elements does your page have?
log(‘This page has ‘ + $(‘*‘).length + ‘ elements!‘);
6.使用length()属性很笨重，下面我们使用exist()方法。

/ Old way
log($(‘#elem‘).length == 1 ? "exists!" : "doesn‘t exist!");

// Trickshot:

jQuery.fn.exists = function(){ return this.length > 0; }

log($(‘#elem‘).exists() ? "exists!" : "doesn‘t exist!");
7.jQuery方法$()实际上是拥有两个参数的，你知道第二个参数的作用吗？

// Select an element. The second argument is context to limit the search
// You can use a selector, jQuery object or dom element

$(‘li‘,‘#firstList‘).each(function(){
log($(this).html());
});

log(‘-----‘);

// Create an element. The second argument is an
// object with jQuery methods to be called

var div = $(‘<div>‘,{
"class": "bigBlue",
"css": {
"background-color":"purple"
},
"width" : 20,
"height": 20,
"animate" : { // You can use any jQuery method as a property!
"width": 200,
"height":50
}
});

div.appendTo(‘#result‘);
8.使用jQuery我们可以判断一个链接是否是外部的，万花楼论坛 www.whlwang.com并来添加一个icon在非外部链接中，且确定打开方式。

这里用到了hostname属性。

<ul id="links">
<li><a href="007.html">The previous tip</a></li>
<li><a href="./009.html">The next tip</a></li>
<li><a href="http://www.google.com/">Google</a></li>
</ul>

// Loop through all the links
$(‘#links a‘).each(function(){

if(this.hostname != location.hostname){
// The link is external
$(this).append(‘<img src="assets/img/external.png" />‘)
.attr(‘target‘,‘_blank‘);
}

});
9.jQuery中的end()方法可以使你的jQuery链更加高效。

<ul id="meals"> <li> <ul class="breakfast"> <li class="eggs">No</li> <li class="toast">No</li> <li class="juice">No</li> </ul> </li> </ul>
// Here is how it is used:

var breakfast = $(‘#meals .breakfast‘);

breakfast.find(‘.eggs‘).text(‘Yes‘)
.end() // back to breakfast
.find(‘.toast‘).text(‘Yes‘)
.end()
.find(‘.juice‘).toggleClass(‘juice coffee‘).text(‘Yes‘);

breakfast.find(‘li‘).each(function(){
log(this.className + ‘: ‘ + this.textContent)
});
10.也许你希望你的web 应用感觉更像原生的，那么你可以阻止contextmenu默认事件。

<script>
// Prevent right clicking on this page
$(function(){
$(document).on("contextmenu",function(e){
e.preventDefault();
});
});
</script>
11.一些站点可能会使你的网页在一个bar下面，即我们所看到在下面的网页是iframe标签中的，我们可以这样解决。

// Here is how it is used:

if(window != window.top){
window.top.location = window.location;
}
else{
alert(‘This page is not displayed in a frame. Open 011.html to see it in action.‘);
}
12.你的内联样式表并不是被设置为不可改变的，如下：

// Make the stylesheet visible and editable
$(‘#regular-style-block‘).css({‘display‘:‘block‘, ‘white-space‘:‘pre‘})
.attr(‘contentEditable‘,true);
这样即可改变内联样式了。

13.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情，我们可以这么做：

<p class="descr">In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.</p>

<script>
// Prevent text from being selected
$(function(){
$(‘p.descr‘).attr(‘unselectable‘, ‘on‘)
.css(‘user-select‘, ‘none‘)
.on(‘selectstart‘, false);
});
</script>