深入浅析jQuery对象$.html

$对象

　　说起jQuery，最明显的标志，毫无疑问，就是， ，其实是jquery的简写。而使用$()包装的对象就是jQuery对象

　　与jQuery对象相对应的就是DOM对象，DOM对象其实就是DOM元素节点对象

　　如果直接写document，则指的是document的DOM元素对象

document.onclick = function(){
alert('dom');
}

　　而如果用()包括起来，如 ()包括起来，如(document)，是jQuery(document)的简写形式，则指的是jQuery对象

<script src="jquery-3.1.0.js"></script>
<script>
console.log(jQuery(document));//[document]
console.log($(document));//[document]
console.log(document);//#document
</script>

　　[注意]jQuery对象无法使用DOM对象的方法，DOM对象也无法使用jQuery对象的方法

<script src="jquery-3.1.0.js"></script>
<script>
//无反应
$(document).onclick = function(){
alert(0);
};
//Uncaught TypeError: document.click is not a function
document.click(function(){
alert(1);
});
</script>

转换

【1】DOM转jQuery对象

　　对于一个jQuery对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象

【2】jQuery转DOM对象

　　jQuery是一个类数组对象，可以通过[index]或get(index)的方法得到相应的DOM对象

console.log(document === $(document)[0]);//true
console.log(document === $(document).get(0));//true

 共存

　　如果jQuery对象和DOM对象指向同一对象，绑定不同函数，则函数会按照顺序依次执行

//先弹出0，再弹出1
document.onclick = function(){
alert(0);
}
$(document).click(function(){
alert(1);
});

以上所述是小编给大家介绍的jQuery对象$.html，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery获取单击节点对象的方法

    本文实例讲述了jQuery获取单击节点对象的方法.分享给大家供大家参考,具体如下: event.target属性: <script language="JavaScript" type="text/javascript"> $("document").ready(function () { $(".menu").bind("click", function (event) { var click

  • jquery中常用的SET和GET$(”#msg”).html循环介绍

    复制代码 代码如下: $("#msg").html(); //返回id为msg的元素节点的html内容. $("#msg").html("new content"); //将"new content" 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $("#msg").text(); //返回id为msg的元素节点的文本内容. $("#msg").t

  • jquery 的 $("#id").html() 无内容的解决方法

    我加了一个 $("#id").html("<span>"+result+"</span>"); 加上span就行了!!! 在这里记录一下. 一般的解决方法:注意result的命名是不是跟一些自带重复,建议用content等. 今天我在把这个写成一个函数的时候,也需要注意一下: function doad(datastr,id){ //getid(id).innerHTML = datastr; $("#"

  • html文件中jquery与velocity变量中的$冲突的解决方法

    问题描述: 在使用velocity模版引擎的环境下,使用jquery时,如:$.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/sfzc1%40realintelligence.com/public/basic') 其中$与velocity变量中的$冲突. 解决方案: 定义一个velocity变量:#set($jquery="$.") 然后:${jquery}fullCalendar.gcalFeed('http:

  • jQuery对象与DOM对象转换方法详解

    本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作.有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发.所以两种对象的转化是很有必要的. jQuery对象的索引保存的是do

  • jquery遍历json对象集合详解

    本文实例采用案例分析的方法介绍了jquery遍历json对象的三种情况,供大家参考,具体内容如下 第一个案例:jquery 遍历json对象集合 常用示例 jsp中 $.ajax({ url: "${applicationScope.rootpath}common/getContractPage.html?userConId=${userConId}", type: "post", dataType:"json", data: {}, succe

  • jQuery深拷贝Json对象简单示例

    本文实例讲述了jQuery深拷贝Json对象的简单实现方法.分享给大家供大家参考,具体如下: var oldJson = { Name: 'quber', List: [1, 2, 3, 4], Obj: [ { name: 'qubernet', fun: function () { return 1; } }, { name: 'qubernet1', fun: function () { return 2; } } ] }; var newJson = $.extend(true, {},

  • jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码) <script type="text/javascript" src="script/jquery-1.8.3.js"></script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段

  • 深入浅析jQuery对象$.html

    $对象 说起jQuery,最明显的标志,毫无疑问,就是, ,其实是jquery的简写.而使用$()包装的对象就是jQuery对象 与jQuery对象相对应的就是DOM对象,DOM对象其实就是DOM元素节点对象 如果直接写document,则指的是document的DOM元素对象 document.onclick = function(){ alert('dom'); } 而如果用()包括起来,如 ()包括起来,如(document),是jQuery(document)的简写形式,则指的是jQue

  • 浅析jQuery 遍历函数，javascript中的each遍历

    jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元

  • 浅析jquery数组删除指定元素的方法:grep()

    遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样的: var sexList=new Array[3]; sexList[0]="1"; sexList[1]="2"; sexList[2]=""; 想达到的效果 我想达到的效果是这样的: 删除索引=1的元素,并返回新数组. 返回的结果是: var sexList=new Array("1",""); 我们知道

  • 浅析jquery如何判断滚动条滚到页面底部并执行事件

    本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. 首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jQuery学习笔记之DOM对象和jQuery对象

    jQuery学习笔记之DOM对象和jQuery对象

    什么是DOM对象? HTML是以树形结构来组织文档的,具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 浅析jQuery 3.0中的Data

    浅析jQuery 3.0中的Data

    jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery.这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一路走来,颇为不易. 一.Data浅析 jQuery 3.0 中的 Data 是内部使用的,定义为一个"类".一共用它创建了两个对象,dataPriv 和 dataUser.Data 有 1 个对象属性(expando)和类属性(uid),有 6 个方法,如下 下面分别解读 1.Data.ui

  • 浅析jquery与checkbox的checked属性的问题

    1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系 3.使用document.getElementById("checkbox_id").checked获取的值与是否钩上一至,即与所见即所得 4.使用$("#checkbox_

  • 浅析jquery unbind()方法移除元素绑定的事件

    unbind()方法可以移除元素已绑定的事件,它的调用格式如下: $(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称. 语法  unbind()函数主要有以下两种形式的用法: 用法一: jQueryObject.unbind( [ events [, handler ]] ) 移除当前匹配元素的events事件绑定的事件处理函数handler. 用法二: jQueryObject.unb

  • 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

    在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: 复制代码 代码如下: function ManageCommentText(text) {var result = text;$.ajax({data: "get",url: "GetComments.aspx",data: "typ

随机推荐