生活随笔
收集整理的這篇文章主要介紹了
JQ点击事件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
事件綁定
<script src
="./js/jquery-3.1.1.js"></script
><script
>let userOrders
= {"code":200,"msg":"success","data":[{"id":2,"username":"王晨陽","sex":"男"},{"id":1,"username":"何沛文","sex":"男"}]}$('button:nth-of-type(1)').click(function(){for(let i
=0;i
<userOrders
.data
.length
;i
++){let trNode
= document
.createElement("tr");let tdNode01
= document
.createElement("td");let tdNode02
= document
.createElement("td");let tdNode03
= document
.createElement("td");let tdNode04
= document
.createElement("td");tdNode01
.innerHTML
= userOrders
.data
[i
].id
;tdNode02
.innerHTML
= userOrders
.data
[i
].username
;tdNode03
.innerHTML
= userOrders
.data
[i
].sex
;let spanNode
= document
.createElement("span");let spanNode02
= document
.createElement("span");spanNode
.innerHTML
= "編輯";spanNode02
.innerHTML
= "刪除";tdNode04
.appendChild(spanNode
);tdNode04
.appendChild(spanNode02
);trNode
.appendChild(tdNode01
);trNode
.appendChild(tdNode02
);trNode
.appendChild(tdNode03
);trNode
.appendChild(tdNode04
);$('table')[0].appendChild(trNode
);}})$('table').on('click','span',function(){let trNode
=this.parentNode
.parentNode
;trNode
.remove();})</script
>
onchange點(diǎn)擊事件
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><title
>JQ事件綁定
-onchange
</title
></head
><body
><input type
="text" /><select name
="" id
=""><option value
="">123</option
><option value
="">456</option
><option value
="">789</option
></select
><script src
="./js/jquery-3.1.1.js"></script
><script
>$('input').change(function(){console
.log($(this).val());})$('select').change(function(){console
.log(this.selectedIndex
);})</script
></body
>
</html
>
ready事件
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><title
>JQ事件綁定
</title
><script src
="./js/jquery-3.1.1.js"></script
><script
>$(function(){$('button').click(function(){alert("----");})})$(function(){$('button').click(function(){alert("*******");})})</script
></head
><body
><button
>click
</button
></body
>
</html
>
焦點(diǎn)事件
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><title
>JQ事件綁定
</title
></head
><body
><input type
="text" /><script src
="./js/jquery-3.1.1.js"></script
><script
>$('input').on({focus
:function(){$(this).css("backgroundColor","darkorange");},blur
:function(){$(this).css("backgroundColor","white");}})</script
></body
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的JQ点击事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
