jquery对象和dom对象转换,jquery对象和dom对象区别 收藏 0

Jquery 详细用法

(1)jQuery是什么? 是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成 一个jQuery对象 。封装成jQuery对象的目的有两个： 一是为了 兼容不同的浏览器 ，另外，也 简化了代码 。

(2)编程的基本步骤 first.html step1, 利用选择器查找节点。选择器类似于css选择器。 step2, 调用jQuery对象的方法或者属性。

(3) jQuery对象与dom对象之间的相互转换 first.html。 a, dom对象 —> jQuery对象 $(dom对象) b, jQuery对象 —> dom对象 方式一: $obj.get(0) 方式二: $obj.get()[0]

1) 基本选择器 #id .class element selector1,selector2..selectorn *

2) 层次选择器 select1 select2 select1>select2 select1+select2 select1~select2

3 )过滤选择器 (1)基本过滤选择器 selector / s3.html :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) (2 )内容过滤选择器 selector : contains(text) 匹配包含给定文本的元素 : empty 匹配所有不包含子元素或者文本的空元素 : has(selector) 匹配含有选择器所匹配的元素的元素 : parent 匹配含有子元素或者文本的元素 (3) 可见性过滤选择器 selector :hidden 匹配所有不可见元素，或者type为hidden的元素 :visible 匹配所有的可见元素 (4) 属性过滤选择器 [attribute] [attribute=value] [attribute!=value] (5) 子元素过滤选择器 :nth-child(index/even/odd) (6) 表单对象属性过滤选择器 :enabled :disabled :checked :selected

4) 表单选择器 :input :text :pasword :radio :checkbox :submit :image :reset :button :file :hidden

(1)查询 dom / d1.html a, 查询或者修改节点的html内容 html() b, 查询或者修改节点的文本 text() c, 查询或者修改节点的属性 attr() d, 查询或者修改节点的值 val() 2) 创建 $(html) 3) 插入节点 append(): 向每个匹配的元素 内部追加内容 prepend() : 向每个匹配的元素 内部前置内容 after() : 在每个匹配的 元素之后插入内容 before() : 在每个匹配的元素 之前插入内容 4)删除节点 dom / d3.html remove() remove(selector) empty():清空节点 5) 将javascript代码与html分离 dom / d4.html $(fn); 6)复制节点 dom /d5.html clone() clone(true) : 使复制的节点也具有行为 (将事件处理代码一块复制) 7) 属性操作 读取：attr(\’id\’); 设置： attr(\’id\’,\’d1\’) 或者一次 设置多个 attr({\”id\”:\”d1\”,\”class\”:\”s1\”}); 删除：removeAttr(\’id\’) 8 )样式操作 dom / d6.html 获取和设置: attr(\”class\”,\”\”) 或者 attr(\”style\”,\”\”) 追加: addClass(\’s1\’) 移除: removeClass(\’s1\’) 或者 removeClass(\’s1 s2\’) 或者 removeClass() //会删除所有样式 切换样式： toggleClass ,有该样式，就删除，没有，就添加。 是否有某个样式 hasClass(\’s1\’) 读取 css(\’font-size\’) 设置 css(\’font-size\’,\’60px\’) 或者 css({\’\’:\’\’,\’\’:\’\’}) //设置多个样式 9) 遍历节点 dom / d7.html children() / children(selector) 只考虑子元素，不考虑其它后代元素。 next()/next(selector)下一个兄弟 prev()/next(selector):前一个兄弟 siblings()/siblings(selector)其它兄弟 find(selector):从当前节点开始查找后代。 parent():父节点 4、jQuery如何处理事件 1) 事件绑订 event / e1.html bind(type,fn) type:事件类型 fn:事件处理函数 2) 绑订方式的简写形式 click(function(){ }); 3) 合成事件 event/e2.html e3.html hover(enter,leave) : 模拟光标悬停事件 toggle(fn1,fn2…)： 模拟鼠标连续单击事件 4)事件冒泡 event/ e4.html a,什么是事件冒泡? 子节点产生的事件会依次向上抛给相应的父节点。 b,如何取消事件冒泡? event.cancelBubble = true; c, 如何获得事件对象? 只需要给事件处理函数添加event作为参数，比如 <a href… οnclick=\”clickA(event);\”> d, 事件对象的作用? 作用1： 找到事件源 event.target; firefox,chrome支持 event.srcElement; ie支持 event.target || event.srcElement 作用2: 获得鼠标点击的坐标 event.clientX;event.clientY; (1)获得事件对象 event / e5.html 只需要给事件处理函数传一个参数。 click(function(event){ }); (2)事件对象的作用 a,获得事件源 event.target; b,获得鼠标点击的坐标 event.pageX event.pageY c,事件类型 event.type (3 )停止冒泡 event / e6.html event.stopPropagation() (4) 停止默认行为 event.preventDefault() 5) 模拟操作 event / e7.html trigger(\’click\’)

2、动画

1)、show(), hide() animate / a1.html a,作用: 通过同时改变元素的宽度和高度来实现显示或者隐藏。 b,用法: show(速度,[callback]) 速度: \’slow\’,\’normal\’,\’fast\’,也可以用毫秒数 callback: 当整个动画执行完毕之后，会立即调用这个函数(回调函数)。 2)、slideUp() slideDown() animate / a1.html a,作用：通过改变元素的高度来实现显示或者隐藏 b,用法：同show 3)、fadeIn() fadeOut() animate / a2.html a,作用：通过改变不透明度来实现显示或者隐藏 b,用法：同show 4)、自定义动画 animate animate / a3.html 用法: animate(params,speed,[callback]) params: 是一个javascript对象，描述了 动画完成之后元素的样式。 比如: {\’left\’:\’500px\’,\’top\’:\’200px\’} speed:速度，单位是毫秒 callback:回调函数，也就是说，当整个 动画执行完毕之后会执行。

3、 类数组的操作 array/a1.html 所谓类数组，指的是jQuery对象里面包含的所有的dom对象。可以利用jQuery对象提供的一些方法 和属性来对这些dom对象进行遍历。 1)属性 length: 获得dom对象的个数。 2)方法 a, each(fn(i)): 循环遍历每一个元素, i表示被迭代的对象的下标。this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。 b,eq(index)： 返回index位置处的jquery对象 c,index(obj)： 返回下标，其中obj可以是dom对象或者 jquery对象。 d,get()：返回dom对象组成的数组 e,get(index)：返回index位置处的dom对象。

4、jQuery对ajax的支持 1)load a,作用： 将服务器返回的数据直接添加到符合要求的节点之上。

b,用法: $obj.load(请求地址,[请求参数]); 请求地址: 服务器端某个组件的地址，比如 ***.do 请求参数: 有两种形式 请求字符串： \”username=zs&age=22\” 对象: {\’username\’:\’zs\’,\’age\’:22} 注意: 如果没有请求参数，则load方法会发送get请求， 如果有参数，则发送post请求。 2)$.get a, 作用： 向服务器发送get请求。 b,用法: $.get(请求地址,[请求参数],[callback],[服务器返回的数据类型]); callback: 是一个函数，格式callback(data,status),其中，可以通过data获得服务器返回的数据,status是一个状态的描述。 服务器返回的数据类型: 可以是 html : html内容 text: 文本 json: json字符串 xml: xml文档 script: javascript脚本 $.post a, 作用：向服务器发送post请求。 b,用法：同$.get 3)$.ajax 用法: $.ajax({}); 可以添加的参数: url(string): 请求地址 type(string): GET/POST data(object/string): 请求参数 dataType(string) : 预期服务器返回的数据类型。 同$.get一样。 success(function): 请求成功后调用的回调函数，有两个参数：function(data,textStatus),其中，data是服务器返回的数据，textStatus 描述状态的字符串。 error(function): 请求失败时调用的函数。 async: true(缺省)/false: 当值为false,发送同步请求。 keyup事件有一个bug, 某些浏览器在切换到中文输入法以后，keyup事件会失效。为解决这个问题，可以使用input(非ie浏览器支持)和propertychange(ie支持)事件来解决。

手把手带你快速入门jQuery（建议收藏！！！）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

前端基础：jQuery

Introduction to jQuery

• jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装
• jQuery 的设计思想是 Write less, do more
• 实现隔行变色效果，JavaScript 要循环加判断，而 jQuery 只需一句关键代码

jQuery Function

• 访问和操作 DOM 元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的 jQuery 插件
• 与 Ajax 技术完美结合

jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率

jQuery Advantages

• 体积小，压缩后只有 100 KB 左右
• 强大的选择器
• 出色的 DOM 封装
• 可靠的事件处理机制
• 出色的浏览器兼容性

jQuery Usage

jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突

基本的语法介绍

工厂函数 $()：将 DOM 对象转化为 jQuery 对象

选择器 selector：获取需要操作的 DOM 元素

方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery”

例如：

jQuery 对象与 DOM 对象

DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用

如果要混用它们，就要进行转换

• DOM 对象转 jQuery 对象

• jQuery 对象转 DOM 对象

选择器基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。

层次选择器属性选择器过滤选择器事件鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件。

表单事件

当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。

鼠标悬停复合事件

hover() 方法相当于 mouseover 与 mouseout 事件的组合。

连续点击复合事件事件的动态绑定

对 dom 元素绑定事件的另一种写法

• 绑定一个事件

• 绑定多个事件

元素的隐藏和显示改变元素的宽和高（带动画效果）

• show(speed)：显示
• hide(speed)：隐藏
• toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：\”slow\”、\”fast\” 或毫秒

改变元素的高（拉伸效果）

• slideDown(speed)：显示
• slideUp(speed)：隐藏
• slideToggle(speed) 等价于 slideDown + slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：\”slow\”、\”fast\” 或毫秒

不改变元素的大小（淡入淡出效果）

• fadeIn(speed) 显示
• fadeOut(speed) 隐藏
• fadeToggle(speed) 等价于 fadeIn + fadeOut 动画
• fadeTo(speed, 透明度) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：\”slow\”、\”fast\” 或毫秒

链

链是允许在同一个元素上在一条语句中运行多个 jQuery 方法，可以把动作/方法链接在一起。

例如：点击一次按钮，让 div 完成 4 个指定动作：

1. 背景变粉
2. 字体变绿
3. 向上收缩
4. 向下拉伸

DOM 和 CSS 的操作属性函数

attr(\”属性\”) 获得元素的属性值。

attr(\”属性\”, \”新值\”) 修改元素的属性值。

attr(样式参数) 样式参数可以写成 json 格式。

val() 获得表单元素中的 value 值

val(\”x\”) 修改表单元素中的 value 值

html() 获得元素中的内容（标签 + 文本）

html(\”x\”) 修改元素中的内容（标签 + 文本）

text() 获得元素中的文本

text(\”x\”) 修改元素中的文本

样式函数

css(\”属性\”) 获得该属性值

css(\”属性\”, \”值\”) 设置属性的值

css({json}) 设置多个属性的值

width() 获得元素的宽度

width(number) 修改元素的宽度

height() 获得元素的高度

height(number) 修改元素的高度

类样式函数

addClass() 为元素添加类样式

removeClass() 将元素的类样式移除

toggleClass() 样式的切换；有->无，无->有

节点操作遍历节点祖先元素

用于向上遍历 DOM 树的方法

• parent() 返回被选元素的直接父元素，仅仅是上一级
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

同辈元素

next() 获取紧邻匹配元素之后的元素

prev() 获取紧邻匹配元素之前的元素

siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素

后代元素

后代是子、孙、曾孙等等

• children([selector]) 方法返回被选元素的所有直接子元素

• find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代

元素的过滤

first() 过滤第一个元素

last() 过滤最后一个元素

eq(index) 过滤到下标为 index 的元素

not() 除了什么之外的元素

is() 返回布尔，判断是不是这种元素

案例手风琴特效购物车结算

car.js

想了解更多，欢迎关注我的微信公众号：Renda_Zhang

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com