使用jQuery操作 DOM

事件冒泡
概念：事件冒泡就是当父元素和子元素存在同一事件时，在子元素的事件处理程序中会自动调用其父级元素的事件处理程序。
如何取消事件冒泡：
1、一般情况，在子事件中加一句：event.stopPropagation();
2、按钮事件中需要添加： event.preventDefault();
3、return false 都使用
样式操作
css( )获取和设置样式
addClass( )追加样式
removeClass( )移除样式
toggleClass( )切换样式
内容操作
html( )代码操作
text( )内容操作
val( )属性值操作
节点操作
查找节点
$(""):id用#，class用.
创建节点元素
$(function(){
var li_1 = $(“li title=‘香蕉’>香蕉”); // 创建第一个li>元素
var li_2 = $(“li title=‘雪梨’>雪梨”); // 创建第二个li>元素
var li_3 = $(“li title=‘其它’>其它”); // 创建第三个li>元素
插入节点
插到父级元素里的最后：
1、append(content) $(A).append(B)表示将B追加到A中如：$(“ul”).append($newNode1);
2、appendTo(content) $(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo(“ul”);
插到父级元素里的开头：
3、prepend(content) $(A).prepend(B)表示将B前置插入到A中如：$(“ul”). prepend ($newNode1);
4、prependTo(content) $(A).prependTo(B)表示将A前置插入到B中如：$newNode1. prependTo (“ul”);
插到同代某元素的后面：
5、after(content) $(A).after(B)表示将B插入到A之后如：$(“ul”).after($newNode1);
6、insertAfter(content) $(A).insertAfter(B)表示将A插入到B之后如：$newNode1.insertAfter(“ul”);
插到同代某元素的前面：
7、before(content) $(A).before(B)表示将B插入至A之前如：$(“ul”).before($newNode1);
8、insertBefore(content) $(A).insertBefore(B)表示将A插入到B之前如：$newNode1.insertBefore(“ul”);
删除节点
remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据
替换节点
1、replaceWith()
$(“p”).replaceWith(“strong>nishishui</strong”);
2、replaceAll()
$(“strong>nishishui/strong>”).replaceAll(“p”);
复制节点
clone()用于复制某个节点
$(selector).clone([includeEvents]) ;
$(“ul li”).click(function(){
$(this).clone(flase).appendTo(“ul”);
});
$(“ul li”).click(function(){
$(this).clone(true).appendTo(“ul”);
});
true：复制事件，即复制的具有原来元素的事件功能；
flase：可省略，只复制，不复制事件
属性操作
attr( )获取和设置元素属性
$("#setAttr").click(function(){
$(“div”).attr({Style:“background-color: #f00;width:100px”,id:“me”});
});
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲getAttr").click…(“div”).attr(“id”));
});
removeAttr( )删除元素属性
节点遍历
遍历子元素：children( )
遍历同辈元素：next( )、prev( )、siblings( )
遍历前辈元素：
parent( )：父级元素
parents( )：祖辈所有元素，包括父级
其他遍历方法
1、each( ) ：规定为每个匹配元素规定运行的函数
语法：$(selector).each(function(index,element)) ;
$(“button”).click(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ alert((this).text())
});
});
输出所有li元素
2、end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
选择所有段落，找到这些段落中的 span 元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框：
p><spanHello, how are you?</p
script>$(“p”).find(“span”).end().css(“border”, “2px red solid”);</script