jquery笔记

基本、层级、简单、内容、可见性、属性、子元素、表单


层次选择器：


abc abc：后代


abc > child：子元素


abc + def：紧临abc的元素，等价next()


abc ~ siblings：所有兄弟元素，等价于nextAll()


基本过滤选择器：


$("div:first")：选取第一个div


$("div:last")：选取最后一个div


$("input:not(.myClass)")：选取class!=myClass的input


$("input:even")：选取索引是偶数的input，索引从0开始


$("input:odd")：选取索引是奇数的input


$("input:eq(2)")：选取索引==2的input


$("input:gt(2)")：选取索引>2的input


$("input:lt(2)")：选取索引<2的input


$(":header")：选取所有的标题元素


$("div:animated")：选取当前正在执行动画的div


内容过滤选择器


$("div:contains("text")")：选取含有文本text的div


$("div:empty")：选取文本不包含子元素（包括文本元素）的div


$("div:has("p")")：选取含有p元素的div


$("div:parent")：选取拥有子元素（包括文本元素）的div元素


可见性过滤选择器


$("input:hidden")：选取隐藏的input元素


$("input:visiable")：选取所有可见的input


属性过滤选择器


$("div[id]")：选取拥有属性id的元素


$("div[id==test]")：选取属性id==test的div


$("div[id!=test]")：选取属性id!=test的div


$("div[id^=test]")：选取属性id以test开头的div


$("div[id$=test]")：选取属性id以test结束的div


$("div[id*=test]")：选取属性id包含test的div


$("div[id][name==test]")：选取包含id属性，且name==test的div


子元素过滤选择器：索引从1开始，返回集合元素


$("div:nth-child(2)")：选取每个div下，索引是2的子元素


$("div:first-child")：选取每个div下第一个子元素


$("div:last-child")


$("ul li:only-child")：如果某个li在ul中是唯一的，即该ul中只有一个li，则匹配。


表单对象属性过滤选择器：


$("#from1:enabled")：选取id==from1的表单对象中所有可用元素


$("#from1:disabled")


$("#form1:checked")：选取所有被选择的input对象


$("select:selected")：选取所有被选中的select对象


表单选择器


$(":input")：选取所有input、textarea、select、button元素


$(":text")：选取所有单行文本框


$(":password")


$(":radion")


$(":checkbox")


$(":submit")


$(":image")


$(":reset")


$(":button")


$(":file")


$("hidden")


例子：


$("p").click(function(){
alert("click");
});


$("#tb tbody tr:even").css("backgroundColr","#888");


$("#btn").click(function(){
var length = $("input[name=='check']:checked").length;

alert("选中的个数"+length);
});


$("div ul li:gt(5):not(:last)").hide();


属性：


  属性：
  
  $("img").attr("src");
  
  $("img").attr("src", "test.png");
  
  $("img").attr({src:"test.png", alt:"test img"});
  
  $("img").attr("title", function(){return this.src});
  
  $("img").removeAttr("src");
  
  CSS类：
  
  $("p").addClass("selected");
  
  $("ul li:last").addClass(function(){
  return 'item-'+$(this).index();
  });
  
  $("p").removeClass("selected");
  $("p").removeClass();
  
  $('li:last').removeClass(function(){
  return $(this).prev().attr('class');
  })
  
  $("p").toggleClass("selected");


var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});

toggleClass(function(index, class), [switch])

HTML代码：

$("p").html()：返回第一个p的html

$("p").html("test html")：设置每一个p为"test html"

html(function(index, html));

文本

text()：取得所有匹配元素的内容

text(val)

text(function(index, text))

值

val()：获取第一个匹配元素的当前值


val(val)：设置每一个匹配元素的值

$(".select").val(["select01", "select02"])

val(function(index, value))

筛选


过滤

$("p").eq(1)获取第二个p
等价于$("p:eq(1)")

$("li").first()
等价于$("li:first")

$("li").last()
等价于$("li:last")

if($("#input").hasClass("protected"))
等价于if($("#input").is(".protected"))
等价于var $item = $(".input[class=='protected']")
     if($item.length > 0)
等价于$("p").filter(".protected")

$("p").filter(".selected, :first")
     
filter(function)

$("input[type=='checkbox']").parent().is("form");
 
map(callback)：将一组元素转换成其他数组

$("li").has("ul")
等价于$("li:has('ul')")

$("p").not($("#selected")[0])

$("p").slice(0, 1)


查找


$("div").children()

closest(expr, [context])：从元素本身开始，逐级向上级元素匹配，返回最先匹配的元素
例子：
 $("li:first").closest(["ul", "body"]);
 
$("p").find("span")

$("p").next()
等价于$("p + p")
$("p").next(".selected")

nextAll([expr])

nextUtil([expr])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

offsetParent()：返回第一个匹配元素用于定位的父节点；

parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents([expr])

parentsUntil([expr])

prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的集合

prevAll([expr])

prevUntil([expr])

siblings([expr])


串联

add(expr, [context])

andSelf()

contents()

end()


文档处理


内部嵌入

append(content)

append(function(index, html))

appendTo(content)

prepend(content)

prepend(function(index, html))

prependTo(content)


外部插入

after(content)

after(function)

before(content)

before(function)

insertAfter(content)

insertBefore(content)

包裹

wrap(html)

wrap(elem)

wrap(fn)

unwrap()

wrapAll(html)

wrapAll(elem)

wrapInner(html)

wrapInner(elem)

wrapInner(fn)

替换

replaceWith(content)

replaceAll(selector)

删除

empty()

remove([expr])

detach([expr])

复制

clone()

clone(true)

CSS


CSS

css(name)

css(properties)

css(name, value)

css(name, function(index, value))


位置

尺寸