iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >jquery的主要功能有哪些
  • 410
分享到

jquery的主要功能有哪些

jQuery 2023-05-14 22:05:50 410人浏览 八月长安
摘要

本教程操作环境:windows10系统、Jquery3.2.1、Dell G3电脑。jquery的主要功能有哪些?jQuery的主要功能1:访问页面框架的局部jQuery大大简化了DOM获取页面某个节点或者某一类节点的固定方法;2:修改页面

jquery的主要功能有哪些

教程操作环境:windows10系统、Jquery3.2.1、Dell G3电脑。

jquery的主要功能有哪些?

jQuery的主要功能

1:访问页面框架的局部

jQuery大大简化了DOM获取页面某个节点或者某一类节点的固定方法;

2:修改页面的表现

由于各个浏览器对css3标准的支持不同,是的很多CSS3的样式风格没能很好的体现。jQuery的出现很好的解决了这个问题。它通过封装好的javascript代码,是的各种浏览器能很好的使用CSS3标准。

3:更改页面内容

通过强大而方面的api,jQuery可以很方便的修改页面的内容,甚至整个页面的框架;

4:响应事件

不需要在考虑浏览器的兼容性问题,可以更加轻松的处理事件;

5:为页面添加动画

jQuery的库提供了大量可自定义参数的动画效果,

6:与服务器异步交互

jQuery提供了一整套ajax相关的操作,大大方便了异步交互的开发和使用;

7:简化常用的JavaScript操作

jQuery提供了很多附加的功能来简化常用的JavaScript操作,例如数组的操作,迭代运算等;

jQuery 的基本功能

jQuery 封装了 DOM 功能,让 DOM 函数的使用变得十分简洁方便。无论是对网页元素的获取还是“增删改查”都进行了更加人性化的封装。下面让我们简单了解一下 jQuery 的基本功能以及 jQuery 设计的优秀之处。

一、获取网页元素

jQuery 获取的结果是一个对象

  • 一些基本方法

$(document); // 选择整个文档对象
$("#myId"); // 选择id = 'myId' 的元素
$(".myClass"); // 选择class = 'myClass' 的元素
$("div.myClass"); // 选择class = 'myClass' 的div元素
$("input[name=first]"); // 选择name = 'first' 的 input 元素
  • jQuery 特有的表达式

$("a:first"); // 选择网页中第一个a元素
$("tr:odd"); // 选择表格中的奇数行
$("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
$("div:visible"); // 选择可见的div元素
$("div:gt(2)"); // 选择所有的div元素,除了前3个
$("div:animated"); // 选择当前处于动画状态的div元素
  • 进一步过滤对 div 的选择结果对象

$("div").has("p"); // 选择包含p元素的div元素
$("div").not(".myClass"); //选择class != 'myClass' 的div元素
$("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
$("div").first(); // 选择第1个div元素
$("div").eq(5); // 选择第6个div元素
  • 通过 div 选择其他元素

$("div").next("p"); // 选择div元素后面的第1个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("from"); // 选择离div最近的from父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div同级的其他兄弟元素(不包括自己)

二、链式操作

jQuery 最令人称道的部分

jQuery 可以对同一对象进行连续函数操作

举例:

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

链式操作是 jQuery 最方便的特点,因为 jQuery 每次执行一个函数操作的返回值还是原来操作的 jQuery 对象,所以可以直接在后面继续操作。

.end() 方法

.end() 方法,使返回值结果退到上一个 jQuery 对象

举例:

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

三、增删改查

1. 增

创建新元素:直接在 jQuery 直接传入符合 html 格式的字符串

let $myDiv = $("<div class='myDiv'><p>Derek</p></div>"); // 创建新的元素,用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

复制元素

.clone()

返回当前 jQuery 对象的一个克隆副本

包括所有匹配元素、匹配元素的下级元素、文字节点

2 个参数:

withDataAndEvents 是否同时复制元素的数据和绑定事件,默认 false

deepWithDataAndEvents 是否同时复制元素所有子元素的数据和绑定事件,默认值为第 1 个参数(withDataAndEvents)的值

2. 删

删除元素

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件,便于在重新插入文档时使用
.empty() 清空元素内容,但不删除该元素(即删除元素里面的所有节点)

3. 改

插入/移动元素

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

上述两种方法的效果是一样的

但是它们的返回值是不同的,分别是$('div')和$('p'),所以需要根据后续的操作来进行选择

另外两种插入/移动元素的方法

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

4. 改查合一 getter/setter

同一函数,通过传参的不同来实现改/查功能

$("h1").html(); // html没有传参,实现取出h1的值
$("h1").html("Hello"); // html传参'Hello',实现对h1进行赋值

jQuery 常见取值/赋值函数

.html() 查/改 html 内容

.text() 查/改 text 内容

.attr() 查/改 某个属性的值

.width() 查/改 某个元素宽度

.heigth() 查/改 某个元素高度

.val() 查/改 某个表单元素的值

注意:

如果结果对象包含多个元素,那么赋值时,将对其中所有的元素赋值

取值时,则是只取出第一个元素的值

.text()例外,它取出所有元素的 text 内容

以上就是jquery的主要功能有哪些的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: jquery的主要功能有哪些

本文链接: https://www.lsjlt.com/news/207146.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery的主要功能有哪些
    本教程操作环境:Windows10系统、jquery3.2.1、Dell G3电脑。jquery的主要功能有哪些?jQuery的主要功能1:访问页面框架的局部jQuery大大简化了DOM获取页面某个节点或者某一类节点的固定方法;2:修改页面...
    99+
    2023-05-14
    jQuery
  • javascript的主要功能有哪些
    本篇内容介绍了“javascript的主要功能有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • CSS3的主要功能有哪些
    这篇文章主要介绍了CSS3的主要功能有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS3的主要功能有哪些文章都会有所收获,下面我们一起来看看吧。CSS3目前为止还没有正...
    99+
    2024-04-02
  • Maven的主要功能有哪些
    Maven的主要功能包括: 项目管理:Maven通过提供Project Object Model(POM)来管理项目的构建、依赖...
    99+
    2024-04-09
    Maven
  • ip的主要功能有哪些
    这篇文章主要介绍了ip的主要功能有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ip的主要功能有哪些文章都会有所收获,下面我们一起来看看吧。ip的主要功能是:1、定义了计算机全网络数据传输基本单元,规定了互...
    99+
    2023-07-04
  • python的主要功能有哪些
    Python的主要功能包括:1. 简单易学:Python具有简洁而清晰的语法,易于学习和阅读的特点,适合初学者入门。2. 动态类型:...
    99+
    2023-09-29
    python
  • NiFi的主要功能有哪些
    NiFi的主要功能包括: 数据收集:NiFi可以从各种来源收集数据,包括文件系统、数据库、消息队列、API等。 数据传输:N...
    99+
    2024-04-02
  • DBMS的主要功能有哪些
    这篇文章主要介绍“DBMS的主要功能有哪些”,在日常操作中,相信很多人在DBMS的主要功能有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”DBMS的主要功能有哪些”的疑惑...
    99+
    2024-04-02
  • Caffe的主要功能有哪些
    Caffe的主要功能包括: 深度学习:Caffe是一个用于深度学习的框架,可以用于训练和测试神经网络模型。 图像识别:Caf...
    99+
    2024-03-07
    Caffe
  • Atlas的主要功能有哪些
    Atlas是一个面向开发者的工具,主要功能包括: 数据库管理:Atlas提供了一个简单易用的界面,让开发者可以方便地管理数据库,...
    99+
    2024-04-02
  • openstack的主要功能有哪些
    OpenStack的主要功能包括以下几个方面: 虚拟化管理:OpenStack可以管理和组织虚拟机实例,并提供对计算资源的弹性管...
    99+
    2023-10-25
    openstack
  • sqlserver的主要功能有哪些
    SQL Server是一个关系型数据库管理系统,其主要功能包括: 数据存储:SQL Server可以存储大量的数据,支持多种数据...
    99+
    2024-04-09
    sqlserver
  • vue的主要功能有哪些
    本篇内容介绍了“vue的主要功能有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!剪辑软件vue的功能:1、“分镜头”,通过点按改变视频的...
    99+
    2023-06-26
  • kubernetes的主要功能有哪些
    Kubernetes的主要功能包括:1. 容器编排:Kubernetes可以自动管理和调度容器化应用程序,将容器部署到集群中的节点上...
    99+
    2023-08-24
    kubernetes
  • 虚拟主机主要功能有哪些
    虚拟主机的主要功能包括:1. 托管网站:虚拟主机允许用户将自己的网站托管在服务器上,通过互联网向访问者提供网站内容。2. 数据库支持...
    99+
    2023-08-25
    虚拟主机
  • ssl协议的主要功能有哪些
    SSL协议的主要功能包括:1. 数据加密:SSL协议使用对称密钥加密算法,对传输的数据进行加密,保护数据在传输过程中不被窃取或篡改。...
    99+
    2023-05-31
    ssl协议 ssl
  • pvsyst组件的主要功能有哪些
    PVSyst组件的主要功能包括:1. 太阳能光伏组件模型:PVSyst可以模拟和分析各种不同类型和技术的光伏组件的性能。它提供了一系...
    99+
    2023-10-20
    pvsyst
  • 高防CDN的主要功能有哪些
    高防CDN的主要功能有:1、能节省骨干网络带宽,减少带宽需求;2、提供服务器端加速功能,能解决用户访问造成的服务器超载问题;3、提供Web Cache技术,能提高用户访问因特网页面的相应时间需求;4、能克服网站分布不均的问题,降低网站建设和...
    99+
    2024-04-02
  • linux中shell的主要功能有哪些
    Linux中shell的主要功能有以下几个:1. 命令解释和执行:Shell是一个命令行解释器,可以解释和执行用户输入的命令。2. ...
    99+
    2023-09-15
    Linux shell
  • cobit框架的主要功能有哪些
    COBIT框架的主要功能包括: 提供了一套全面的IT管理指南,可帮助组织规划、实施和监控信息技术。 帮助组织建立有效的IT治...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作