1.把jquery对象转换成dom对象,Jquery代码如下

2019-09-17 13:20 来源:未知

$("#test") //jQuery对象
$("#test")[0] //jQuery对象->原生的DOM对象
$($("#test")[0]) //DOM对象->jQuery对象(有点绕,但只要明白使用$()后能将原生的DOM对象封装成jQuery对象即可)

原html字符串如下:

jquery对象和javascript的dom对象转换,jquerydom

Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性。

Jquery对象和dom对象是可以相互转换的,因为他们所操作的对象都是dom元素,只不过jquery对象包含了多个dom元素,而dom对象本身就是一个dom元素,简单地说,jquery对象是dom元素的数组,称为类数组,而dom对象就是单个的dom元素。

1.把jquery对象转换成dom对象

(1)借助数组下标来读取jquery对象集合中的某个dom元素对象。

Var $li = $(‘li’);//jquery对象

Var li = $li[0];//dom对象

(2)借助jquery对象的get()方法

Var $li = $(‘li’);//jquery对象

Var li = $li.get(0);//dom对象

 

2.dom对象转换为jquery对象

Var li = document.getElementsByTagName(‘div’);

Var $li = $(li[o]);//把第一个div元素封装为jquery对象

Var li = document.getElementsByTagName(‘div’);

Var $li = $(li);//把所以的div元素封装为jquery对象

Load事件必须等到网页中所以内容全部加载完毕后才执行。

当网页中内容很多时,load事件就会延迟

Jquery的ready事件是在dom结构绘制完毕后就执行,也就是说它在外部文件加载之前就执行了,ready事件先于load事件。

Load事件只能被编写一次,但是ready事件可以在同一个文档中多次定义。

 

<html>

<head>

 

</head>

<body>

<div class="panel"/>wlecome</div>

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));

$('input[type="button"]')

.eq(0).click(function(){

$(this).val("红色").addClass('red'); }).end().eq(1).click(function(){

alert(1);

}).end().eq(2).click(function(){

alert(2);

}).end().eq(3).toggle(function(){

$('.panel').hide('slow');

},function(){

$('.panel').show('slow');

}

 

);

});

</script>

</body>

<html/>

 

 

 

您可能感兴趣的文章:

  • javascript中html字符串转化为jquery dom对象的方法
  • jquery对象和javascript对象即DOM对象相互转换
  • js/jQuery对象互转(快速操作dom元素)
  • NodeJS使用jQuery选择器操作DOM
  • JS、DOM和JQuery之间的关系示例分析
  • js和jquery对dom节点的操作(创建/追加)
  • 使用js dom和jquery分别实现简单增删改
  • JS/jQuery判断DOM节点是否存在的简单方法
  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
  • 原生JS和jQuery操作DOM对比总结
var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"
        + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"
        + "</div>";

DOM对象转成jQuery对象:

你这样写,意味着v是DOM对象,而$v是jquery对象,以后如果要调用,就使用$v。当然,$号不是必需的,你也可以用其他的变量名,如var jq_obj=$(v)  

   1、下面使用Jquery库将text字符串变量转为Jquery对象。

怎将JQUERY对象转成Javascript对象

$("#test") //jQuery对象
$("#test")[0] //jQuery对象->原生的DOM对象
$($("#test")[0]) //DOM对象->jQuery对象(有点绕,但只要明白使用$()后能将原生的DOM对象封装成jQuery对象即可)  

Jquery 框架为 jquery 对象定义了独立使用的方法和属性,它无法直接调用 dom 对象的方法, dom 对象...

Jquery代码如下:

  alert($(text).html());

  其中$(text)就text字符串转为了一个Jquery对象,最后将该Jquery对象的html()将html内容以字符串的形式输出,结果如下:

<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>

  说明了,$(text)Jquery对象代表的是最外层的html元素div。

  2、将Jquery对象和DOM对象之间互转。

代码如下:

var element= $(text).get(0) //element就是一个dom对象
  var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

注意:DOM对象和Jquery对象区别

在我理解,Jquery对象和DOM对象都是封装的html元素,可以对html元素节点进行操作,方便编程,但是他们之间的方法有些是不能共用的,如Jquery对象的html()方法,DOM对象就使用不了;而DOM对象的GetElementById(),Jquery对象也不能使用。所以在必须要的时候可以进行相互转换。

  3、使用js代码将text字符串变量转为DOM对象。

js代码如下:

TAG标签:
版权声明:本文由凯时国际ag下载发布于技术核心,转载请注明出处:1.把jquery对象转换成dom对象,Jquery代码如下