jquery修改span_jQuery基本了解

最新推荐文章于 2024-03-10 16:01:55 发布
最新推荐文章于 2024-03-10 16:01:55 发布
阅读量368 收藏
点赞数
文章标签： jquery修改span
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31119221/article/details/113491436
版权

6a374ab06fd72f3b7d4b4b82abc3b125.png

Ⅰ 简介

jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作 
类似于python里面的模块  在前端模块不叫模块  叫 “类库”
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
	write less do more
	让你用更少的代码完成更多的事情

回想
	python导入模块发生了哪些事？
		导入模块其实需要消耗资源
	jQuery在使用的时候也需要导入
		但是它的文件非常的小(几十KB) 基本不影响网络速度

Ⅱ 导入问题

  • 导入方式
  • 解决导入问题方式一
    • 自定义新建文件模板
    • 需要下载jQuery文件,且src可以找到js文件

b0f563553073732ad55e0d15381af34b.png
需要下载文件,且文件在html根目录下
  • 方式二
    • 直接引用jQuery
    • 网站:
Bootstrap 中文网开源项目免费 CDN 加速服务​www.bootcdn.cn
c9374923062a3a37261061d269acdd21.png
    • <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    • 复制网页的标签
    • 使用需要计算机必须联网

Ⅲ 基本语法

  • jQuery(选择器).action()
  • 简写jQuery() === $()
  • jQuery与原生js简单对比
  • 修改p标签颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WOT</title>
    <script src = 'jquery.min.js'></script>
</head>
<body>
<p>天罗地网，无孔不入</p>
</body>
</html>

3859940e1c392d5521272d9ae532acf9.png

Ⅳ 基本选择器及对象转换

  • jQuery对象 -- 选择器得到的都是jQuery对象
    • $('#d1') -- id选择器
    • $('.c1') -- class选择器
    • $('p') -- 标签选择器
  • jQuery对象如何变成标签对象
    • $('d1')[0] -- jQuery对象转换成标签对象
  • 标签对象转换成jQuery对象
    • $(document.getElementById('d1')) -- 标签转成jQuery对象
<div id="d1">楚虽三户，亡秦必楚div</div>
<div>
    <p>王道墨攻，侠道非攻div>p</p>
    <span>侠道王道，墨问莫问div>span</span>
</div>

$('d1');
S.fn.init [prevObject: S.fn.init(1)]
$('#d1')[0];
<div id=​"d1">​楚虽三户，亡秦必楚div​</div>​
document.getElementById('d1');
<div id=​"d1">​楚虽三户，亡秦必楚div​</div>​
$(document.getElementById('d1'));
S.fn.init [div#d1]

a202182793279bf522da7224961952c0.png
Flink 中文社区
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在页面加载完成后通过jquery给多个span赋值
01-19
span代码的写法如下： 代码如下: <span name=”currentDate”></span> （多个span） jQuery写法： 代码如下: [removed] $(document).ready(function() { var currentDate = new Date().toLocaleDateString();...
jquery 改变 <span>的值
Believe Myself
11-12 693
[code="java"] //获取id 为 sp 的 var sp = $("#sp"); //为sp赋值 sp.text("赋值"); [/code]
jQuery 修改 span 里的内容
jc_dreaming2的博客
12-03 3075
jQuery 修改 span 里的内容    &lt;script type="text/javascript"&gt;     function myOnload() {         $(document).ready(function () {             $('.rgPagerLabel').each(function () {      ...
jQuery设置和获取span的内容 （详解）
热门推荐
a0701302的专栏
05-20 16万+
先看个示例，示例代码如下： var test1=$("#spId").val(); var test2=$("#spId").html(); var test3=$("#spId").text(); alert("val的值：" + test1); alert("html的值：" + test2);
jquery获取span标签下的第一个span子标签内容
csdn_zsdf的博客
07-12 1万+
看了几本jquery的书之后，觉得对jQuery的dom操作部分应该是比较熟悉了，但是当正式用到的时候又忽然觉得什么也不知道，还得上网来搜，遇到的问题就是获取span标签下的第一个span标签中的内容。如<p class = "local"> <span> <span>西安</span> <span>(xian)</span> </span> </p>
jquery.rar_JavaScript/JQuery_Others_
08-11
如`$("p").append("<span>附加内容</span>")`。 4. **事件处理**: jQuery简化了事件绑定，`$("button").click(function() { ... })`即为点击按钮时执行的回调函数。 5. **动画效果**: jQuery的`.fadeIn()`, `....
1.zip_JavaScript/JQuery_JavaScript_
08-09
在这个文件中，可能会有一个特定的元素（如`<div>`或`<span>`）用于显示时钟的时间，而JavaScript和jQuery的代码则会附加在这个元素上，以显示和更新时间。 `images`目录可能包含了项目中使用的图片资源，这些图片...
tree.zip_JavaScript/JQuery_HTML_
08-12
在这个树形导航中，HTML将用于创建基本的页面结构和元素，如`<ul>`和`<li>`元素用于构建层级关系，可能还会使用`<span>`或`<a>`元素来表示节点的文本和可点击的操作。通过CSS类，我们可以区分父节点、子节点和当前...
js.zip_JavaScript/JQuery_HTML_
08-11
了解这些差异对于编写高效的代码至关重要。 `substr()` 方法接受两个参数：开始位置和长度。它从指定的开始位置开始，然后提取指定长度的字符。例如： ```javascript let str = "Hello, world!"; console.log(str....
jQuery操作编辑页面，span与input标签之间的随时转换
乔的博客
03-21 822
1、input，select，textarea转span var switchToSpan=function () { // console.log($(this).attr("id")); var cId=$(this).attr("id");//获取当前点击input的id //console.log($("#"+cId).prop('nodeName').toLowerCase()); var thisTag=$("#"+cId).prop('nodeName').toL
js,jquery获取span标签值
weixin_42069386的博客
06-21 2689
js获取span标签值:&lt;span id="hh"&gt;hh&lt;/span&gt; &lt;script&gt; var value=document.getElementById("hh"); console.log(value.innerHTML); console.log(value.innerText); &lt;/script&gt;jquery获取s...
JQ改变标签的元素名称
action_xing的博客
10-18 3602
今天上班刚刚接杯水坐在电脑旁，听见同事们在讨论想要改变标签的名称；我一听感觉这种东西改怎么实现呢？除非是删除原有的标签，添加新的标签，感觉只有这种方法，没有其他的了。 javascript 想了想，可以直接改变innerHTML，这里是用javascript写的： 点击 function change() { var div=document.getElem
jQuery更改样式、增删类名、增删元素
CYSNLD的博客
09-05 582
jQuery更改样式、增删类名、增删元素 读取单个css样式/设置单个css样式设置多个css样式jQuery中的class操作addClass() 添加类名方法removeClass() 移除类名方法hasClass() JQ切换样式类after()before()prependTo()empty()
jquery基础
最新发布
qq_48257021的博客
03-10 681
1、jQuery的下载 官网地址：jQuery 版本： ·1x：兼容IE678等低版本浏览器，官网不再更新 ·2x：不兼容IE678等低版本浏览器，官网不再更新 ·3x：不兼容IE678等低版本浏览器，是官方主要更新维护的版本 各个版本的下载：jQuery CDN 基本使 <script src="jquery.min.js"></script> <style> div { width: 200px;
jquery中数组和span标签值得获取
钟渊博客
10-14 2746
js中数组的使用 var arr=[]; arr.push(data);// for(var j=0;j  console.log(arr[j]);  } jquery获取span标签value的值：var dd=$("#pid").attr("value"); 如果span标签有多个，并且是遍历出来的就使用下面方法获取value;   $("span[id='pi
使用jQuery实现信息基本的增、删、改、查。
weixin_63112037的博客
09-03 541
3、点击查询，输入姓或名，自动与之匹配，有则显示出来，无则其他信息隐藏。2、点击修改，对已添加的信息可以进行修改，修改完成，信息自动保存修改。1、点击增加弹出表单，填写完成提交，本地存储新增一组信息。4、点击删除，删除选中的信息，本地存储信息同时删除。
js 改变span的值以及样式
qq_34169240的博客
06-27 1万+
&lt;span style="color:#32cd32" id="latestState"&gt;正常&lt;/span&gt;$("#latestState").text(latestState).attr("style","color:"+latestStateColor+";");
jQuery修改标签的内容或值
licanty的博客
05-11 3万+
我一直知道要修改标签的内容和值有三种方式，但是最近遇到一项目却让我在改变表单元素的值上浪费了很多时间，其实我大概都知道他们的区别在哪里，只是有的shih
jQuery设置和获取span的内容（简单示例说明）
a0701302的专栏
05-20 5万+
示例代码如下： $(document).ready(function(){ $("button").click(function(){ alert("text的值：" + $("#spId").text() + "\n" + "html的值：" + $("#spId").html() ) $("#spId").text("tes
用jQuery修改span元素中的文字
05-31
可以使用`.text()`或`.html()`方法来修改`<span>`元素中的文字。 `.text()`方法会将文本内容作为纯文本处理，而`.html()`方法会将文本作为HTML代码处理。 示例代码： ```javascript $(document).ready(function(){ // 修改id为mySpan的<span>元素的文本内容 $("#mySpan").text("Hello, World!"); }); ``` ```javascript $(document).ready(function(){ // 修改id为mySpan的<span>元素的HTML内容 $("#mySpan").html("<strong>Hello, World!</strong>"); }); ``` 需要注意的是，`$()`是jQuery选择器，用于选取HTML元素，可以根据元素的id、class、标签名等进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值