基本语法:$(selector).action()
寻找元素(重要的选择器和筛选器)
一:选择器
1.1 基本选择器:
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div") // (!!!)
1.2 层级选择器:
$(".outer div") //outer 下的所有子元素(!!!)
$(".outer>div") //outer 的子代(不包括孙代)
$(".outer+div") //outer 子代毗邻的元素(如果有多个,选择最后面那个,必须是毗邻的)
$(".outer~div") //outer 向下的不一定毗邻的子代元素
1.3 基本筛选器:
$(".outer li:first") //第一个元素
$(".outer li:eq(2)") //元素 id 等于2(从0开始)
$(".outer li:even") //奇数位置元素
$(".outer li:gt(1)") //id 大于1的元素
1.4 属性选择器:
$('[id="div1"]')
$('["name="Tom"][id]')
1.5 表单选择器:
$("[type='text']")----->$(":text") //注意只适用于input标签
$("input:checked")
二:筛选器
2.1 过滤筛选器:(同基本选择器,只是写法不同)
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test") //返回判断值
2.2 查找筛选器:
//子类继承父类,css()样式跟着变化
2.2.1
$("div").children(".test") //只查找子代标签
$("div").find(".test") //查找所有后代标签
2.2.2 (向下找)
$(".test").next() //同一层挨着下一个标签(兄弟层)
$(".test").nextAll() //同一层下面所有
$(".test").nextUntil() //同一层找到截止到某个位置的所有标签; $(".test").nextUntil(".div6"), 找到下面截止到".div6"位置之前的标签(不包含. div6)
2.2.3 (向上找,同2.2.2)
$("div").prev()
$("div").prevAll()
$("div").prevUntil()
2.2.4
$(".test").parent() //向上找到父代
$(".test").parents() //向上一直找父代,直到 body
$(".test").parentUntil() //向上找父代直到某一层,不包含该层父代
2.2.5
$("div").siblings() //找到兄弟层的所有标签(向上向下)
获取多个标签
// 获取多个标签
function func1(self) {
$(self).parent().parent().children(".shade, .model").addClass("hide")
}