脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery使用技巧简单汇总,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
1.使用最新的jquery版本
觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本。
还有个建议是使用GOOGLE的cdn上的jquery文件,加载速度更快。猛击Google Libraries API 进入查看。
代码 代码如下:
<!-- Include a sPEcific version of jQuery -->
<script src="https://ajax.googleapis.COM/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
代码 代码如下:
$('li[data-selected="true"] a') // fancy, but slow
$('li.selected a') // Better
$('#elem') // Best
代码 代码如下:
VAR buttons = $('#navigation a.button');
代码 代码如下:
var $buttons = $('#navigation a.button');
var $buttons = $('#navigation a.button');
代码 代码如下:
// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
代码 代码如下:
for(var i=0;i<buttons.length;i++){
console.LOG(buttons[i]); // 是DOM元素,而不是jQuery对象!
}
代码 代码如下:
var FirstFour = buttons.slice(0,4);
代码 代码如下:
if(buttons){ // This is always true
// Do something
}
if(buttons.length){ // True only if buttons contains elements
// Do something
}
代码 代码如下:
$('#container li:first-child').selector // #container li:first-child
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)
代码 代码如下:
var container = $([]);
container.add(another_element);)
代码 代码如下:
(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
10.
11.})(jQuery);
12.
13.
14.
15.$('li:random').addClass('glow');
代码 代码如下:
$.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);
代码 代码如下:
$.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');
代码 代码如下:
<p id="panel" style="display:none">
<button>Close</button>
</p>
$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
10.});
代码 代码如下:
$('#panel').fadeIn(function(){
// Using $.proxy to bind this:
$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});
代码 代码如下:
console.log( $('*').length );
代码 代码如下:
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
代码 代码如下:
// 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});
代码 代码如下:
// 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);
}
1.使用最新的jquery版本
觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本。
还有个建议是使用google的cdn上的jquery文件,加载速度更快。猛击Google Libraries API 进入查看。
代码 代码如下:
<!-- Include a specific version of jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
代码 代码如下:
$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // Best
代码 代码如下:
var buttons = $('#navigation a.button');
代码 代码如下:
var $buttons = $('#navigation a.button');
var $buttons = $('#navigation a.button');
代码 代码如下:
// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
代码 代码如下:
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]); // 是DOM元素,而不是jQuery对象!
}
代码 代码如下:
var firstFour = buttons.slice(0,4);
代码 代码如下:
if(buttons){ // This is always true
// Do something
}
if(buttons.length){ // True only if buttons contains elements
// Do something
}
代码 代码如下:
$('#container li:first-child').selector // #container li:first-child
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)
代码 代码如下:
var container = $([]);
container.add(another_element);)
代码 代码如下:
(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
10.
11.})(jQuery);
12.
13.
14.
15.$('li:random').addClass('glow');
代码 代码如下:
$.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);
代码 代码如下:
$.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');
代码 代码如下:
<p id="panel" style="display:none">
<button>Close</button>
</p>
$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
10.});
代码 代码如下:
$('#panel').fadeIn(function(){
// Using $.proxy to bind this:
$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});
代码 代码如下:
console.log( $('*').length );
代码 代码如下:
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
代码 代码如下:
// 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});
代码 代码如下:
// 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);
}
觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的js实例教程-jQuery使用技巧简单汇总全部内容,希望文章能够帮你解决js实例教程-jQuery使用技巧简单汇总所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。