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;
});
