日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQ点击事件

發布時間：2024/3/12 编程问答 41 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JQ点击事件 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

事件綁定

<script src="./js/jquery-3.1.1.js"></script><script>// on事件綁定的方式有兩種，第一種是直接給元素綁定事件和普通的綁定沒有區別// $('button').click(function(){});// $('button').on('click',function(){// console.log($(this).text());// })// 第二種用法是給后添加進來的元素進行時間綁定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);}})// $('span').click(function(){})// 語法:$(父元素).on(事件名,選擇器,函數)父元素必須要存在$('table').on('click','span',function(){// 當前對象所在的行進行移除// parentNode查找父元素節點let trNode=this.parentNode.parentNode;trNode.remove();})</script>

onchange點擊事件

<!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>// window.οnlοad=function(){// $('button').click(function(){// alert("-----");// })// }// // onload事件只能存在一次，多個會被覆蓋，且在DOM結構及圖片都加載完畢后才會執行函數中的代碼// window.οnlοad=function(){// $('button').click(function(){// alert("**********");// })// }// ready事件是可以多次使用,ready事件實在DOM結構加載完畢后就執行$(function(){$('button').click(function(){alert("----");})})$(function(){$('button').click(function(){alert("*******");})})/*onload和ready的區別1.onload只能使用一次，ready可以使用多次2.執行時機不同(onload實在DOM結構及圖片資源加載完后執行，ready是在DOM結構加載完后執行)*/</script></head><body><button>click</button></body> </html>

焦點事件

<!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').focus(function(){// $(this).css("backgroundColor","darkorange");// })// // 失去焦點事件// $('input').blur(function(){// $(this).css("backgroundColor","white");// })$('input').on({focus:function(){$(this).css("backgroundColor","darkorange");},blur:function(){$(this).css("backgroundColor","white");}})</script></body> </html>

總結

以上是生活随笔為你收集整理的JQ点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。