一、查找元素
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/