核心提示:
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
>