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,一经查实,立即删除!

相关文章

Effective STL中文版pdf

下载地址:网盘下载内容简介 STL是C标准库的一部分。本书是针对STL的经验总结,书中列出了50个条款,绝大多数条款都解释了在使用STL时应该注意的某一个方面的问题,并且详尽地分析了问题的来源、解决方案的优劣。转载于:https:…

关于SWT/JFace中其他常用的事件

1.addSelectionListener:这个监听器最常用. 这个addSelectionListener是一个方法,addSelectionListener(SelectionListener listener)传入的是一个 SelectionListener类型的参数对象.SelectionAdapter实现了这个SelectionListener接口. SelectionListener接口中有下面的这个两个…

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

文章目录致谢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 特征预处理…

SDWebImage原理(面试)

SDWebImage 加载图片的流程 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWebImageManager 根据 URL 开始处理图片。进入 SDWebImageManager-downloadWithURL:delegate:options:userInfo:,交给 SDImageCache 从…

Win7/8出现An error occurred on the server when processing the URL解决办法

报错:An error occurred on the server when processing the URL. Please contact the system administrator. SJY使用的是win8系统搭建的本地服务器,win7使用的方法是相同的。如果你的系统是精简版的Win7/8,那么安装IIS7也有可能出现这问题。…

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

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

59.排序好的大数据创建索引文件,并实现大文件的二分查找,根据索引百万数据秒读数据...

创建索引 1 //创建索引 2 struct index 3 { 4 //保存每行偏移的位置 5 int *pindex; 6 //文件的总长度 7 int length; 8 }allindex;//索引 初始化索引数组并把索引写入到文件 1 //初始化索引数组,并把索引写入到文件2 void init(char *path)3 {4 printf(&q…

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)数据集_…

bootstrap table入门例子

链接&#xff1a;https://pan.baidu.com/s/1jJ2Y89g 密码&#xff1a;eo7t <!DOCTYPE html> <html> <head><meta charset"utf-8"><link rel"stylesheet" type"text/css" href"lib/bootstrap.min.css">&…

Spring中实现监听的方法

在未使用框架进行编程的时候&#xff0c;我们常常在web.xml中加上这样一段话  <listener><listener-class>XXX</listener-class></listener> 在对应的类中实现ServletContextListener接口&#xff0c;这样在服务器已启动的时候&#xff0c;就会加载相…

《数学之美》读书笔记

之前拜读过吴军老师的《数学之美》。虽然这是一本科普性质的读物&#xff0c;但还是能从中获益匪浅。下面根据记忆以及之前做过的简要的书面笔记&#xff0c;做一个概括。 1.信息的作用在于消除不确定性&#xff0c;自然语言处理的大量问题都是找相关的信息。 2.关于搜索&#…

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

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

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__(…

document.all

一.document.all是页面内所有元素的一个集合。例如&#xff1a; document.all(0)表示页面内第一个元素二.document.all可以判断浏览器是否是IE if(document.all){ alert("is IE!"); }三.也可以通过给某个元素设置id属性&#xff08;idaaaa&#xff09;,然后…