jQuery选择器和方法

选择器

基本选择器: 

$(“p”);

$(“.css”); $(“p.css”);

$(“#id”); $(“p.css, #id”);

层次选择器:

$(“body div”); 

$(“body>div”);  // 它只匹配直接子元素

$(“.foo+p”);  // 下一个元素

$(“.foo~p”);  // 返回.foo后面全部的兄弟元素,而不是一个

基本过滤器:

$(“p:last”);  $(“p:first”);

$(“p:not(.foo)”); // 选择不匹配某个选择器的元素

$(“p:odd”); $(“p:even”);

$(“p:eq(3)”);

$(“p:contains(txt)); // 选择包含特定文本的元素

$(“p:has(ele));   //  选择包含特定元素的元素

$(“:empty”);  // 选择空元素

$(“p:parent”);  // 选择父元素

$(“p:hidden”);  $(“p:visible”);

属性过滤器:

$(“[class=foo]”);

$(“p[class!=foo]”);

子元素过滤器:

$(“p:nth-child(odd)”);

$(“p sapn:last-child”);

表单过滤器:

:button, :checkbox, :file, :image, :input, :password, :radio, :submit, :text,

$(“input:radio”);

$(“:disabled”);  $(“:enabled”);

$(“:checked”);  $(“:selected”);

方法

遍历DOM元素

.eq();

$(“p”).filter(“.foo”);

$(“p”).not(“.foo”);

.first(); .last();

$(“p”).has(“span”);

$(“p”).is(“.foo”);

$(“p”).slice(1, 3);  // 切片,索引从0开始

$(“p”).children(“.foo”);

$(“span.foo”).closest(“p”);  // 包含当前元素的最近的一级父元素

.find(); // .find() 很类似与.children(), 不同的是.find()会匹配 不限制多少代的子元素

.next();  .nextAll();  .nextUntil(); 

.prev();  .prevAll();  .prevUntil();  // 和next系列不同的是先前匹配不是向后.

.siblings(); // 选择全部兄弟元素, 不分前后.

.parent() // 当前元素的直接父元素的集合

.parents(); .parentsUntil(); 

$(“p”).add(“apan.foo”);  // 选出所有段落, 然后把拥有.foo的span元素添加到当前jquery对象

.andSelf() // 保留原始结果集, 比如匹配一个span并保留原始p : $(“p”).find(“span”).andSelf();

创建元素并将其添加到DOM

.append() // 将内容或元素添加到目标元素之后, $(“p”).append(“this is ...”);

.prepend() // 添加到之前.

.appendTo();

.prependTo(); // 以上两个方法都是由新创建的元素调用, 接受一个目标元素.

.after();  .before();  // 类似.append(), prepend() 不同的是添加到目标元素之外,而不是之内.

.insertAfter();  .insertBefore(); // 对应.appendTo();. prependTo(); 

.wrap(); // 使用一个或多个元素包裹住已有的元素: $(“span”).wrap(“<strong />”); 会变粗

.unwrap(); // 删除包裹的元素, 他不接受任何参数

.wrapAll(); // 整个元素集合都需要同一个标签抱住, 他就派上用场了

.wrapInner(); // 有些场合需要抱住一个元素的内容而不是元素本事.

.remove(); // 删除一个元素

.detach(); // 删除一个元素,但保留数据

获取和修改CSS以及属性

.attr(); 

.removeAttr();

.css();

.text(); .html();

.val();

.data();  // 把与选择的元素相关的信息存储到一个对象里(别名), 例如: $(“p.foo”).data(“name”, “info”);

.addClass(); .removeClass(); .toggleClass();

.hasClass();

.height(); .width(); // 得到元素的高和宽, 没有单位

.innerHeight(); .innerWidth(); .outerHeight(); .outerWidth();

处理结果集

.map(); .each();  // 它们的回调函数都需要两个参数: 索引和当前元素本身. 区别是,.map()回调函数返回新对象,不支持链式调用. .each()返回受回调函数影响后的原对象,支持链式.

使用动画和其他效果

.show(); .hide();  // 注意, 他们都支持回调函数: ...hide(2000, function() { ... });

.fadeIn(); .fadeOut(); .fadeTo();  // .fadeo()允许制定元素的透明度: .fadeTo(1000, 0.5, function() {});

.slideUp(); .slideDown(); .slideToggle(); // 通过把高度增减的方式隐藏/显示一个元素

.animate();

.delay(); // 暂停

.stop(); // 停止动画, 两个参数,1, 是否清除整个动画, 2, 是否直接跳到动画终点. 两个都是false;

处理事件

.error(); // 浏览器出错会触发error事件. 

.scroll() // 页面滚动时触发.

.ready(); // 等待DOM准备好, 再处理加载

.unload(); // 用户单击链接,刷新, 前进,后退, 都会触发unload. 但这个事件方法存在浏览器兼容问题.

.bind(); .unbind(); // 给元素绑定’事件处理’函数. 如: $(“p”).bind(“click”, function() {...});

.live(); .die(); // .live() 和 .bind()类似,不同的是,他甚至可以连动态添加到DOM中的元素都能绑定.

.one(); // 和.bind() 类似, 不同的是,他绑定的事件触发一次后,便自动解除绑定.

.toggle();

.trigger(); // 用来触发事件

<快捷方法>: {.blur(); .focus(); .focusin(); .focusout(); .load(); .resize(); .scroll(); .unload(); .click(); .dblclick(); .mousedown(); 

.mouseup(); mousemove(); .mouseover(); mouseout(); mouseenter(); mouseleave(); .change(); .select(); .submit();

 .keydown(); .keypress(); .keyup(); .error();

使用AJAX控制函数

$.ajax(); // 参数解释: 

data: 发送给远程的数据,可以是查询串,也可以是JSON串

dataFilter: 一个回调函数,对远程发送过来的数据做”消毒”处理.

dataType: 返回数据的类型

Error: 一个回调函数

Success: 回调函数,

Type: 请求类型, get, post

Url:目标url

$.ajaxSetup();

$.get(); $.post(); // 它们都支持4个参数: 请求的URL, 可选的数据, 可选的回调, 可选的dataType

$.get(

“ajax.php”, 

function(data) {

...

}

);

$.getJSON();

$.getScript();

.load();