阿里山QQ

导航

jQuery

一、查找元素

1、选择器

1.1基本选择器:

$("#myDiv")  

$("div")  

$(".myClass") 

$("*")  

$("div,span,p.myClass"):找到div,span以及p下属性为myclass的标签;

 

1.2层级选择器:

$("form input"):找到form中所有的input  

$("form > input"):找到form中所有的子级input元素  

$("label + input"):找到所有跟在 label 后面的input元素

$("form ~ input"):找到所有与表单同辈的input元素

 

1.3基本筛选器:

$('li:first')  

$("input:not(:checked)"):找到所有未选中的 input 元素  

$("tr:even"):找到表格的1、3、5...行(即索引值0、2、4...)  

$("tr:odd"):找到表格的2、4、6行(即索引值1、3、5...)

$("tr:eq(1)"):查找第二行

$("tr:gt(0)")  

$('li:last'):获取最后一个元素  

$("tr:lt(2)")

 

1.4属性选择器:

$("div[id]"):找到所有含有 id 属性的 div 元素     

$("input[name='newsletter']").attr("checked", true)  

$("input[name!='newsletter']").attr("checked", true)

 

2、筛选器

2.1过滤筛选器:

$("p").eq(1)  

$("p").eq(-2)    

$('li').first()  

$('li').last()   

$("ul li").hasclass("test"):如果li中含有test类,返回true

 

2.2查找筛选器:

$("div").children()  

$("div").children(".selected")  

$("p").find("span")和$("p span")相同    

$("p").next():找到p标签后面紧邻的同辈标签  $("p").next(".selected")

$("div:first").nextAll().addClass("after"):给第一个div之后的所有元素加个类

$("p").parent()

$("p").parent(".selected"):查找段落的父元素中每个类名为selected的父元素

$('li.item-a').parentsUntil('.level-1').css('background-color', 'red')

$("p").prev()

$("p").prev(".selected")

$("div:last").prevAll().addClass("before")

$('#term-2').prevUntil('dt').css('background-color', 'red');

$("div").siblings()

$("div").siblings(".selected")

二、操作元素

1、属性操作

$("img").attr("src"):设置或获取

$("img").removeAttr("src");删除

$("input[type='checkbox']").prop("checked"):prop表示获取元素集合中第一个元素的属性值,如果选中,就为True;

$("p").addClass("selected"):如果需要增加多个类,用空格分开;

$("p").removeProp(name):删除由prop设置的属性值;

$("p").removeClass():删除所有的类;

$('p').html()

$("p").html("Hello <b>world</b>!")

$('p').text():返回元素的文本内容

$("p").text("Hello world!"):设置元素的文本内容

$("input").val():获取文本框的值

$("input").val("hello world!"):设置文本框的值

 

jquery插件: 

  http://jqueryui.com/

  http://www.jeasyui.com/

 

posted on 2016-08-04 10:09  阿里山QQ  阅读(180)  评论(0编辑  收藏  举报