咱们为何使用jQuery库呢?缘由之一就在于咱们可使jQuery代码在各类不一样的浏览器和存在bug的浏览器上完美运行。javascript
<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>
<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>
使用&&操做符的特色是若是操做符左边的表达式是false,那么它就不会再判断操做符右边的表达式了。因此:php
// Instead of writing this:
if($('#elem').length){ // do something } // You can write this: $('#elem').length && log("doing something");
下面举几个例子,咱们先写一个id为elem的div。js代码以下:css
// 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!");
其中判断是否为动画我以为很是不错。html
经过使用$(“*”).length();方法能够判断网页的元素数量。java
// How many elements does your page have?
log('This page has ' + $('*').length + ' elements!');
/ 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!");
// 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');
这里用到了hostname属性。jquery
<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'); } });
<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) });
<script> // Prevent right clicking on this page $(function(){ $(document).on("contextmenu",function(e){ e.preventDefault(); }); }); </script>
// 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.'); }
// Make the stylesheet visible and editable
$('#regular-style-block').css({'display':'block', 'white-space':'pre'}) .attr('contentEditable',true);
这样便可改变内联样式了。web
<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>
这样,内容就不能被选择啦。ajax
下面会介绍四种不一样的方法。正则表达式
<!-- Case 1 - requesting jQuery from the official CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- Case 2 - requesting jQuery from Google's CDN (notice the protocol) --> <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> --> <!-- Case 3 - requesting the latest minor 1.8.x version (only cached for an hour) --> <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script> --> <!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --> <!-- <script src="http://code.jquery.com/jquery.min.js"></script> -->
咱们知道js操做DOM是很是浪费资源的,咱们能够看看下面的例子。json
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(''));
也许你会使用正则表达式来解析URL,但这绝对不是一种好的方法,咱们能够借用a标签来实现它。
// You want to parse this address into parts:
var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12#comments';
// The trickshot: var a = $('<a>',{ href: url }); log('Host name: ' + a.prop('hostname')); log('Path: ' + a.prop('pathname')); log('Query: ' + a.prop('search')); log('Protocol: ' + a.prop('protocol')); log('Hash: ' + a.prop('hash'));
jQuery背负的太多,这即是缘由,你能够用通常的js。
// 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); });
// 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')
// 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();
若是你追求代码的更高性能,那么当你设置事件监听程序时必须当心,只定义一次函数而后把它的名字做为事件处理程序传递是不错的方法。
$(document).ready(function(){ function showMenu(){ alert('Showing menu!'); // Doing something complex here } $('#menuButton').click(showMenu); $('#menuLink').click(showMenu); });
因为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');
修改一个dom元素要求网页重绘,这个代价是高昂的,因此若是你想要再提升性能,就能够尝试着当对一个元素进行大量修改时先从页面中分离这个元素,修改完以后再添加到页面。
// Modifying in place
var elem = $('#elem'); timer('In place'); for(i=0; i < iterations; i++){ elem.width(Math.round(100*Math.random())); elem.height(Math.round(100*Math.random())); } timer_result('In place'); var parent = elem.parent(); // Detaching first timer('Detached'); elem.detach(); for(i=0; i < iterations; i++){ elem.width(Math.round(100*Math.random())); elem.height(Math.round(100*Math.random())); } elem.appendTo(parent); timer_result('Detached');
咱们已经习惯了把咱们全部的代码都放在ready的事件处理程序中,可是,若是你的html页面很庞大,decument ready恐怕会被延迟了,因此对于一些咱们不但愿ready后才能够触发的事件能够放在html的head元素中。
<script> // jQuery is loaded at this point. We can use // event delegation right away to bind events // even before $(document).ready: $(document).on('click', '#clickMe', function(){ alert('Hit view source and see how this is made'); }); $(document).ready(function(){ // This is where you would usually bind event handlers, // but as we are using delegation, there is no need to. // $('#clickMe').click(function(){ alert('Hey!'); }); }); // Note: You should place your script tags at the bottom of the page. // I have included them in the head only to demonstrate that we can bind // events before document ready and before the elements are created. </script>
咱们以前提到过,操做dom是很是慢的,因此当添加多个元素的样式时建立一个style元素并添加到document中是更好的作法。
<ul id="testList"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> var style = $('<style>'); // Try commenting out this line, or change the color: style.text('#testList li{ color:red;}'); // Placing it before the result section so it affects the elements style.prependTo('#result');
现代的web apps很是的依赖js,这里的一个技巧就是只有当js可用时才能显示特定的元素。看下面的代码。
$(document).ready(function(){ $('html').addClass('JS'); }); html.JS #message { display:block; } #message {display:none;}
这样,只有js可用的时候id为message的元素才会显示;若是不支持js,则该元素不会显示。
jQuery拥有一个先进的事件处理机制,经过on()方法能够监听还不存在的事件。 这是由于on方法能够传递一个元素的子元素选择器做为参数。看下面的例子:
<ul id="testList"> <li>Old</li> <li>Old</li> <li>Old</li> <li>Old</li> </ul>
var list = $('#testList'); // Binding an event on the list, but listening for events on the li items: list.on('click','li',function(){ $(this).remove(); }); // This allows us to create li elements at a later time, // while keeping the functionality in the event listener list.append('<li>New item (click me!)</li>');
这样,即便li是后建立的,也能够经过on()方法来监听。
有时,咱们只须要绑定只运行一次的事件处理程序。那么one()方法是一个不错的选择,经过它你就能够高枕无忧了。
<button id="press">Press me!</ul> var press = $('#press'); // There is a method that does exactly that, the one(): press.one('click',function(){ alert('This alert will pop up only once'); }); // What this method does, is call on() behind the scenes, // with a 1 as the last argument: // press.on('click',null,null,function(){alert('I am the one and only!');}, 1);
咱们能够经过使用trigger模拟触发一个click事件。
<button id="press">Press me!</ul> var press = $('#press'); // Just a regular event listener: press.on('click',function(e, how){ how = how || ''; alert('The buton was clicked ' + how + '!'); }); // Trigger the click event press.trigger('click'); // Trigger it with an argument press.trigger('click',['fast']);
使用触摸事件和相关的鼠标事件并无太多不一样,可是你得有一个方便的移动设备来测试会更好。看下面这个例子。
// Define some variables
var ball = $('<div id="ball"></div>').appendTo('body'), startPosition = {}, elementPosition = {}; // Listen for mouse and touch events ball.on('mousedown touchstart',function(e){ e.preventDefault(); // Normalizing the touch event object e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; // Recording current positions startPosition = {x: e.pageX, y: e.pageY}; elementPosition = {x: ball.offset().left, y: ball.offset().top}; // These event listeners will be removed later ball.on('mousemove.rem touchmove.rem',function(e){ e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; ball.css({ top:elementPosition.y + (e.pageY - startPosition.y), left: elementPosition.x + (e.pageX - startPosition.x), }); }); }); ball.on('mouseup touchend',function(){ // Removing the heavy *move listeners ball.off('.rem'); });
在jQuery1.7版本时对事件处理进行了简化,看看下面的例子吧。
<div id="holder"> <button id="button1">1</button> <button id="button2">2</button> <button id="button3">3</button> <button id="button4">4</button> <button id="clear" style="float: right;">Clear</button> </div> // Lets cache some selectors var button1 = $('#button1'), button2 = $('#button2'), button3 = $('#button3'), button4 = $('#button4'), clear = $('#clear'), holder = $('#holder'); // Case 1: Direct event handling button1.on('click',function(){ log('Click'); }); // Case 2: Direct event handling of multiple events button2.on('mouseenter mouseleave',function(){ log('In/Out'); }); // Case 3: Data passing button3.on('click', Math.round(Math.random()*20), function(e){ // This will print the same number over and over again, // as the random number above is generated only once: log('Random number: ' + e.data); }); // Case 4: Events with a namespace button4.on('click.temp', function(e){ log('Temp event!'); }); button2.on('click.temp', function(e){ log('Temp event!'); }); // Case 5: Using event delegation $('#holder').on('click', '#clear', function(){ log.clear(); }); // Case 6: Passing an event map var t; // timer clear.on({ 'mousedown':function(){ t = new Date(); }, 'mouseup':function(){ if(new Date() - t > 1000){ // The button has been held pressed // for more than a second. Turn off // the temp events $('button').off('.temp'); alert('The .temp events were cleared!'); } } });
咱们知道js中可使用preventDefault()方法来阻止默认行为,可是jQuery对此提供了更简单的方法。以下:
<a href="http://google.com/" id="goToGoogle">Go To Google</a> $('#goToGoogle').click(false);
对一个元素绑定多个事件处理程序并不常见,而使用event.result更能够将多个事件处理程序联系起来。看下面的例子。
<button id="press">点击</button> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> var press = $('#press'); press.on('click',function(){ return 'Hip'; }); // The second event listener has access // to what was returned from the first press.on('click',function(e){ console.log(e.result + ' Hop!'); }); </script>
这样,控制台会输出Hip Hop!
你可使用on()方法建立本身喜欢的事件名称,而后经过trigger来触发。举例以下:
<button id="button1">Jump</button> <button id="button2">Punch</button> <button id="button3">Click</button> <button id="clear" style="float: right;">Clear</button> <div id="eventDiv"></div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> var button1 = $('#button1'), button2 = $('#button2'), button3 = $('#button3'), clear = $('#clear'), div = $('#eventDiv'); div.on({ jump : function(){ alert('Jumped!'); }, punch : function(e,data){ alert('Punched '+data+'!'); }, click : function(){ alert('Simulated click!'); } }); button1.click(function(){ div.trigger('jump'); }); button2.click(function(){ // Pass data along with the event div.trigger('punch',['hard']); }); button3.click(function(){ div.trigger('click'); }); clear.click(function(){ //some clear code }); </script>
你知道如何在不下载一个文件的状况下经过发送一个ajax请求头获得一个文件的大小吗? 使用jQuery就很容易。
<a href="001.html" class="fetchSize">First Trickshot</a> <br /> <a href="034.html" class="fetchSize">This Trickshot</a> <br /> <a href="assets/img/ball.png" class="fetchSize">Ball.png</a> <br /> // Loop all .fetchSize links $('a.fetchSize').each(function(){ // Issue an AJAX HEAD request for each one var link = this; $.ajax({ type : 'HEAD', url : link.href, complete : function(xhr){ // Append the filesize to each $(link).append(' (' + humanize(xhr.getResponseHeader('Content-Length')) + ')'); } }); }); function humanize(size){ var units = ['bytes','KB','MB','GB','TB','PB']; var ord = Math.floor( Math.log(size) / Math.log(1024) ); ord = Math.min( Math.max(0,ord), units.length-1); var s = Math.round((size / Math.pow(1024,ord))*100)/100; return s + ' ' + units[ord]; }
注意:这个例子如何咱们直接使用浏览器是无法获得的,必须使用本地的web服务器打开运行才能够。
延迟(deferreds)是一个强大的工具。jQuery对于每个Ajax请求都会返回一个deferred对象。 deferred.done()
方法接受一个或多个参数,全部这些都参数能够是一个单一的函数或一个函数数组。当Deferred(延迟)解决时,doneCallbacks被调用。回调是依照他们添加的顺序执行。一旦deferred.done()
返回Deferred(延迟)对象,Deferred(延迟)能够连接其它的延迟对象,包括增长额外的.done()
方法。下面这样就会使你的代码更易读:
// This is equivalent to passing a callback as the
// second argument (executed on success): $.get('assets/misc/1.json').done(function(r){ log(r.message); }); // Requesting a file that does not exist. This will trigger // the failure response. To handle it, you would normally have to // use the full $.ajax method and pass it as a failure callback, // but with deferreds you can can simply use the fail method: $.get('assets/misc/non-existing.json').fail(function(r){ log('Oops! The second ajax request was "' + r.statusText + '" (error ' + r.status + ')!'); });
当咱们须要发送多个Ajax请求是,相反于等待一个发送结束再发送下一个,咱们能够平行地发送来加速Ajax请求发送。
// The trick is in the $.when() function:
$.when($.get('assets/misc/1.json'), $.get('assets/misc/2.json')).then(function(r1, r2){ log(r1[0].message + " " + r2[0].message); });
咱们不只能够在电脑上ping到一个网站的ip,也能够经过jQuery获得。
$.get('http://jsonip.com/', function(r){ log(r.ip); }); // For older browsers, which don't support CORS // $.getJSON('http://jsonip.com/?callback=?', function(r){ log(r.ip); });
jQuery(使用ajax)提供了一个速记的方法来快速下载内容并添加在一个元素中。
<p class="content"></p> <p class="content"></p> var contentDivs = $('.content'); // Fetch the contents of a text file: contentDivs.eq(0).load('1.txt'); // Fetch the contents of a HTML file, and display a specific element: contentDivs.eq(1).load('1.html #header');
jQuery提供了一个方法序列化表单值和通常的对象成为URL编码文本字符串。这样,咱们就能够把序列化的值传给ajax()做为url的参数,轻松使用ajax()提交表单了。
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br /> </form> // Turn all form fields into a URL friendly key/value string. // This can be passed as argument of AJAX requests, or URLs. $(document).ready(function(){ console.log($("form").serialize()); // FirstName=Bill&LastName=Gates }); // You can also encode your own objects with the $.param method: log($.param({'pet':'cat', 'name':'snowbell'}));