一、搜索操作
1、搜索父元素
parents()方法————$("选择器").parents()
获取选择器的所有祖先元素(不包含根节点)
parent()方法————$("选择器").parent()
获取选择器的唯一父元素
2、搜索同辈元素
next()方法————$("选择器").next()
获取选择器的下一个同辈元素
prev()方法————$("选择器").next()
获取选择器的上一个同辈元素
siblings()方法————$("选择器").siblings()
获取选择器的所有同辈元素
3、搜索子元素
children()方法————$("选择器").children()
获取选择器的所有子元素
find()方法————$("选择器1").find("选择器2")
获取选择器1中的所有选择器2(包括所有的后代元素,相当于$("选择器1 选择器2")
后代元素选择器)
4、过滤操作
filter()方法————$("选择器1").filter("选择器2")
获取同时满足选择器1和选择器2的所有元素
map(callback)方法————$("选择器").map(function (){})将$("选择器")
获取到的元素数组经过匿名函数处理,转化为另外一个数组
例:
var arr=$("#d2").children().map(function(){
return $(this).text();
}).get());
// get()取得所有匹配的 DOM 元素集合。get(index)取得第 index 个位置上的元素
each(function(i)):循环遍历每一个元素,this 代表被遍历的 DOM 对象,$(this)代表被迭代的 jQuery 对象,i 代表正在被遍历的那个对象的下标。下标从 0 开始。
例如:$('#b1').click(function(){
var str=""
$('ul li').each(function(i){//i:表示正在被遍历的那个节点的下标,下标从 0 开始
str+=$(this).text()//将所有li中的文本拼接成字符串
});
});
二、jQquery中的DOM操作
1、创建节点
创建元素节点
$("<p></p>");
创建文本节点
$("<p>text</p>");
创建属性节点
$("<p id='p1'>text</p>");
2、删除节点
$("选择器").remove();移除选择器匹配的元素
$("选择器").empty();将选择器匹配的元素清空 清空标签内所有节点(不包含本节点)
3、内部插入
追加:$("选择器").append("内容或节点");将内容或节点追加到选择器匹配的元素内(后面)添加的元素作为最后一个孩子
头部插入:$("选择器").prepend("内容或节点");将内容或节点添加到选择器匹配的元素内(前面)添加的元素作为第一个孩子
4、外部插入
$("选择器").after("内容或节点");将内容或节点追加到选择器匹配的元素外(后面)在该元素之后添加兄弟节点
$("选择器").before("内容或节点");将内容或节点添加到选择器匹配的元素外(前面)在该元素之前添加兄弟节点