jQuery基本选择器选择元素使用介绍(2)_H5之家 - 中国HTML5教程资源分享第一站

$.cssHooks['borderRadius'] = {
get: function(elem, computed, extra){
// Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
},
set: function(elem, value){
// Set the appropriate CSS3 property
}
};
10.
11.// Use it without worrying which property the browser actually understands:
12.$('#rect').css('borderRadius',5);

8.使用自定义的Easing（缓动动画效果）函数
easing plugin是用的非常多的函数，可以实现不少华丽的效果。当内置的缓动效果无法满足你的需求时，还可以自定义缓动函数。

代码如下:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9.$.proxy()的使用
关于$.proxy()，明河曾经详细介绍过，传送门在此《jquery1.4教程三：新增方法教程（3）》。
jquery有个让人头疼的地方，回调函数过多，上下文this总是在变化着，有时候我们需要控制this的指向，这时候就需要$.proxy()方法。

代码如下:

<div >
<button>Close</button>
</div>
$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
10.});

嵌套的二个回调函数this指向是不同的！现在我们希望this的指向是#panel的元素。代码如下：

代码如下:

$('#panel').fadeIn(function(){
// Using $.proxy to bind this:

$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});

10.快速获取节点数
这是个常用的技巧，代码如下：

代码如下:

console.log( $('*').length );

11.构建个jquery插件

代码如下:

(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);

关于jquery插件的构建，明河曾发过系列教程，传送门：制作jquery文字提示插件—jquery插件实战教程（1）。
这里就不再详述。

12.设置ajax全局事件
关于ajax全局事件，明河曾发过完整的介绍文章，传送门：《jquery的ajax全局事件详解—明河谈jquery》。

13.延迟动画

代码如下:

// This is wrong:
$('#elem').animate({width:200},function(){
setTimeout(function(){
$('#elem').animate({marginTop:100});
},2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

当存在多个animate动画时，如何处理动画的执行顺序是个烦心事，原文作者是建议使用delay()函数，如上面的代码，但明河的建议是使用queue()方法，因为delay你要考虑延迟多少时间，而queue没有这个问题，进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jquery。

15.jquery的本地存储
本地存储在现在web应用中使用越来越频繁，jquery有个专门用于本地存储的插件叫$.jStorage jQuery plugin。

代码如下:

// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
}

[2]JQuery 图片的展开和伸缩实例讲解

来源: 互联网发布时间: 2013-12-24

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#img1
{
width:400px;
height: 400px;
border: solid 1px #ccc;
display:none;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
$('#img1').show(5000); //图片的展开
})
$('#Button2').click(function () {
$('#img1').hide(5000); //图片的伸缩
})
})
</script>
</head>
<body>
<img src="images/1.jpg" />
<input type="button" value="展开图片"/>
<input type="button" value="收缩图片"/>
</body>
</html>

[3]jQuery基本选择器选择元素使用介绍

来源: 互联网发布时间: 2013-12-24

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
.clsFrame{width:300px;height:100px}
.clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}
.clsOne{background-color:#eee}
</style>
<script type="text/javascript">
$(function () { //ID匹配元素
$('#divOne').css('display', 'block');
})
$(function () { //元素名匹配元素
$('div span').css('display', 'block');
})
$(function () { //类匹配元素
$('.clsFrame .clsOne').css('display', 'block');
})
$(function () { //匹配所有元素
$('*').css('display', 'block');
})
$(function () { //合并匹配元素
$('#divOne,span').css('display', 'block');
})
</script>
</head>
<body>
<div >
<div>
ID</div>
<div >
CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>