js获取被点击的元素以及子元素
生活随笔
收集整理的這篇文章主要介紹了
js获取被点击的元素以及子元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js獲取被點擊元素：
可參見原demo：https://github.com/liyuanhong/learn-js-css-html5/tree/master/html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>獲取被點擊的元素</title> </head> <style type="text/css"> body {margin: 0px;} #container {width: 700px;height: 300px;padding:5px;background-color: #edfdef;} </style> <script src="../lib/jquery/jquery/dist/jquery.min.js"></script> <script type="text/javascript"> function getClickEle(ele){console.log($(ele).val()); //方法一：通過jquery對象，獲取被點擊的元素console.log(ele.tagName); //方法二：通過傳入js 元素對象，獲取//$(document).click(function(e){console.log(e.target.value)});}function getClildVal(ele){console.log($(ele).find("#girl_1")[0].tagName); //方法五：獲取被點擊的元素的子元素轉jquery對象，再獲取子元素console.log($($(ele).find("#girl_1")[0]).attr("id")); //方法六：獲取被點擊的元素的子元素} </script> <body><div id="container"><ul id="ul_1"><li id="ul1_li1"><label>姓名:</label><input type="text" style="width:100px;" value="Mr li"></li><li id="ul1_li1"><label>電話:</label><input type="checkbox" style="width:100px;" value="1111111111" οnclick="getClickEle(this)"><label>手機:</label><input type="checkbox" style="width:100px;" value="2222222222" id="phone"><label>email:</label><input type="checkbox" style="width:100px;" value="333@333"><label>QQ:</label><input type="checkbox" style="width:100px;" value="5555555"></li><li><div style="width:200px;height:200px;background-color:gray;" οnclick="getClildVal(this)"><p>下面有個可愛的女孩：</p><label><img style="height:150px;" src="../pic/e2a508ea22d6f7fd138b4458ecce0350.jpg" id="girl_1"></label></div></li></ul></div> </body> <script type="text/javascript"> $("#phone").click(function(){ console.log($(this).val()); //方法三：獲取被點擊的元素，轉jquery對象console.log(this.tagName); //方法四：獲取被點擊的元素}); </script> </html>
參見以上代碼
總結
以上是生活随笔為你收集整理的js获取被点击的元素以及子元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： shell脚本不暂停进程，暂停几秒执行下
- 下一篇： 理解nodejs中函数的参数的来由