【学习随笔】iquery初涉

最新推荐文章于 2025-08-09 20:51:19 发布
转载 最新推荐文章于 2025-08-09 20:51:19 发布 · 94 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/sakura-zhang/p/7429932.html
文章标签：

#javascript #ViewUI

本文详细介绍了使用 jQuery 进行 DOM 操作的方法，包括获取和设置文本、HTML 和属性值，添加、修改和删除元素及内容，以及进行 CSS 操作等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

　　text() - 设置或返回所选元素的文本内容

　　html() - 设置或返回所选元素的内容（包括 HTML 标记）

　　val() - 设置或返回表单字段的值

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

　获取属性 - attr()

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#zyc").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.zyc.com" id="zyc">zyc</a></p>
<button>显示 href 值</button>
</body>

　　设置内容 - text()、html() 以及 val()

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("hello world");
  });
});
</script>
</head>

<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="hi"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>

　　text()、html() 以及 val() 的回调函数

<script>
$(document).ready(function(){
  $("#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 + ")"; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>

　　添加新的 HTML 内容,我们将学习用于添加新内容的四个 jQuery 方法：
　　append() - 在被选元素的结尾插入内容

<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>

　　prepend() - 在被选元素的开头插入内容

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended 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>

　　after() - 在被选元素之后插入内容　　before() - 在被选元素之前插入内容

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>
</head>

<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>

　　通过 jQuery，可以很容易地删除已有的 HTML 元素。

　　remove() - 删除被选元素（及其子元素）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>删除 div 元素</button>

</body>

　　empty() - 从被选元素中删除子元素

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>清空 div 元素</button>

　　jQuery 拥有若干进行 CSS 操作的方法。

　　addClass() - 向被选元素添加一个或多个类

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

</body>

　　removeClass() - 从被选元素删除一个或多个类

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p>
<br>
<button>从元素上删除类</button>
</body>

　　toggleClass() - 对被选元素进行添加/删除类的切换操作

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>

　　css() - 设置或返回样式属性

head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>

　　设置多个 CSS 属性

<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>

　　jQuery 提供多个处理尺寸的重要方法：

　　width()　　height()

　　

</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

</body>

　　innerWidth()　　innerHeight()

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>

</body>

　　outerWidth()　　outerHeight()

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>

</body>

　　

转载于:https://www.cnblogs.com/sakura-zhang/p/7429932.html

跨平台控件查询机制之扩展iQuery
03-23
跨平台控件查询机制之扩展iQuery的一个主要目标就是提供一个跨平台的控件查询机制，那就需要考虑如下几个平台差异性：编程语言的差异，例如iOS可以使用Object-C、JavaScript等语言编程，Android平台使用Java，而...
jQueryLib:iQuery 私人图书馆
07-08
"jQueryLib:iQuery 私人图书馆"是一个专门针对jQuery的学习资源集合，旨在帮助开发者更深入地理解和掌握jQuery的各个方面。这个库可能包含了丰富的教程、示例代码以及jQuery的最新版本，对于想要提升JavaScript技能...
iQuery简介
apex_guagua的博客
07-24 1167
1，在页面中引用jQuery 在使用jQuery之前，我们需要在页面里引用它，主要的方式有两种，详情如下。 下载jQuery 可以从官方站点中下载 http://docs.jquery.com/download/ 下载后，把下载的jquery.js文件放到与页面相同的文件夹中，如下所示 <script src="jquery.js"></script> 2，jQuery的$(document).ready处理器 类似于window.onl...
前端学习（1）
qq_63745397的博客
01-26 346
（4） 学完is.es6，直接进vue了，或者recat；iquery没必要细学 甚至可以不学 虽然还有人在用 但是属于过时代的产品了。（1）三剑客过一遍然后直接学框架。找到工作之后回来再精学就行。不着急就慢慢学，肯定学的越精越好(学到遇到啥问题都能想起来不用百度)2-多在这儿记录问题，写代码（自己每天写的代码，加总结，简单明了的做笔记。（2）不着急的话先学es6，iquery可以学完框架之后学。（3）框架学个vue和react就够了。1-前端三剑客 Html CSS js。
jQuery学习：添加删除记录练习
weixin_47295886的博客
11-12 237
删除记录使用——超链接有一个默认行为 return false取消。对于表单数据可以使用：val("值“)进行数据操作。//需要给新增加的添加新的监听。find查找后代元素。
javaweb学习（day12-jQuery)
weixin_51580177的博客
04-23 1396
jquery就是简化了dom的操作，也确实很方便
iQuery 项目使用教程
gitblog_00246的博客
08-15 465
iQuery 项目使用教程 1. 项目的目录结构及介绍 iQuery 项目的目录结构如下： iquery/ ├── README.md ├── requirements.txt ├── setup.py ├── iquery/ │ ├── __init__.py │ ├── main.py │ ├── config.py │ ├── utils/ │ │ ├── __ini...
iQuery 开源项目教程
gitblog_00102的博客
08-15 319
iQuery 开源项目教程 项目介绍 iQuery 是一个开源项目，旨在提供一个简单而强大的工具，用于查询和处理数据。该项目基于 Python 开发，支持多种数据源和查询操作，适用于数据分析和处理任务。 项目快速启动 安装 首先，克隆项目仓库到本地： git clone https://github.com/protream/iquery.git cd iquery 安装依赖 使用 pip 安装...
iQuery stop()
alhivlhos222178181的博客
08-05 112
jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法 $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排...
粒子效果鼠标跟随iQuery网页特效
qq_36199395的博客
08-09 430
欢迎使用Markdown编辑器 效果截图: 下载链接:
IQuery判空
Net_CreateGuo的博客
12-26 181
代码块 <body> <input type="text" id="address" value="请输入账号"/> <input type="text" id="password" value="请输入密码" /> <input id="btn" type="button" value="登录" /> </body> Jquery 方法 <script type="text/javascript"> $(functi
iquery经典教程
09-21
所有效果说明：基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders...
iQuery:基于脚本的智能 CFML 查询
06-21
[ result = ] new iQuery ( SQL [ , parameters ] [ , options ] [ , QoQ ] ) ; parameters: { id : 1 , lastname : 'foo' , ... } options: { cachedWithin : createTimeSpan ( ... ) , datasource : 'myDSN' , .....
jQueryLib：打造个性化的iQuery学习与资源库
文件夹名称“jQueryLib-master”表明这是一个源代码仓库的主分支，该仓库可能托管着一个开源项目，项目的内容可以是教学资料、示例代码、实用工具等，旨在支持和促进jQuery的学习和使用。这个仓库可能是由个人开发者...
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 929
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
使用萤石云播放视频及主题模版配置
多看书少吃饭的博客
08-07 604
本文介绍了如何在H5页面中集成萤石云视频播放功能。首先需要安装ezuikit-js依赖，然后通过EZUIKitPlayer组件传入accessToken和视频URL即可实现基础播放功能。文章详细说明了两种版本（UIKIT和UIKITPRO）的区别，并提供了完整的代码示例，包括视频容器设置、自动播放配置和样式调整。此外，还介绍了如何通过template字段自定义视频主题模板，包括官方模板和自定义模板两种方式。最后提及了WEB端和H5端均可进行模板配置，为开发者提供了完整的萤石云视频接入解决方案。
数论手机辅助：打造便捷高效的移动应用交互体验
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
08-06 1169
关键在于实现 WebView 弹窗的拖动大小功能，通过监听窗口的触摸事件，在触摸按下时记录初始的窗口大小和触摸位置，在触摸移动过程中根据触摸位置的变化计算新的窗口大小，并更新窗口的布局参数，从而实现窗口大小可随触摸操作动态改变。方法中，目前只是通过 Toast 提示接收到了要插入的文本，实际应用中可以根据需求进一步完善，比如利用 AccessibilityService 来实现真正的文本插入操作，将选中的文本模拟输入到当前聚焦的输入框中，从而实现更加智能化和便捷的交互体验。在 Android 端的。
IntelliJ IDEA 新手全方位使用指南
最新发布
hy行者勇哥的博客
08-09 745
本文面向刚接触软件开发、使用 IntelliJ IDEA 的新手，详细介绍了 IDEA 的背景、版本区别、核心功能、运行原理、界面操作、项目管理、运行配置、以及 Git 版本控制基础。文章突出实用操作和理解流程，帮助新手快速熟悉IDEA环境，顺利完成项目启动、调试和版本管理。
【JS】扁平树数据转为树结构
此人太懒，没有任何简介
08-07 368
摘要：本文展示了如何将扁平数据结构转换为树形结构的JavaScript实现。通过buildTree函数，可以根据指定的ID和父ID字段将扁平数据转换为嵌套的树形结构，并可选地删除空子节点。示例代码演示了如何将包含公司部门信息的扁平数据转换为层级分明的树状结构，结果输出为JSON格式的树形数据。该工具函数适用于处理组织机构、菜单等需要层级展示的数据场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值