`

jQuery之DOM

阅读更多
参考资料
1 跳蚤的小窝:)jQuery对象和DOM对象【jQuery开发注意点(一)】
http://www.blogjava.net/jy00314996/archive/2009/02/17/255083.html
2 浅谈jQuery
http://www.7lemon.net/2011/04/jquery-at-a-glance.html
jQuery对象和DOM对象是二个不同的概念,这二者之间方法不能共用!
1 DOM对象转成jQuery对象
只需要通过$()来包装DOM对象就可以了
2.jQuery对象转成DOM对象:
首先先要明白的是jQuery是一个数组,所以转换为DOM对象有二种方法:[index]和.get(index);

示例1如下:
 //等待dom元素加载完毕.
	$(document).ready(function(){
	    var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
		var $jQueryObj = $(domObj);  //jQuery对象
		alert("DOM对象:"+domObj.innerHTML);
		alert("jQuery对象:"+$jQueryObj.html());
    }); 

<h3>例子</h3>

示例2如下:
$(function(){
			    //把jQuery对象转换为DOM对象
			    /*
			    var $li = $("li");    	//返回jQuery对象
			    //var li =$li[0];     	//返回DOM对象
			    var li =$li.get(0);    	//返回DOM对象
			    alert(li.innerHTML);
			    */
			    
			  //把DOM对象转换为jQuery对象
		      var li = document.getElementsByTagName("li");    //获取所有li元素
			  var $li = $(li[0]);    //把第一个li元素封装为jQuery对象
			  alert($li.html());    //调用jQuery对象的方法		
			  $('ul').append($('<li>new item</li>'));
			  	    
			});	
			
			$(function(){ 
			    $('ul').css('color','red');
			});


<h1>标准DOM</h1>
        <p>这是一份简单的<strong>文档对象模型</strong></p>
        <ul>
            <li>D表示文档,DOM的物质基础</li>
            <li>O表示对象,DOM的思想基础</li>
            <li>M表示模型,DOM的方法基础</li>
        </ul>       
分享到:
评论

相关推荐

    JQuery DoM和ajax 操作

    **jQuery DOM操作** jQuery库是JavaScript的一个强大工具,它极大地简化了对DOM(Document Object Model)的操作。DOM是HTML和XML文档的结构化表示,允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的...

    Jquery+dom+easyUI教程

    jQuery 是一个广受欢迎的 JavaScript 库,其核心理念是简化 DOM 操作,处理事件和创建动画,同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...

    jquery的dom资料

    jquery的dom资料,学习jquery的使用,以及jquery的dom资料,学习jquery的使用,以及jquery的dom资料,学习jquery的使用,以及

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...

    基于JQuery的DOM元素操作技术详解

    内容概要:本文档详细介绍了基于 JQuery 的 DOM 元素操作,涵盖了各种常见的网页元素操作技巧。具体如专业下拉列表赋值、文本框赋值、单选按钮设置默认选中项、遍历数组展示到页面、更改表格行的背景色以及跳转、...

    jQuery DOM节点操作源码

    1. **选择器**:jQuery 的核心功能之一就是强大的选择器机制,它允许开发者通过CSS选择器、ID、类名、属性等来选取DOM元素。例如,`$("#myID")` 选择ID为"myID"的元素,`$(".myClass")` 选择所有类名为"myClass"的...

    Ch08-jQuery操作DOM核心笔记.txt

    Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt

    弹出层的例子(含jquery.DOMWindow脚本)

    这里我们关注的是一个包含`jquery.DOMWindow`脚本的弹出层例子。`jQuery`是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。`DOMWindow`则是基于jQuery的一个插件,用于创建可定制的弹出...

    jQuery基础DOM和CSS操作源码

    这个"jQuery基础DOM和CSS操作源码"的压缩包显然是一份面向初学者的学习资源,包含了理论讲解和实践代码示例,帮助初学者理解并掌握jQuery在DOM操作和CSS选择器方面的应用。 DOM(Document Object Model)是HTML和...

    jQuery之DOM对象和jQuery对象的转换与区别分析

    DOM对象和jQuery对象是前端开发中常见的两种对象类型,它们各有特点和用途,且可以互相转换,了解它们之间的差异和转换方法对于前端开发人员是非常重要的。 首先,DOM(文档对象模型)对象是浏览器提供的用于操作...

    Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM

    Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶

    jQuery操作DOM解析

    **jQuery操作DOM解析** 在Web开发中,DOM(Document Object Model)是HTML或XML文档的结构化表示,它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作,提供了丰富的API来处理...

    《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

    1. **选择元素**: jQuery的选择器是其强大之处之一。它可以使用CSS选择器、ID选择器、类选择器、属性选择器等多种方式来选取DOM元素。例如,`$("#myID")`选择ID为`myID`的元素,`$(".myClass")`选择所有类名为`...

    jquery.DOMWindow弹出层与TAB切换实例汇总.rar

    jquery.DOMWindow弹出层与TAB切换实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、各种颜色的背景浮动框、弹出后背景会变暗的浮动...

    php仿jQuery控制dom | php采集

    【标题】:“php仿jQuery控制DOM | php采集” 在PHP中,我们经常需要处理HTML文档,比如进行网页抓取或动态生成HTML内容。虽然PHP原生提供了DOMDocument和DOMXPath等库来操作DOM(文档对象模型),但这些方法相对...

    使用jQuery监听DOM元素大小变化

    在JavaScript和jQuery的世界里,有时候我们需要监听DOM元素的尺寸变化,以便在元素尺寸改变时执行特定的操作。jQuery的`resize`事件通常用于监听窗口大小的变化,但jQuery还提供了一种扩展,使得我们可以将`resize`...

    JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先...

    jquery对象和dom对象

    jQuery是一个广泛使用的JavaScript库,它的核心功能之一就是简化DOM操作。通过jQuery选择器,我们可以轻松地选取DOM元素,并将其转换为jQuery对象。jQuery对象拥有丰富的API,提供了更加简便的方式来操作DOM,如`$...

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料.zip

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...

Global site tag (gtag.js) - Google Analytics