华山资源网

jQuery中的100个技巧汇总
网络编程 2024/11/15 佚名
3 1

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

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

<script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">



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


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"it's a div");
// Does it have the bigbox class"it has the bigbox class!");
// Is it visible"it is hidden!");
// Animating
elem.animate({'width':200},1);
// is it animated"it is animated!");






其中判断是否为动画我觉得非常不错。


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


 通过使用$("*").length（）;方法可以判断网页的元素数量。





 // How many elements does your page have"htmlcode">



/ 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我们可以判断一个链接是否是外部的，并来添加一个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="/UploadFiles/2021-04-02/external.png">


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>






这样，内容就不能被选择啦。


14.从CDN中引入jQuery，这样的方法可以提高我们网站的性能，并且引入最新的版本也是一个不错的主意。


下面会介绍四种不同的方法。





<!-- Case 1 - requesting jQuery from the official CDN -->
<script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">


15.保证最小的DOM操作。


我们知道js操作DOM是非常浪费资源的，我们可以看看下面的例子。





CODE
// Bad
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// Good
var elem = $('#elem'),
 arr = [];
for(var i = 0; i < 100; i++){
 arr.push('<li>element '+i+'</li>');
}
elem.append(arr.join(''));






16.更方便的分解URL。


也许你会使用正则表达式来解析URL，但这绝对不是一种好的方法，我们可以借用a标签来实现它。





// You want to parse this address into parts:
var url = 'http://tutorialzine.com/books/jquery-trickshots"htmlcode">



// Print the IDs of all LI items
$('#colors li').each(function(){
 // Access the ID directly, instead
 // of using jQuery's $(this).attr('id')
 log(this.id);
});






18.最优化你的选择器





// Let's try some benchmarks!
var iterations = 10000, i;
timer('Fancy');
for(i=0; i < iterations; i++){
 // This falls back to a SLOW JavaScript dom traversal
 $('#peanutButter div:first');
}
timer_result('Fancy');
timer('Parent-child');
for(i=0; i < iterations; i++){
 // Better, but still slow
 $('#peanutButter div');
}
timer_result('Parent-child');
timer('Parent-child by class');
for(i=0; i < iterations; i++){
 // Some browsers are a bit faster on this one
 $('#peanutButter .jellyTime')






19.缓存你的selector。





// Bad:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// Good:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// Alternatively:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();






20.对于重复的函数只定义一次


如果你追求代码的更高性能，那么当你设置事件监听程序时必须小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。





$(document).ready(function(){
 function showMenu(){
 alert('Showing menu!');
 // Doing something complex here
 }
 $('#menuButton').click(showMenu);
 $('#menuLink').click(showMenu);
});






21.像对待数组一样地对待jQuery对象


由于jQuery对象有index值和长度，所以这意味着我们可以把对象当作普通的数组对待。这样也会有更好地性能。





var arr = $('li'),
 iterations = 100000;
timer('Native Loop');
for(var z=0;z<iterations;z++){
 var length = arr.length;
 for(var i=0; i < length; i++){
 arr[i];
 }
}
timer_result('Native Loop');
timer('jQuery Each');
for(z=0;z<iterations;z++){
 arr.each(function(i, val) {
 this;
 });
}
timer_result('jQuery Each');






未完待续...


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！




                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.eoogi.com
                                            
                                                华山资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            120,135影音资源
                                        

                                        

                                            344,641技术资源
                                        

                                        

                                            22,817软件资源
                                        

                                        

                                            435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com