Jquery对象和DOM对象---Jquery API (1)

文/饥人谷_韩宝亿(简书作者)
原文链接:http://www.jianshu.com/p/98a0c82c47e4
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

一、为什么要用Jquery?

DOM API

1.难用

  要想拿到一个对象,要写很长的代码比如document.getElementById('xxx'),但是如果是Jquery的话可以直接$('#xxx')。

2.存在兼容性问题

  采用DOM操作的时候往往需要兼容IE和非IE浏览器问题,

3.功能太少,不能与时俱进

  DOM可以获取第一个子元素却不能获取第二个子元素,而且有时候还要搞一个判断语句,很麻烦。

Jquery API

1.兼容性好

2.API友好

 比如在做事件监听的时候DOM需要addEventListener和attachEvent等等;而Jquery直接为我们封装为on(),bind()。 还有就是它可以链式操作。

3.功能强大,与时俱进

二、什么时候适合用Jquery?


Paste_Image.png

三、Jquery对象与DOM对象可以相互转换


Paste_Image.png


图中代码
var node=document.getElemtById('foo')表示node是DOM获取的一个对象,
var $node=$('#foo')表示$node是Jquery获取的一个对象。
node===$node[0]
node===$node.get(0)
所以,$node[0]===$node.get(0),DOM提供了一个get()API调用方式,这两种写法是等价的。($node[0]/$node.get(0) //Jquery ->DOM ; $(node) //DOM->Jquery )

四、Jquery对象与DOM对象的调用方法不一样


Paste_Image.png
DOM对象只能用DOM API调用,Jquery对象只能用Jquery API来调用。

例如上图所示:
node对象只能通过getAttribute('name')和setAttribute('name','bar')两个DOM API来获取和设置对象的属性;
$node对象只能通过attr('name')和attr('name','bar')两个Jquery API来获取和设置对象的属性。

如果两者用混了会返回undefined!

五、DOM的get()方法和Jquery的eq()方法


Paste_Image.png


上图代码表示:
1、console.log($("div").get(0));//拿到的是DOM元素;
2、console.log($("div").eq(0));//拿到的是Jquery元素;
3、console.log($($("div").get(1)));//DOM元素转换为Jquery元素。

eq()和get()一样,都是获取元素的下标,Jquery对象默认是一个伪数组!

六、after(),before(),append(),prepend(),appendTo() API


Paste_Image.png


上图代码表示:
1、after()方法是将对象作为元素的弟弟放入DOM结构;
2、before()方法是将对象作为元素的哥哥放入DOM结构;
3、append()方法是将对象作为元素的小儿子放入DOM结构;
4、prepend()方法是将对象作为元素的大儿子放入DOM结构;
5、appendTo() 方法表示$("div").append($p)->($p).appendTo$("div"),它们是等价的。

转载于:https://www.cnblogs.com/hanbaoyi/p/5288052.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/398686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习的练功心法(三)——特征工程

文章目录致谢3 特征工程3.1 Sklearn工具及数据集3.2 数据集3.3 数据集的划分3.4 特征工程介绍3.4.1 为什么需要特征工程3.4.2 什么是特征工程3.4.3 特征提取3.4.3.1 字典特征提取3.4.3.2 文本特征提取3.4.3.3 中文文本特征提取3.4.3.4 TF-IDF算法3.5 特征预处理3.5.1 特征预处理…

数据库杂谈(六)——数据库管理系统

文章目录6 数据库管理系统6.1 数据库管理系统结构简介6.2 进程结构6.2.1 进程的分类6.2.2 线程的由来6.2.3 建立进程的过程6.3 数据目录6 数据库管理系统 6.1 数据库管理系统结构简介 数据库管理系统DBMS是数据库系统的核心。而目前市场上我们接触到的商品化DBMS大多数是关系…

booth算法实现乘法器

booth算法充分的利用到了补码的重要性,使得我们在利用补码进行计算时减少了很多时序。下面的表格是我们假设2 作为乘数所进行的分析。接下来,我将用代码向大家阐述。 1、开始的时候在乘数2的‘负一位’加上一个默认0值00100 2、先判断[0:-1],结果是2‘b0…

OS实验一实验报告

实验一、命令解释程序的编写实验 专业:商业软件工程 姓名:王泽锴 学号:201406114113 一、实验目的 (1)掌握命令解释程序的原理; (2)*掌握简单的DOS调用方法; &#xf…

机器学习的练功方式(四)——KNN算法

文章目录致谢致歉4 KNN算法4.1 sklearn转换器和估计器4.1.1 转换器4.1.2 估计器4.2 KNN算法4.2.1 概述4.2.2 电影类型分析4.2.3 算法实现致谢 闵氏距离_百度百科 (baidu.com) 机器学习之KNN(k近邻)算法详解_平原的博客-CSDN博客_knn 鸢尾花(Iris)数据集_…

数据库杂谈(七)——数据库的存储结构

文章目录7 数据库的存储结构7.1 数据库访问管理-文件组织7.2 数据库访问管理——索引技术7 数据库的存储结构 让我们重新温习第六讲的所学知识。 这个图实际上我们要关注的是蓝色箭头指向的那一层。在这一层之上,我们都是对SQL语句动手,而在这一层之下&…

JSP中直接在输入框中校验

jsp: <label class"control-label col-sm-2" for"codeAdd">险种代码<span style"color: red;">*</span></label> <div classcontrols col-sm-4> <input class"form-control remote-validate" data-r…

【iCore3 双核心板_FPGA】例程十二:Modelsim仿真实验

实验指导书及代码包下载&#xff1a; 链接&#xff1a;http://pan.baidu.com/s/1hs4zNFY 密码&#xff1a;5z62 iCore3 购买链接&#xff1a; https://item.taobao.com/item.htm?id524229438677

机器学习的练功方式(五)——模型选择及调优

文章目录5 模型选择及调优5.1 数据增强5.2 过拟合5.3 交叉验证5.4 超参数搜索——网格搜索5 模型选择及调优 5.1 数据增强 有时候&#xff0c;你和你的老板说你数据不够&#xff0c;它是不会理你的。老板会发问&#xff1a;为什么你是做机器学习的要那么多数据干嘛&#xff0…

关于内存的一些基础知识

1、free&#xff1a;Display amount of free and used memory in the system. free显示的数值来自/proc/meminfo&#xff08;默认单位是KB&#xff09;。各个项的含义分别是&#xff1a; 1&#xff09;Mem这一行&#xff0c;shared&#xff1a;已废弃&#xff1b;buffers&#…

Flask 单例模式 session

一、单例模式 单例模式分为四种&#xff1a;基于文件的单例模式&#xff0c;基于类方法的单例模式&#xff0c;基于__new__的单例模式&#xff0c;基于metaclass的单例模式 1. 基于类方法的单例模式 - 不支持多线程模式 import threadingclass Singleton(object):def __init__(…

数据处理工具(一)——Matplotlib

文章目录致谢1 Matplotlib1.1 什么是Matplotlib1.2 实现一个简单的图1.3 Matplotlib三层结构1.3.1 容器层1.3.2 辅助显示层1.3.3 图像层1.3 使用模块1.3.1 画布的设置1.3.2 添加网格辅助背景1.3.3 附加属性1.3.4 标签1.3.5 刻度1.3.6 一个图上多条线1.3.7 子区域1.4 基础图表1.…

Java解析Rss(三)

2019独角兽企业重金招聘Python工程师标准>>> package com.ninemax.application.rss;import java.net.URL; import java.text.SimpleDateFormat; import java.util.List;import com.sun.syndication.feed.synd.SyndCategory; import com.sun.syndication.feed.synd.S…

Redis服务器启动之后3个警告信息的解决方案

今天是年前最后一篇文章了&#xff0c;不想写太多的东西&#xff0c;就写一些有关Redis相关问题的解决方案。当我们启动了Redis服务器之后&#xff0c;会看到3个警告&#xff0c;如果没看到&#xff0c;那是很好的&#xff0c;但是我看到了。看到了就不能不管&#xff0c;所以就…

ASP .NET MVC 之Entity Framework入门教程及源码

本文主要的目的是 1. 说明Entity Framework Power Tools如何使用。 2. Entity Framework 快速门 实验环境&#xff1a; OS: Windows Server 2012, Windows 7 DE: VS2013 MVC 6.0Entity Framework SQL Server 2012 准备工作 基于现有数据库生成POCO数据类和数据库上下文需要借…

机器学习的练功方式(六)——朴素贝叶斯

文章目录致谢6 朴素贝叶斯6.1 概述6.2 概率论6.2.1 大数定律6.2.2 基本概念6.2.3 极大似然估计6.2.4 多项式分布6.2.4.1 伯努利分布6.2.4.2 二项分布6.2.5 朴素贝叶斯6.3 朴素贝叶斯文本分类6.3.1 一个例子6.3.2 拉普拉斯平滑系数6.3.3 算法实现6.4 贝叶斯分类器6.4.1 多项式贝…

数据库杂谈(八)——查询优化

文章目录8 查询优化8.1 概述8.2 查询数和语法树8.3 代数优化8.4 物理优化8.5 连接操作优化8.5.1 嵌套循环法8.5.2 利用B树索引或哈希索引寻找匹配元组法8.5.3 散列连接法8.6 后话8 查询优化 8.1 概述 我们不管是在数据库软件如MySQL、SQLServer等&#xff0c;还是通过应用程序…

Android-入门学习笔记-使用 CursorLoader 加载数据

3 使用这个代码片段开始练习 也可以参考 Codepath 教程 高级内容补充: 你是否在思考ArrayAdapter’s 的 getView() 方法和CursorAdapter 的 newView() 和 bindView() 方法? 你可以查看 CursorAdapter 类的源码. getView() 方法依然存在, 但是它实际根据是否存在列表项能够被循…

在 Angularjs 中 ui-sref 和 $state.go 如何传递参数

1 ui-sref、$state.go 的区别 ui-sref 一般使用在 <a>...</a>&#xff1b; <a ui-sref"message-list">消息中心</a> $state.go(someState)一般使用在 controller里面&#xff1b; .controller(firstCtrl, function($scope, $state) {$state.…

机器学习的练功方式(七)——决策树

文章目录致谢7 决策树7.1 认识决策树7.2 决策树原理7.3 信息论7.3.1 信息熵7.3.1.1 熵7.3.1.2 信息7.3.1.3 信息熵7.3.2 信息增益7.4 决策树实现7.5 决策图7.6 后话致谢 信息熵是什么&#xff1f; - 知乎 (zhihu.com) 没有免费午餐定理_百度百科 (baidu.com) 7 决策树 决策树(…