导航:首页 > 使用方法 > jquery使用方法

jquery使用方法

发布时间:2023-01-31 12:27:10

⑴ jQuery的操作方式有哪些

一、选取DOM元素
jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。
var $ = document.querySelectorAll.bind(document);
这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。
二、DOM操作
DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery写法
$(parent).append($(child));
// DOM写法
parent.appendChild(child)
头部插入DOM元素。
// jQuery写法
$(parent).prepend($(child));
// DOM写法
parent.insertBefore(child, parent.childNodes[0])
删除DOM元素。
// jQuery写法
$(child).remove()
// DOM写法
child.parentNode.removeChild(child)

⑵ jQuery 的功能

该博客基于阮一峰前辈在2011年所做的分享(原链接: http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html )

jQuery的核心就是:可以选择某个网页元素,然后对其进行某种操作
我们可知jQuery是一个构造函数,那么我们就可以通过选择表达式,把选中的元素,放进jQuery构造函数($)当中,从而得到选中的元素。
而选择表达式可以是CSS选择器:

也可以是jQuery特有的表达式:

在jQuery当中最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来,比如:

拆解开来,就是:

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作所返回的都是一个jQuery对象,所以不同操作可以连在一起。

jQuery还提供了.end()方法,使得结果集可以后退一步:

创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

操作元素在网页中的位置移动有两种方法:
(1)直接移动该元素;
(2)移动其他元素,使得目标元素达到我们想要的位置。

(1)方法是使用.insertAfter(),把div元素移动p元素后面:

(2)方法是使用.after(),把p元素加到div元素前面:

表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。

使用这种模式的操作方法,一共有四对:

text(?) //读写文本内容
用于返回内容时,则返回所有匹配元素的文本内容(会删除 HTML 标记)。
用于设置内容时,则重写所有匹配元素的内容。
html(?) //读写HTML内容
设置或返回被选元素的 innerHTML(文本 + HTML 标记)
attr('title',?) // 读写属性
设置或返回被选元素的属性值。
css({color:'red'}) //读写style
设置或返回被选元素的一个或多个样式属性。
addClass('blue')
向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
on('click',fn)
支持动态绑定元素,即页面上元素有添加或变化后仍可绑定,前提是selector须是目标绑定元素的父元素
off('click',fn)
用于移除通过 on()方法添加的事件处理程序

如何使用jQuery将元素移动到另一个元素中

想要使用jQuery将元素移动到另一个元素中,可以使用jQuery的内置方法append()或prepend()。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

方法1:使用append()方法

jQuery的append()方法用于在所选元素的末尾插入一些内容。

语法:

参数: 此方法接受上述两个参数

●content:它是必需参数,用于指定要在所选元素末尾插入的内容。content的可能值是HTML元素,jQuery对象和DOM元素。

●function(index,html):它是可选参数,用于指定将返回要插入的内容的函数。

●index:用于返回元素的索引位置。

●html:用于返回所选元素的当前HTML。

示例:

效果图:

方法2:使用prepend()方法

prepend()方法是jQuery中的内置方法,用于在所选元素的开头插入指定的内容。

语法:

参数: 此方法接受上述两个参数

●content:需要参数,用于指定需要插入的内容。

●function:可选参数,用于指定调用后执行的函数。

示例:

效果图:

更多 前端开发 知识,请查阅 HTML中文网 !!

阅读全文

与jquery使用方法相关的资料

热点内容
起诉离婚的方法有哪些 浏览:431
用简便方法怎么算乘法 浏览:52
雪碧是怎么做的简单方法 浏览:464
如何快速找到野生蜜蜂巢方法 浏览:981
人文思辨类文章有哪些研究方法 浏览:55
笋壳斑去除的最佳方法 浏览:287
经络锻炼的好方法 浏览:888
黑面膜使用方法 浏览:432
视觉思维模式的创新的研究方法 浏览:888
用什么方法不腐烂 浏览:317
多元醇酯类化合物液相分析方法 浏览:304
举手之劳解决的方法 浏览:931
武汉石膏线安装方法 浏览:657
治疗手机卡顿闪退的方法 浏览:570
周岁的计算方法法律 浏览:667
投影仪安装方法图 浏览:524
迷宫的使用方法 浏览:758
气舍穴最佳取穴方法 浏览:575
风管连接可以采取哪些方法 浏览:454
红枣用什么方法做效果好 浏览:951