juqery和dom对象互换

简介: 一、jQuery对象与DOM对象相互转换 1.jQuery对象转DOM对象   Js代码   var $cr  = $("#cr");    //jQuery对象   //转换成DOM对象,索引号从0开始,选取对应节点   var cr = $cr[0];    //或 var cr = $cr.

一、jQuery对象与DOM对象相互转换

1.jQuery对象转DOM对象

 

Js代码   
  1. var $cr  = $("#cr");    //jQuery对象  
  2. //转换成DOM对象,索引号从0开始,选取对应节点  
  3. var cr = $cr[0];    //或 var cr = $cr.get(0);  
  4. alert(cr.checked);    //DOM方法检测这个checkbox是否被选中  

 

 

 

2.DOM对象转jQuery对象

 

Js代码   
  1. var cr = document.getElementById("cr");    //DOM对象  
  2. var $cr = $(cr);    //jQuery对象  

 

 

二、解决与其他js库冲突

1.jQuery在其他库之前导入,可直接使用jQuery,无需调用jQuery.noConflict()函数

 

Js代码   
  1. <script type="text/javascript" src="./jquery-1.4.2.js"></script>  
  2. <script type="text/javascript" src="./prototype-1.6.1.js"></script>  

 

 

2.jQuery在其他库之后导入

 

Js代码   
  1. jQuery.noConflict();  //将变量$的控制权移交给prototype.js  
  2. jQuery(function(){  //使用jQuery  
  3.     jQuery("p").click(function(){  
  4.         alert(jQuery(this).text());  
  5.     });  
  6. });  
  7. $("pp").style.display='none';  //使用prototype  
  8. $j = jQuery.noConflict();  //自定义一个快捷给jQuery,将变量$的控制权移交给prototype.js  
  9. $j(function(){  //使用jQuery,利用自定义快捷$j  
  10.     $j("p").click(function(){  
  11.         alert($j(this).text());  
  12.     });  
  13. });  
  14. $("pp").style.display='none';  //使用prototype  

 

 

 

Js代码   
  1. jQuery.noConflict();  //将变量$的控制权移交给prototype.js  
  2.   
  3. (function($){  //定义匿名函数并设置形参为$  
  4.     $(function(){  //匿名函数内部$均为jQuery  
  5.         $("p").click(function(){alert($(this).text());});  
  6.     });  
  7. })(jQuery);  
  8. $(“pp”).style.display='none';  //使用prototype   
  9. jQuery.noConflict();  //将变量$的控制权移交给prototype.js  
  10. jQuery(function($){  //使用jQuery加载页面函数  
  11.     $(function(){  //内部继续使用$均为jQuery          
  12.         $("p").click(function(){alert($(this).text());});      
  13.     });  
  14. });  
  15. $("pp").style.display='none';  //使用prototype   
目录
相关文章
N..
|
6月前
|
JavaScript 前端开发 UED
DOM编程中的form对象
DOM编程中的form对象
N..
37 0
|
6月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
23天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
3月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
22 1
js之DOM 文档对象模型
|
3月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
53 1
|
3月前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
41 0
|
3月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
5月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
42 1
|
4月前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
56 0
|
5月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换