jquery可以直接替换吗(jquery替换所有指定字符串) 收藏 0

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文档、示例代码及其他参考资料。

上一章：

jQuery知识一览

jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。jQuery的主旨是write less, do more。

• html元素的选取
• 操作html元素
• css操作
• html事件处理
• 实现js动画效果
• 能够链式调用
• 容易扩展插件
• 封装了ajax

引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。

在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。

在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

• 1.x 版本兼容老版本的IE，文件比较大
• 2.x 版本文件比较小，支持IE8+
• 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+

开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。

从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：

从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。

继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。

查看makeArray函数：

所以这个返回实例对象，是一个伪数组。

从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。

所以在引入jQuery的项目中：

通常形式为：$(param)

• param为函数：dom加载完成后，执行该回调函数
• param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象
• param为dom对象：将该dom对象封装成jQuery对象
• param为标签字符串：创建标签对象并封装成jQuery对象

• jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。

通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。

直接修改css属性（如果其dom标签存在这个css属性）

清空某标签下的所有dom：

给某标签下添加dom标签：

移除、添加class：

获取dom标签上的属性：

设置标签的属性：

点击：

hover：

监听事件：

post请求：

取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。

Vue项目以其轻巧、高性能，易上手，双向数据绑定，组件化的特点，快速流行并广为使用，那么有没有可能将Bootstrap的依赖改为Vue呢？答案是肯定的。

本文我们就介绍这样一个解决方案，Bootstrap-Vue项目。

Bootstrap-Vue项目提供了Bootstrap项目中jQuery组件依赖了Vue替换方案，可以实现绝大多数案例和组件的替代。我们建议以Vue Cli插件方式使用，这样可以实现项目自动创建和配置，依赖项添加。首先我们安装Vue Cli

由于npm安装较慢，甚至会失败，需要，先安装国内镜像，可以使用cnpm或者npm别称：

然后用cnpm安装vue.js

这样Vue CLI会自动创建一个Vue项目，提示选择项，选择\”default\”即可。

进入该项目目录：

使用下面的命令将Bootstrap-Vue插件添加到项目中。选项提示时，选择 \”Y\”。

这样无需任何复杂设置就可以设置好一个以vue启动的Bootstrap项目。

默认情况下，Vue CLI为提供了一个示例HelloWorld应用程序。这都没啥用的，我们直接清除，包括App.vue和部件目录下的 HelloWorld.vue：

Bootstrap所有功能基本都可以在bootstrap-vue中以全局注册的组件来使用。这些组件通常和Bootstrap同名，为了以示区别，他们都以开头b-xxxx。

在此我们创建一个新的App.vue模板并添加一个Bootstrap容器：

然后启用该服务

然后，浏览器访问，应该看到以下内容：

另外，如果查看页面源码，可以看到该b-container组件已使用常规的Bootstrap元素和类进行渲染：

许多组件都可以使用Vue道具进行配置。例如， b-btn组件，可以在页面中添加一个将按钮。b-btn有一个variant控制按钮主题，此处设置为primary。

Vue支持将动态值绑定到Bootstrap组件。例如，对b-alert组件添加一个alert提示信息。我们将其设success并提供一些提示信息。

可以将showprop绑定到本地data属性来有条件地显示信息showAlert。然后将showAlert响应组件click事件来切换的值b-btn。

比jQuery逻辑写起来简单多了。

一些Bootstrap功能是作为指令而非组件提供的，因此可以轻松地将其添加到给已有元素。

例如，要添加工具提示功能，可以使用v-b-tooltip指令。下面我们使用指令参数hover向按钮添加一个，在按钮悬停时触发。

注：tooltip插件需要popper.js的依赖项，但是使用Vue CLI安装Bootstrap-Vue，会自动include。

利用Bootstrap-Vue 来替换Bootstrap 4中的jQuery非常容易，而且可以带来vue cli的巨大的功能优势，大家可以尝试将手头的项目都替换一下。

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