菜单 搜索
首页 前端知识 JQuery(二)---【使用JQuery对HTML、CSS进行操作】

JQuery(二)---【使用JQuery对HTML、CSS进行操作】

2024-05-03 18:05:52 前端知识 前端哥 306 143 我要收藏

零.前言

JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客

一.使用JQuery对HTML操作

1.1获取元素内容、属性

使用JQ可以操作元素的“内容”

  • text()：设置或返回元素的文本内容
  • html()：设置或返回元素的内容(包括HTML标记)
  • val()：设置货返回表单字段的值

我们来看一个例子，用来区分“text()”和“html()”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="sample">这是一个<b>示例</b>文本</p>
    <button id="b1">点我显示p的文本内容(text)</button>
    <button id="b2">点我显示p的内容(html)</button>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                alert("文本内容(text)是:" + $("#sample").text())
            });
            $("#b2").click(function(){
                alert("内容(html)是:" + $("#sample").html())
            });
        });
    </script>
</body>
</html>
复制

效果图：

点击(text)按钮显示：

点击(html)按钮显示：

 结论：“text”返回的只有元素的“文本内容”(除标签以外的普通字符)，而“html”会将元素的“所有内容”(不管有没有特殊字符)完整返回。

再来看看“val”的使用，“val”常与<input>输入框搭配使用，“val”用来获取输入字段的值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <input type="text" id="sample" value="鞠婧祎">
    <button id="b1">点我获取val的值</button>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                alert("val的值是:" + $("#sample").val());
            })
        });
    </script>
</body>
</html>
复制

效果：

点击后：

1.2获取元素属性

使用“attr()”方法获取属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="b1">点我获取我的id</button>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                alert("按钮的id属性值是:" + $("#b1").attr("id"));
            })
        });
    </script>
</body>
</html>
复制

效果：

点击后：

二.使用JQuery改变元素内容

2.1无返回值的改变元素内容

我们仍然使用上面所说的：“text()”、“html()”、“val()”、“attr()”来对应的改变内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="test1">这是一个文本内容</p>
    <p id="test2">这是一个<b>标签内容</b></p>
    <input type="text" id="test3" value="鞠婧祎">
    <br><br>
    <button id="bt1">改变文本内容</button>
    <button id="bt2">改变标签内容</button>
    <button id="bt3">改变输入框内容</button>
    <button id="bt4">点我改变输入框的属性为“密码”格式</button>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#test1").text("文本内容被改变了");
            })
            $("#bt2").click(function(){
                $("#test2").html("标签内容被<b>改变了</b>");
            })
            $("#bt3").click(function(){
                $("#test3").val("输入框内容被改变了");
            })
            $("#bt4").click(function(){
                $("#test3").attr("type","password");
            })
        });
    </script>
</body>
</html>
复制

点击前：

点击后：

2.2有返回值的改变元素内容（使用回调函数）

上面四种改变元素的方法，都有回调函数

回调函数由两个参数：

备选元素列表中当前元素的下标，以及原始值

然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});
复制

其中：“i”是当前元素下标，“origText”是原始(旧)值

具体可参考：jQuery 设置内容和属性 (w3school.com.cn)

三.使用JQuery添加元素

3.1四种添加元素的JQ方法

  • append()：在被选元素的结尾插入内容
  • prepend()：在被选元素的开头插入内容
  • after()：在被选元素之后插入内容
  • before()：在备选元素之前插入内容

append()、prepend()方法可以在“<p>、<h1-h6>”等“文本标签”前后添加内容，也可以在“<ol>”前后添加“<li>”标签

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });
 
  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
 
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
复制

效果：

值得注意的是：append()、prepend()方法可以一次接受无限数量的元素并添加。

使用方法：

append/prepend(element1,element2,element3,......)

after()、before()在元素的前面或者后面插入新内容(ps:这里是在整个元素的前面或者后面，与append、pretend在元素内容的开头或结尾插入有本质区别，这里相当于插入了新的元素标签)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#123").before("<b>Before</b>");
  });
 
  $("#btn2").click(function(){
    $("#123").after("<i>After</i>");
  });
});
</script>
</head>
 
<body>
<p id="123">6666</p>
<br><br>
<button id="btn1">在前面添加文本</button>
<button id="btn2">在后面添加文本</button>
</body>
</html>
复制

点击前：

点击后：

“after”与“before”同样可以一次接收多个参数来添加多个内容：

after/before(element1,element2,element3,....)

四.使用JQuery删除元素

删除元素和内容，一般可以使用以下两个JQ方法：

  • remove()：删除被选元素(及其子元素)
  • empty()：从被选元素中删除子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="div1" style="height: 200px;width: 300px;border: 1px solid black;background-color: yellow;">
        <p>这是一个段落</p>
        <p>这是另一个段落</p>
        <p>这是最后一个段落</p>
    </div>
    <button id="bt1">点击删除div元素</button>
    <button id="bt2">点击清空div元素</button>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#div1").remove();
            })
            $("#bt2").click(function(){
                $("#div1").empty();
            })
        });
    </script>
</body>
</html>
复制

点击前：

点击删除div元素后：

点击清空div元素后：

五.使用JQ操作CSS

5.1使用JQ操作CSS类

  • addClass()：给被选元素添加一个或多个CSS类
  • removeClass()：对被选元素删除一个或多个CSS类
  • toggleClass()：对被选元素进行添加/删除类的切换操作

使用方法：

$(element).addClass("class1,class2,class3,....")

$(element).removeClass("class1,class2,class3,....")

“element”表示元素，“class”表示类名字

下面我们创建两个CSS类(选择器)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .n{
            font-weight: bold;
            font-size: large;
        }
        .color{
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <h1>这是一个段落</h1>
    <h2>这是一个段落</h2>
    <button id="bt1">点击向p,h1,h2添加"n"类</button>
    <button id="bt2">点击向p,h1,h2添加"color"类</button>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("p,h1,h2").addClass("n");
            })
            $("#bt2").click(function(){
                $("p,h1,h2").addClass("color");
            })
        });
    </script>
</body>
</html>
复制

点击前：

点击后：

5.2使用JQ操作CSS()

css()方法设置或返回元素的一个或多个样式属性：

“返回CSS属性”：

css("propertyname");
复制

 "设置CSS属性"：

css("propertyname","value");复制

 “设置多个CSS属性”：

css({"propertyname":"value","propertyname":"value",...});复制

 例如：

$("p").css({"background-color":"yellow","font-size":"200%"});
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6825.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！