核心提示: jQuery 选择器得到的jquery对象和标准的 JavaScript 中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用js中的dom方法。所以,如果jquery对象要使用标准的dom方法,就需要进行对象转换。

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。

什么是jQuery对象?

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是 jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

jQuery对象转成DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);

(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。

如:var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象

如:var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

如:var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后,就可以任意使用jQuery的方法了。

通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。

最近项目中:

<td align="center"><input type="radio" name="querypiaoju" value="ruku" οnclick="querypiaoju(this)">票据入库</td>
<td align="center"><input type="radio" name="querypiaoju" value="hexiao" οnclick="querypiaoju(this)">票据核销</td>
<td align="center"><input type="radio" name="querypiaoju" value="fafang" οnclick="querypiaoju(this)">票据发放</td>
<td align="center"><input type="radio" name="querypiaoju" value="tuihui" οnclick="querypiaoju(this)">票据退回</td>
<td align="center"><input type="radio" name="querypiaoju" value="baoshi" οnclick="querypiaoju(this)">票据报失</td>
<td align="center"><input type="radio" name="querypiaoju" value="jiebao" οnclick="querypiaoju(this)">票据结报</td>

function querypiaoju(obj){
if(obj.checked){

alert(obj.value);

function doSearch(){
querypiaoju($("input[name='querypiaoju']:checked").get(0));//这里面会把jquery对象转换为原始的dom对象

}

$("#test")           //jQuery对象
$("#test")[0]       //jQuery对象->原生的DOM对象
$($("#test")[0])   //DOM对象->jQuery对象(有点绕,但只要明白使用$()后能将原生的DOM对象封装成jQuery对象即可)
话不多说,请看 代码 :/** JQuery Html Encoding、Decoding* 原理是利用 JQuery 自带的 html ()和text()函数可以转义 Html 字符* 虚拟一个Div通过赋值和取值来得到想要的 Html 编码或者解码*/// Html 编码获取 Html 转义实体function html Encode(value){return $('}// Html 解码获取 Html 实体function h... 为了解决上述问题, DOM 对象 jQuery 对象 之间在使用时经常需要 转换 。下面对 jQuery 对象 DOM 对象 的互相 转换 进行详细讲解。1. jQuery 对象 转换 DOM 对象 jQuery 对象 属于类数组 对象 ,其内部将 DOM 对象 作为数组元素。 jQuery 对象 转换 DOM 对象 有两种方式,分别为“obj[index]”和“obj.get(index)”。其中index表示 DOM 对象 jQuery 对象 中的索引。下面... 1)最佳做法是制作像my. js 这样的新javascript文件。 将此文件放入根目录 - > js / my. js 中的 js 文件夹中。 2)在my. js 文件中,在$(document).ready(function(){})范围内添加 代码 。$(document).ready(function(){$(".icon-bg").click(function () {$(".btn").toggle... 我已经看了一下,并且在解决我遇到的一个小问题时遇到了一些困难.我基本上有一串 HTML ,我把它 转换 JQuery DOM 对象 ,这样我就可以使用 JQuery 的.remove()轻松删除所有具有某个类的元素.即,var rad Html = editor.get_ html ();var jq Dom = $(rad Html );$(".thickbox", jq Dom ).remove();$(".thickbo... jQuery 对象 转换 dom 对象 只有 jQuery 对象 才能调用 jQuery 类库的各种函数,同样有些 dom 对象 的属性和方法在 jQuery 上也是无法调用的,不过基本上 jQuery 类库提供的函数包含了所有的 dom 操作。有时尤其是在初学 jQuery ,无法记住 jQuery 的所有函数时,会有很长一段时间使用 jQuery 选择器 配合原始的 dom 函数进行开发。所以两种 对象 的转化是很有必要的。 jQuery 对象 的... 在 jQuery 中,在一个页面上选择元素返回的集合是 jQuery 对象 而不是原始的 DOM 对象 . 所以只能运行 jQuery 方法. 如果要在选择集上运行 DOM 方法和属性,该集合必须转化为 DOM 对象 比如你不可以这样使用: $('div').inner HTML = "hello world"; 因为inner HTML DOM 的属性而不是 jQuery 对象 的属性.如果确实想这么做.那么就需要将jQu 1、使用 jQuery 创建元素的语法 2、把动态内容存放到数组中,再遍历数组动态创建 html 元素 3、使用模版1.使用 jQuery 动态创建元素追加到 jQuery 对象 上。<meta http-equiv="Content-Type" content="text/ html ; charset=utf-8"/> <title></title> <script src="Scripts/ jquery <meta charset="UTF-8"> <script src="./ js / jquery -3.2.1. js "></script> <title> jquery _ dom </title> 是不是很简单,这里选择作为父元素调用on方法绑定click事件,这样父元素下的所有元素都绑定了click事件,有时候并不需要所有的都绑定,那怎么办?//这里我每点击增加一次会在最后增加5行李健i,我现在要让所有的都绑定click事件(包括动态生成的)$(".h3").on("click","h3",{foo:"文本:"},function(event){h += "李健"+i+i+""; 想要使用 jQuery 将元素移动到另一个元素中,可以使用 jQuery 的内置方法append()或prepend()。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用append()方法 jQuery 的append()方法用于在所选元素的末尾插入一些内容。语法:$(selector).append( content, function(index, html ) )参数:此方法接受上述两个... 两种 转换 方式将一个 jQuery 对象 转换 js 对象 :[index]和.get(index):(1) jQuery 对象 是一个数据 对象 ,可以通过[index]的方法,来得到相应的 js 对象 。 如:var $v =$("#v") ; // jQuery 对象 var v=$v[0]; // js 对象 alert(v.checked) //检测这个checkbox是否被选中 (2) jQuery 本身提供,通过.get(... 将JQ 对象 转成 JS 对象 var $div = $("#div1"); var js Div = $div.get(0); //或者用var js Div = $div[0]; <!DOCTYPE html >