JQuery对象与DOM对象相互转换以及JS和JQyery获取<select>元素当前值的方法

来源：互联网发布：淘宝天猫运营招聘编辑：程序博客网时间：2024/06/05 17:38

<!DOCTYPE html><html><head><title>JQuery Object and DOM Object</title><script type="text/javascript" src="..\js\jquery-3.2.1.js"></script></head><body><div><select id="opt" onchange="logValueChange()"><option value="op1">option1</option><option value="op2">option2</option><option value="op3">option3</option></select></div><p>JQuery对象和DOM对象不能混肴，JQuery对象不能直接调用原生JS对象的任何方法，JS对象也不能直接调用JQuery对象的方法；但是二者之间是可以相互转换的。JQuery对象转换为DOM对象：var JQueryToDOM = $option[0]; 或者 var JQueryToDOM = $option.get(0);DOM对象转换为JQuery对象：var DOMtoJQuery = $(option);//原生js获取<select>元素选中的值var obj = document.getElementById("opt");var index = obj.selectedIndex;var opt = obj.options[index].value;var optText = obj.options[index].text;console.log(opt+" : "+optText);//jquery获取<select>元素选中的值var $opt = $("#opt").val();var $optText = $("#opt option:selected").text();console.log($opt+" : "+$optText);</p><script>var $option = $("#opt");//JQuery对象var option = document.getElementById("opt");//DOM对象/*console.log($option);console.log(option);*///JQuery对象转换为DOM对象var JQueryToDOM = $option[0];//var JQueryToDOM = $option.get(0);//DOM对象转换为JQuery对象var DOMtoJQuery = $(option);function logValueChange(){//原生js获取<select>元素选中的值var obj = document.getElementById("opt");var index = obj.selectedIndex;var opt = obj.options[index].value;var optText = obj.options[index].text;console.log(opt+" : "+optText);//jquery获取<select>元素选中的值var $opt = $("#opt").val();var $optText = $("#opt option:selected").text();console.log($opt+" : "+$optText);}</script></body></html>

阅读全文

0 0