jQuery Beginner and Further Learning 1 (Official Website Learning)

1. Basic knowledge

**1、$ vs $()**

长话短说，jQuery object methods 和 core jQuery methods
$()如 $( "h1" ).remove()就是jQuery object methods；
$  如 $.each()就是core jQuery methods
jQuery object methods are part of the $.fn namespace;


**2、$( document ).ready(function() {...}) 和$(window).on("load",function(){...})**

$( document ).ready(function() {...})可简写为$(function(){...})
可以将有名函数代替匿名函数如下：
function readyFn() {
    // Code to run when the document is ready.
}

$( document ).ready( readyFn );//页面DOM结构加载完执行，意思就是不过内容是否加载了
// or:
$( window ).on( "load", readyFn );//页面属性，图片，内容完全加载完，执行、


**3、获取和设置元素属性**
设置：
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );

$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});
获取：
$( "a" ).attr( "href" );

**4、选择页面元素**

*（1）Pseudo-Selectors*
$( "a.external:first" );
$( "tr:odd" ); 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );     
// All except the first three divs.
$( "div:gt(2)" );
// All currently animated divs.
$( "div:animated" );
*（2）Selecting Elements with a Comma-separated（逗号分隔） List of Selectors*
$( "div.myClass, ul.people" );
*（3）Selecting Elements by Compound CSS Selector*
$( "#contents ul.people li" );
*（4）Selecting Elements by Attribute*
$( "input[name='first_name']" );

**5筛选和过滤元素**

$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );

.eq(2) .gt(2) .lt(2)   //equal 3,  great than 3,  less than 3,

**6、选择元素之后工作**

设置value
$( "h1" ).html( "hello world" );
获取value
$( "h1" ).html();
需要注意的是：设置函数将会返回a jQuery object，so allowing us to continue calling jQuery methods :
 $( "h1" ).html("hello").addClass( "test" );//this will work
 $( "h1" ).html().addClass( "test" );//this will NOT work

chaining(链条)
$( "#content" ).find( "h3" ).eq( 2 ).html( "new text for the third h3!" );
$( "#content" )
    .find( "h3" )
    .eq( 2 )
    .html( "new text for the third h3!" );
$( "#content" )
    .find( "h3" )
    .eq( 2 )
        .html( "new text for the third h3!" )
        .end() // Restores the selection to all h3s in #content
    .eq( 0 )
        .html( "new text for the first h3!" );

**7、控制元素**
(1)获取和设置元素信息
.html() – Get or set the HTML contents.
.text() – Get or set the text contents; HTML will be stripped.
.attr() – Get or set the value of the provided attribute.
.width() – Get or set the width in pixels of the first element in the selection as an integer.
.height() – Get or set the height in pixels of the first element in the selection as an integer.
.position() – Get an object with position information for the first element in the selection, relative to its first positioned ancestor. This is a getter only.
.val() – Get or set the value of form elements.

（2）移动，复制，删除元素
移动有两种方式：
.insertAfter()将选中的元素放在参数后面，返回的是的是选中的元素即将要放置的元素  
.insertBefore()将选中的元素放在参数前面，返回的是的是选中的元素即将要放置的元素
.appendTo()将选中的元素追加放在参数后面，返回的是的是选中的元素即将要放置的元素
.prependTo()将选中的元素追加放在参数后面，返回的是的是选中的元素即将要放置的元素

.after()将参数放在选中的元素的后面
.before()将参数放在选中的元素的前面
.append()将参数追加放在选中的元素的后面
.prepend()将参数追加放在选中的元素的前面


复制

.clone()
$( "#myList li:first" ).clone().appendTo( "#myList" );

删除
.remove()返回删除的元素，不保留保留与该元素的相关联的数据和事件
.detouch()返回删除的元素，并且保留与该元素的相关联的数据和事件
.empty(),留下想要删除的元素，但是将元素内部的HTML内容全部清除

新增
// Creating new elements from an HTML string.
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );


// Creating a new element with an attribute object.
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

创建元素之后还要添加进页面：
var myNewElement = $( "<p>New element</p>" );

myNewElement.appendTo( "#content" );

myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!，这个意思是会吧p元素从ID为content的元素中移动到ul:last(表示最后一个ul元素，ul li:list)

$( "ul" ).last().after( myNewElement.clone() ); // Clone the p so now we have two.

**8、控制属性**  

    $("a").attr({
                rel: "nofollow",
                href: function( idx, href="h.html" ) {
                    return "/new/" + href;
                    }
                });

9、jQuery object对象

(1)、写在前面最最重要的一句话，记牢：When creating new elements (or selecting existing ones), jQuery returns the elements in a collection.返回的是一个collection集合

var target = document.getElementById( "target" ); 
var newElement = document.createElement( "div" );
$( target ).after( newElement );
这一段代码让我谨记的是变量target的之后的写法$( target )经查证这样写只是为了阅读方便，不加$也没关系。

var headings = $( "h1" );
alert( headings.length );
.length是属性不是函数

var headings = $( "h1" );
var firstHeading = headings.eq( 0 );//返回的是jQuery对象
var firstHeadingElem = $( "h1" ).get( 0 );//返回的是Dom 原生对象
var firstHeadingElem = $( "h1" )[ 0 ];//array-like,返回的是Dom 原生对象
这三句代码告诉我如何将jQuery对象转变成原生对象。


(2)、each wrapped object is unique，This is true even if the object was created with the same selector or contain references to the exact same DOM elements.每一个jQuery对象都是对一无二的，即使别包裹的原生对象是同一个
var logo1 = $( "#logo" );
var logo2 = $( "#logo" );
alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"

（3）、jQuery Objects Are Not "Live" (jquery对象不是实时更新的)
var allParagraphs = $( "p" );
当页面增加或减少p标签时，allParagraphs 该对象中包含的p不会自动减少或自动增加(可以手动去处理allParagraphs)，另外一种方式就是：
allParagraphs = $( "p" );//Updating the selection.

Digression:
1. Sourcemap is to help the compressed files find debug information.
2. Is it more appropriate to place the introduction of jQuery and js files in html?
It is more appropriate to introduce jQuery in the head tag, and the js code, that is, the script code, is placed at the end of the body tag.