jQuery:事件和文档处理

1、focus事件：当元素获得焦点时，触发 focus 事件。

blur事件：当元素失去焦点时触发 blur 事件。

$("#txt").blur(function() {
$(this).val("账号")
})
$("#txt").focus(function() {
$(this).val("")
})

--------------------------------------------------------------

<input type="text" name="" id="" value="" placeholder="pppp" />
<input type="text" id="txt" value="" />

当鼠标没有放上或点击input时，不会做出任何反应，input框内会显示“账号”，当鼠标放上去或点击的时，这时元素就会获得焦点（focus事件），“账号”就会消失，当鼠标移除时，就会失去焦点（blur事件）。

2、on事件：在选择元素上绑定一个或多个事件的事件处理函数。

$("#txt").on("click dblclick", function() {
console.log(1)
})

---------------------------------------------------

<input type="text" id="txt" value="" />

单击的时候会出现一次，而双击的时候则会出现四次。

3、内部插入

append：向每个匹配的元素内部追加内容。

prepend：向每个匹配的元素内部前置内容。

//内部插入=>子节点
$(".append").click(function() {
//所有子元素之后
$("ul").append("<li>列表 append</li>")
//$("<li>列表 append</li>").appendTo($("ul"))
})

$(".prepend").click(function() {
//所有子元素之前
$("ul").prepend("<li>列表 prepend</li>")
})

----------------------------------------

<button type="button" class="prepend">prepend</button>
<button type="button" class="append">append</button>

注：$("ul").append("<li>列表 append</li>")和//$("<li>列表 append</li>").appendTo($("ul"))效果同样

4、外部插入

before：在每个匹配的元素之前插入内容

after：在每个匹配的元素之后插入内容。

//外部插入=>兄弟节点
$(".before").click(function() {
//当前元素之前
$("ul").before("<div>div before</div>")
})
$(".after").click(function() {
//当前元素之后
$("ul").after("<div>div after</div>")
})

-------------------------------------------------------

<button type="button" class="before">prepend</button>
<button type="button" class="after">append</button>

5、删除

empty：删除匹配的元素集合中所有的子节点。

remove：从DOM中删除所有匹配的元素。

//删除
$(".empty").click(function() {
//删除不包含当前元素ul（ul还存在）
$("ul").empty()
})
$(".remove").click(function() {
//删除包含当前元素ul（ul不存在）
$("ul").remove()
})

------------------------------------------------------

<button type="button" class="empty">empty</button>
<button type="button" class="remove">remove</button>

6、向元素内添加元素时,不能直接添加该元素，要对其上一级元素进行添加。

//新增元素
$("ul").on("click","li",function(){
console.log($(this).text())
})

----------------------------------------------

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>

在以后的编写中，一般会对其全部进行添加元素，可以把ul变成其html中的最外部的body。