jQuery关键知识（一）

1. $ vs $()

m = $(document.getElementById('main'));

$() 方法可将 DOM 对象转换成 jQuery 对象

$('div').on('click','p',function(){$(this).toggle();});

点击网页中 div 元素下的 p 标签，会隐藏该 p 标签。对于 $() 对象，相关函数命名空间为 $.fn，在调用相关函数时，会将元素本身的 DOM 对象用 this 传入。

2. 避免 $ 符号与其他包冲突

• 重新命名

var $jq = jQuery.noConflict();

• 利用函数

jQuery.noConflict();
 
(function( $ ) {
    // Your jQuery code here, using the $
})( jQuery );

• 利用 jQuery(document).ready

jQuery(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});

• 直接利用 jQuery 函数

jQuery(function($){
    // Your jQuery code here, using the $
});

3. attr 方法

// 设置一个属性值
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
 // 设置多个属性值
$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});
// 获取属性值
$( "a" ).attr( "href" );

4. 选取元素

$( "#myId" );   // 通过 id 选取
$( ".myClass" );  // 通过class选取
$( "input[name='first_name']" );  // 通过属性选取
$( "#contents ul.people li" );  // 组合选取
$( "div.myClass, ul.people" );  // 选取多个
$("ul>li");  // 选取 ul 的直接 li 子节点

$( "a.external:first(last)" );   // 第一个(最后一个)节点
$( "tr:odd(even)" );  // 奇(偶)数节点
$( "#myForm :input" );  // 输入节点
$( "div:visible(hidden)" );  // 可见(不可见)节点
$( "div:gt(lt,eq)(2)" );  // 大于(小于、等于) 2 的节点
$( "div:animated" );  // 动画节点

$("tr").eq(n);  // 第 n 个节点
$('ul>li.page_item').is('.page-item-73');  // 有一个符合则为true
$( "div.foo" ).has( "p" );    // 过滤出为 p 的
$( "h1" ).not( ".bar" );    // 过滤出 class 不为 bar 的
$( "ul li" ).filter( ".current" ); // 过滤出 class 为 current 的
$( "ul li" ).first();  // 选取第一个
$( "ul li" ).eq( 5 ); // 选取第5个

// 一些过滤器
:password
:reset
:radio
:text
:submit
:checkbox
:button
:image
:file

if ( $( "div.foo" ).length ) {
    ...
}

检测是否选取到任何元素

5. 对选择器进行操作

• 链式操作

$( "#content" ).find( "h3" ).eq( 2 ).html( "new text for the third h3!" );

• 一些方法

.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.

• 移动元素

// 相对于元素
.insertAfter()
.after()
.insertBefore()
.before()

// 相对于元素组
.appendTo()  
.append()
.prependTo()
.prepend()

• 克隆元素

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

• 移除元素

.remove()  //  不保留绑定的事件
.detach()   // 保留绑定的事件
.empty()  // 只清空内容

• 创建新元素

$( "<li class=\"new\">new list item</li>" );

$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

• 操作属性

$( "#myDiv a:first" ).attr( "href", "newDestination.html" );

$( "#myDiv a:first" ).attr({
    href: "newDestination.html",
    rel: "nofollow"
});

$( "#myDiv a:first" ).attr({
    rel: "nofollow",
    href: function( idx, href ) {
        return "/new/" + href;
    }
});
 
$( "#myDiv a:first" ).attr( "href", function( idx, href ) {
    return "/new/" + href;
});