jquery(3)

1.事件

(1)

JS代码

当元素的值发生改变时,会发生 change 事件。


$("select").change(function() {

console.log($(this).val())
})

jquery(3)

 

 

 

 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("账号")
      })

 

jquery(3)

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("")
          })

jquery(3)

 

 

HTML代码

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

(4)

   鼠 标指针位于元素上方时,会发生 mouseover 事件。
        $("button").mouseover(function() {
          $(this).css("color","red")
        })

效果:

jquery(3)

 

 

HTML代码

<div class="div">
<button type="button">点击</button>
</div>

(5)

JS代码:

$("button").mouseout(function() {
$(this).css("color","black")
})

效果:

jquery(3)

 

 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)
})

效果:

jquery(3)

 

 

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>

上一篇:Discuz! ML RCE漏洞 getshell 复现


下一篇:apply和call改变作用域