jquery innerhtml-jqueryinnerhtml 收藏 0

前端基础：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

jQuery基础回顾——jQuery中的DOM操作

DOM是Document Object Model的缩写，意思是文档对象模型，根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件，简单来说，DOM解决了Netscape的javaScript和Microsoft的Jscript之间的冲突，给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

• DOM Core

DOM Core并不专属于javaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理页面，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

javaScript中的document.getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

• HTML-DOM

在使用javaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。

例如：

注：HEML-DOM只能用来处理Web文档。

• CSS-DOM

CSS-DOM是针对CSS的操作，在javaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

例如：设置某元素style兑现字体颜色的方法：

jQuery作为javaScript库，继承并发扬了javaScript对DOM对象的操作的特性，使开发人员能方便地操作DOM对象。

样例DOM

1、查找节点

使用jQuery在文档树上查找节点非常容易，可以通过在上一节介绍的来完成。

• 查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

• 查找节点属性

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值，attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询的属性的名字，当参数是两个时，则表示给属性赋值，例如：

2、插入节点

在jQuery中提供了多种插入节点的方法：

3、删除节点

如果文档中某一个元素多余，那么应将其删除，jQuery提供了三种删除节点的方法，即remove()、detach()和empty()。

• remove()

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选的元素。

当某个节点用remove()方法删除后，该节点所包含的所有后代节点同时被删除，这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

另外，remove()方法也可以通过传递参数来选择性地删除元素如下：

• detach()

detach()和remove()一样，也是从DOM中去掉所有匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中移除，因而可以再将来再使用这些匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

• empty()

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清除元素中的所有后代节点。

4、属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

• 获取和设置元素属性

如果要获取<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。

如果需要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数，即属性名和对应的值。

如果需要一次性为同一个元素设置多个属性，可以使用如下代码：

注意：jQuery中的很多方法都是同一个函数实现获取和设置的，例如上面的attr(),类似的还有html()、text()、height()、width()、val()和css()等方法。

• 删除元素属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

如果需要删除<p>元素的title 属性，可以使用下面的代码实现：

prop()方法与attr()方法类似，但有区别，大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = \”disabled\”，checked=\”checked\”，比如用attr(\”checked\”)获取checkbox的checked属性时选中的时候可以取到值,值为\”checked\”，但没选中获取值就是undefined。

jQuery提供新的方法prop()来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回\”checked\”和\”\”,现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？

a) 添加属性名称该属性就会生效应该使用prop();

b) 具有true,false两个属性使用prop();

c) 其他则使用attr();

attr与pop方法对比

5、样式操作

• 获取和设置样式

由于 class 也是元素的属性，因此获取和设置class都可以使用attr()方法来完成，但是attr()方法实现的原理是替换，即以新属性值替换原属性值，如果此处需要的是“追加“效果，那么我们可以使用addClass()方法。

• 追加样式

jQuery提供了专门的addClass()方法来追加样式。

attr()与addClass()的区别

• 移除样式

要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class。

可以使用如下jQuery代码来删除<p>元素中值为“high”的class：

如果要把<p>元素的两个class都删除，就要使用两次removeClass方法，代码如下：

jQuery提供了更简单的方法，可以以空格的方式删除多个class名，jQuery代码如下：

另外，还可以利用removeClass()方法的一个特性来完成同样的效果，当它不带参数时，就会将class的值全部删除。

• 判断是否含有样式

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。

注意：这个方法是为了增强代码可读性而产生的，在jQuery内部实际上时调用了is()方法来完成这个功能的，该方法等价于$(\”p\”).is(\”.another\”);

6、设置和获取 HTML、文本和值

• html()

此方法类似于javaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

• text()

此方法类似javaScript中的innerText属性，可以用来读取或者设置某个元素的文本内容。

• val()

此方法类似于javaScript中的value属性，可以用来设置和获取元素的值，无论元素是文本框、下拉框还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组。

若方法有入参，则表示设置对应的值。

7、遍历节点

• children()

该方法用于取得匹配元素的子元素集合。

注意：children()方法只考虑子元素而不是其他后代元素。

• next()

该方法用于取得匹配元素后面紧邻的同辈元素。

• prev()

该方法用于取得匹配元素前面紧邻的同辈元素。

• siblings()

该方法用于取得匹配元素前后所有的同辈元素。

8、CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

可以直接利用css()方法获取元素的样式属性。

无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的的那个样式。

与attr()方法一样，css()方法也可以同时设置多个样式属性。

注意：

1) 如果值是数字，将会自动转化为像素值。PX

2) 在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：

$(“p”).css({fontSize: “30px”, backgroundColor: “#888888”})

如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。

建议加上引号，养成良好的习惯。

如果需要某个元素的height属性，则可以通过如下代码实现：

在jQuery中还有另外一种方法也可以获取元素的高度，即height()，它的作用是获得匹配元素当前计算的高度值（px），如

height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px，如果要用其他单位（例如em），则必须传递一个字符串如：

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并战法后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一章：

前端新手必看！HTML、CSS 和 JavaScript 详解与实用案例全攻略

大家好呀！我是魏大帅，一位热爱前端开发的程序员。今天在这呢，我来跟大家聊聊 HTML、CSS 还有 JavaScript 的知识，希望能对你们有用哈！[送心]

1. HTML速成课HTML（HyperText Markup Language）就是那个超文本标记语言，是搭建网页结构的基础语言。啥？不懂？简单来说，就是用各种标签把网页的不同部分（比如标题、段落、链接、图片啥的）拼凑起来。

2. HTML基本布局一个HTML小萌新通常长这样：

3. HTML 常用标签

• 标题标签：<h1>、<h2>、<h3>等，用于定义不同级别的标题。
• 段落标签：<p>，定义段落。
• 链接标签：<a>，创建链接。
• 图像标签：<img>，插入图像。
• 列表标签：<ul>（无序列表）、<ol>（有序列表）和<li>（列表项），创建列表。
• 表格标签：<table>、<tr>（表格行）、<td>（表格单元格），创建表格。
• 表单标签：<form>、<input>、<select>、<textarea>等，用于创建表单。
• 语义化标签：如<header>、<nav>、<section>、<article>、<aside>、<footer>等，让网页结构更清晰。

4. HTML5 新特性

• 多媒体标签：<audio>和<video>，播放音频和视频。
• 画布标签：<canvas>，绘制图形。
• 本地存储：使用localStorage和sessionStorage在浏览器中存储数据。
• 地理定位：使用navigator.geolocation获取用户地理位置信息。
• Web Workers：在后台运行 JavaScript 代码，不影响页面性能。
• 拖放 API：实现元素的拖放功能。

1. CSS 简介

CSS（Cascading Style Sheets）就是那个层叠样式表，专门负责给网页穿衣服，定义字体、颜色、大小、间距、背景等，让页面美美哒。

2. CSS 引入方式

• 内联样式：在 HTML 标签中用style属性直接定义样式。
• 内部样式表：在 HTML 文件的<head>标签中用<style>标签定义样式。
• 外部样式表：将 CSS 代码保存为独立文件，在 HTML 文件中用<link>标签引入。

3. CSS 选择器

• 元素选择器：根据元素名称选择元素。
• 类选择器：根据元素的class属性选择元素。
• ID 选择器：根据元素的id属性选择元素。
• 后代选择器：选择某个元素的后代元素。
• 伪类选择器：根据元素的特定状态选择元素，如:hover（鼠标悬停时）、:active（被点击时）等。
• 属性选择器：根据元素的属性值选择元素。
• 兄弟选择器：选择与某个元素相邻的兄弟元素。
• 通用选择器：用*选择所有元素。

4. CSS 盒模型CSS 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型对布局和定位元素至关重要。

5. CSS 布局

• 流式布局：默认布局方式，元素会根据窗口大小自动调整位置。
• 弹性布局（Flexbox）：灵活布局方式，轻松实现水平和垂直居中、等分空间等布局效果。
• 网格布局（Grid）：创建复杂二维布局，精确控制元素位置和大小。

6. CSS 响应式设计响应式设计能根据不同设备屏幕尺寸自动调整布局和样式。可以使用媒体查询（Media Queries）实现。

7. CSS 动画

CSS动画，就是让页面元素动起来，比如渐变、旋转、缩放等，用@keyframes规则就能定义动画效果。

8. CSS 预处理器CSS预处理器，比如Sass、Less和Stylus，能让你写CSS的时候更高效，变量、嵌套、混合、函数啥的都有了。

1. JavaScript 简介JavaScript是一种脚本语言，能让你网页动起来，添加交互性和动态效果，还能操作HTML和CSS。

2. JavaScript 基本语法

• 变量声明：用var、let或const关键字声明变量。
• 数据类型：包括数字、字符串、布尔值、对象、数组等。
• 运算符：如算术运算符、比较运算符、逻辑运算符等。
• 控制流语句：如条件语句（if、else if、else）、循环语句（for、while、do-while）等。
• 函数：定义函数封装可重复使用的代码块。

3. JavaScript 操作 DOMDOM（Document Object Model）就是文档对象模型，是表示 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 操作网页内容和结构。

• 获取元素：用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取 HTML 元素。
• 修改元素内容：用innerHTML、textContent等属性修改元素内容。
• 修改元素样式：用style属性或classList方法修改元素样式。
• 创建和删除元素：用document.createElement()和parentNode.removeChild()等方法创建和删除元素。

4. JavaScript 事件处理事件是用户与网页交互时发生的动作，比如点击、鼠标移动、键盘输入等。JavaScript 可以通过事件处理程序响应这些事件。

• 注册事件处理程序：用addEventListener()方法注册事件处理程序。
• 移除事件处理程序：用removeEventListener()方法移除事件处理程序。
• 事件对象：事件处理程序可接收一个事件对象作为参数，包含有关事件的信息。

5. JavaScript 异步编程

• 回调函数：异步编程方式，将一个函数作为参数传递给另一个函数，在特定事件发生时调用。
• Promise：处理异步操作的对象，可以通过链式调用then()和catch()的方法处理成功和失败情况。
• async/await：基于 Promise 的异步编程语法糖，使异步代码看起来更像同步代码。

6. JavaScript 面向对象编程JavaScript 是基于对象的语言，可以用面向对象编程的思想组织代码。可以使用构造函数、原型链和 ES6 的类实现面向对象编程。

7. JavaScript 模块化随着项目规模的增大，代码管理变难。JavaScript 模块化可以将代码分割成多个独立的模块，提高可维护性和可扩展性。可以用 ES6 的模块系统或 CommonJS 模块系统实现模块化。

8. JavaScript 库和框架

JavaScript 库和框架，这可是神器啊！jQuery、Lodash、React、Vue、Angular，有了它们，开发效率那是嗖嗖的！

1. 简单网页

简单网页，HTML搭结构，CSS美美哒，JavaScript输出个信息，F12一看，Console里“页面加载完成”，完美！

2. 响应式网页

响应式网页，CSS媒体查询，JavaScript监听窗口大小，一缩一扩，信息打印不停歇，F12一看，Console里“窗口大小改变”，666！

3. 表单验证页面

表单验证页面，HTML搞表单，CSS美美化，JavaScript验证输入，空了、格式错了，错误信息飞出来，验证通过，提示框弹出来，用户体验那是杠杠的！

4. 轮播图

轮播图，HTML搞结构，CSS美美哒，JavaScript切换图片，点击“上一张”或“下一张”，图片切换自如，酷炫！

看完这篇，觉得有帮助就一键三连[赞][赞][赞]，关注我吧，你的关注就是我最大的动力，前端知识，我分享，你学，咱们一起进步[比心]

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