1.事件
(1)
JS代码
当元素的值发生改变时,会发生 change 事件。
$("select").change(function() {
console.log($(this).val())
})
HTML代码:
<!--size可以选中多个信息,是从1开始的-->
<select name="" size="">
<option value="1">足球</option>
<option value="2">篮球</option>
<option value="3">乒乓球</option>
</select>
(2)
blur()事件失去焦点的时候显示账号
$("#txt").blur(function() {
if($(this).val()==="")
$(this).val("账号")
})
HTML代码
<input type="text" id="" value="" placeholder="1111" />
<input type="text" id="txt" value="" />
(3)
JS代码
focus(事件):获得焦点
$("#txt").focus(function() {
if($(this).val()==="账号")
$(this).val("")
})
HTML代码
<input type="text" id="" value="" placeholder="1111" />
<input type="text" id="txt" value="" />
(4)
鼠 标指针位于元素上方时,会发生 mouseover 事件。
$("button").mouseover(function() {
$(this).css("color","red")
})
效果:
HTML代码
<div class="div">
<button type="button">点击</button>
</div>
(5)
JS代码:
$("button").mouseout(function() {
$(this).css("color","black")
})
效果:
HTML代码
<div class="div">
<button type="button">点击</button>
</div>
(6)
JS代码:
// 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数
// 注意hover 只传一个参数是传的out值
$("button").hover(function() {
$(this).css("color", "red")
},
function() {
$(this).css("color", "black")
})
HTML代码
<div class="div">
<button type="button">点击</button>
</div>
(7)
JS代码:
// on 在选择元素上绑定一个或多个事件的事件处理函数。
//注意:一个或多个用空格分隔的事件类型和可选的命名空间
$("#txt").on("click dblclick", function() {
console.log(1)
})
效果:
HTML代码
<input type="submit" id="" name="" value="提交" />
2,文档处理
(1)内部插入=>子节点
$(".append").click(function () {
//向每个匹配的元素内部追加内容。
//所有子元素之后
$("ul").append("<li>列表 append</li>")
})
$(".prepend").click(function () {
//向每个匹配的元素内部前置内容。
//所有子元素之前
$("ul").prepend("<li>列表 prepend</li>")
})
(2)
//外部插入
$(".before").click(function () {
//当前元素之前
$("ul").before("<div>列表 before</div>")
})
$(".after").click(function () {
//当前元素之后
$("ul").after("<div>列表 after</div>")
})
(3)
删除
// empty:把所有段落的子元素(包括文本节点)删除
$(".empty").click(function () {
//当前元素之后
$("ul").empty()
})
// 从DOM中删除所有匹配的元素。
$(".remove").click(function () {
//当前元素之后
$("ul").remove()
})
HTML(1)(2)(3)的总体代码
button type="button" class="append">append</button>
<button type="button" class="prepend">prepend</button>
<br>
<button type="button" class="before">before</button>
<button type="button" class="after">after</button>
<br>
<button type="button" class="empty">empty</button>
<button type="button" class="remove">remove</button>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>