JQuery 基本操作（初级部分）

最新推荐文章于 2022-03-16 20:28:14 发布

抹泪的知更鸟

最新推荐文章于 2022-03-16 20:28:14 发布

阅读量335

点赞数

分类专栏： jQuery+BootStrap+VUE 文章标签： jquery javascript 服务器

本文链接：https://blog.csdn.net/qq_51596354/article/details/123456870

版权

JQuery基础学习

基本操作

使用方法

jQuery 不需要安装，要使用它只需要引入一个 js 文件即可，该文件可以放在外部站点上，也可以放在自己的服务器上。但是在实际开发过程中还是使用本地服务器更加方便一些。

各大开发公司都提供 jquery 下载的 CDN，本课件以百度 CDN 的 jquery 2.1.4 为基础。可以使用下面的路径引入 jquery。

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

在实际开发中，第三方服务器可能由于网络，自启等第三方因素导致 jquery 不能访问，所以建议将其下载到本地。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>引用jQuery库</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="div"></div>
<script>
    // document.getElementById("div").innerHTML="hello world！"
    $("#div").html("hello world！！");
</script>
</body>
</html>

在引用样式表文件的代码之后，是包含 JavaScript 文件的代码，这里需要注意的是，引用 jQuery 库文件的

增加节点

要在页面中动态创建一个 div 元素，并设置其内容与属性，具体代码如下所示：

var div = "<div class='new_class'>创建的新的div块</div>";
$("body").append(div);

从上面可知，在页面中动态创建元素需要执行节点的插入或追加操作。而在 jQuery 中，有很多方法可以实现该功能，上述例子用到的 append() 方法仅仅是其中一种，按照插入元素的顺序来划分，可以将插入节点分为内部插入和外部插入两种方法。

①内部插入节点

方法语法	描述	参数说明
append(content)	内部追加内容（放在后面）	content：追加到目标中的内容或者选择的节点
prepend(content)	内部追加内容（放在前面）	content：插入目标元素内容前面的内容或者选择节点

②外部插入节点

方法语法	描述	参数说明
after(content)	元索外部后面追加内容	插入目标元素外部后面的内容
before(content)	元素外部前面插入内容	插入目标元素外部前面的内容

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>java 学习平台</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<span id="span3">3</span>
<div id="append">
    <span>1</span>
</div>
<div id="prepend">
    <span>1</span>
</div>
<script>
    $("#append").append("<span>2</span>");
    $("#append").append($("#span3"));
    $("#prepend").prepend("<span>2</span>");
    $("#append").after("<span>4</span>");
    $("#append").before("<span>5</span>");
</script>
</body>
</html>

删除节点

在 DOM 操作页面时，删除多余或指定的页面元素是经常使用到的，jQuery 提供了两种可以删除元素的方法，即 remove() 和 empty() 。严格的说，empty() 方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包含的所有后代元素，并非删除节点与元素。remove() 方法的语法结构如下所示：

remove([expr])

其中参数 expr 为可选项，如果接受参数，则该参数为筛选元素的 jQuery 表达式，通过该表达式获取指定的元素进行删除。

empty() 方法的语法结构如下所示：

empty()

其功能为清空所选择的页面元素及其所有后代元素。

案例：

<body>
<ul>
    <li title="1">这是第一条新闻</li>
    <li title="2">这是第二条新闻</li>
    <li title="3">这是第三条新闻</li>
    <li title="4">这是第四条新闻</li>
</ul>
<input type="button" value="删除操作" id="btn1"/>
<input type="button" value="清空操作" id="btn2"/>
<script>
    //单击事件
    $("#btn1").click(function () {
    
        $("ul li").remove("li[title=1]");
        $("ul li:eq(2)").remove();
    })
    $("#btn2").click(function () {
    
        $("ul").empty();
    })
</script>
</body>

替换遍历节点

在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 方法， replaceWith() 方法的语法结构如下所示：

replaceWith(content)

该方法的功能是将所有选择的元素替换为执行的 HTML 或 DOM 元素，其中参数 content 为被所选元素替换的内容。

案例：

<body>
<div>
    <p>姓名：<span id="span1">张三</span></p>
    <p>班级：<span id="span2">计科1班</span></p>
    <input type="button" value="点击替换" id="btn"/>
</div>
<span id="span3">

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery 基本操作（初级部分）

JQuery基础学习基本操作使用方法增加节点删除节点替换遍历节点属性样式操作内容操作基本操作使用方法jQuery 不需要安装，要使用它只需要引入一个 js 文件即可，该文件可以放在外部站点上，也可以放在自己的服务器上。但是在实际开发过程中还是使用本地服务器更加方便一些。各大开发公司都提供 jquery 下载的 CDN，本课件以百度 CDN 的 jquery 2.1.4 为基础。可以使用下面的路径引入 jquery。<script src="https://apps.bdimg.com/lib
复制链接

扫一扫