jQuerry
(Document).Ready //DOM准备好了DOM is available
->
(Window).Load//所有页面载入完成the entire Web page (including all assets) is completely loaded.
★引用时CSS文件在JQuery之前。Include all CSS files before including jQuery
★Using jQuery with a CDN. 查找CDN => http://jquery.com/download/
https://developers.google.com/speed/libraries/devguide?hl=zh-CN
min版本是名称缩短，缩进减少等处理后的版本。文件大小更小，功能与标准版本无异。
snippet:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
To avoid using the ready() event for code that operates on the DOM, you can simply place
your code in an HTML document before the closing </body> element. Doing so ensures the
DOM is completely loaded, simply because the browser will parse the document from top to
bottom. If you place your JavaScript code in the document after the DOM elements it
manipulates, there is no need to use the ready() event.
★链式操作
<!DOCTYPE html>
<html lang="en">
<body>
<a></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> (function ($) {
$('a').text('jQuery') // Sets text to jQuery and then returns $('a')
.attr('href', 'http://www.jquery.com/') // Sets the href attribute and then returns $('a')
.addClass('jQuery'); // Sets class and then returns $('a')
})(jQuery) </script>
</body>
</html>
★链式操作之链被破坏
<!DOCTYPE html>
<html lang="en">
<body>
<p></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> (function ($) {
var theText = $('p').text('jQuery').text(); // Returns the string "jQuery"
alert(theText);
// Cannot chain after text(). The chain is broken.
// A string is returned, not the jQuery object.
})(jQuery) </script>
</body>
</html>
It should be no surprise that if a jQuery method does not return the jQuery wrapper set, the
chain is thereby broken. This method is considered to be destructive.
★链式操作之End()
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.last
{
background: #900;
}
</style>
<ul id="list">
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> (function ($) {
$('#list') // Original wrapper set
.find('> li') // Destructive method
.filter(':last') // Destructive method
.addClass('last')
.end() // End .filter(':last')
.find('ul') // Destructive method
.css('background', '#ccc')
.find('li:last') // Destructive method
.addClass('last')
.end() // End .find('li:last')
.end() // End .find('ul')
.end() // End .find('> li')
.find('li') // Back to the orginal $('#list')
.append('I am an <li>');
})(jQuery); </script>
</body>
</html>
//$(document).ready() <=> $()
//$(document).ready(function(){//code here;}) <=> $(function(){//code here;})
★ 选择符之过滤器
:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index)
ancestor descendant
parent > child
prev + next
prev ~ siblings
:nth-child(selector)
:first-child
:last-child
:only-child
:empty
:has(selector)
:parent
★ id含特殊字符
alert($('#\\#foo\\[bar\\]').text());
(e.g. # ~ [] = > ) that when used as a literal part of a name (e.g. id="#foo[bar]")
