jQuery值操作例子 (代码)

最新推荐文章于 2024-06-16 13:16:08 发布
最新推荐文章于 2024-06-16 13:16:08 发布
阅读量427 收藏 2
点赞数 10
分类专栏： 前端 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BSCHN123/article/details/139157243
版权

直接上代码

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
        <div id="x1">例子</div>
        
        <script src="js/jquery-3.7.1.min.js"></script>
        <script>
            console.log($("#x1").text())  // 在浏览器里的控制台能看到输出“例子”
            
            $("#x1").text("更改")
            
        </script>

    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
        <input type="text" placeholder="用户名" id="user" />
        <input type="password" placeholder="密码" id="pwd" />
        <input type="button" value="提交" onclick="clickMe();" />

        <ul class="content"></ul>
        
        <script src="js/jquery-3.7.1.min.js"></script>
        <script>
            function clickMe() {
                var user = $("#user").val();
                var pwd = $("#pwd").val();
                var dataString = user + "-" + pwd;

                var tag = $("<li>").text(dataString)
                $(".content").append(tag)

                $("#user").val("");
                $("#pwd").val("");
            }
            
        </script>

    </body>
</html>

在浏览器里就能看到输入框有变化。

点个赞再走呗~

CHNMSCS
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery对HTML的操作,jQuery对html的操作。
weixin_28938171的博客
06-11 1207
1.jQuery 中非常重要的部分，就是操作 DOM 的能力，设置内容和属性三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容 设置的时候仅需写text("hello world")即可，即填充内容作为参数传入即可。以下其他函数一样html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设...
jquery 中加入html代码,jquery实现动态添加html代码
weixin_30630377的博客
05-30 5534
先看下思导图，整体了解下，然后我们再来学习。现在我们来看一下几段代码，然后根据这几段代码我们来学习一下如何正确的学习动态添加html。一.html()方法html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。第一段代码：function CommentBubble(){var w1 = '' +' ' +'' +'' + '' +'' +'' +' ' +'...
jquery移动listbox的值原理及代码
12-12
jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox，这样也可以熟悉一下json的使用方法。先看看简单的html，因为服务器控件会自动转换为html标签，所以在例子中，我并没有用服务器控件。如下： <asp></asp> 会自动转换成：<select></select> html代码如下： 代码如下: <div xss=removed> <div xss=removed> <select siz
jQuery获得内容和属性示例代码
12-07
获得内容 – text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() – 设置或返回所选元素的文本内容 html() – 设置或返回所选元素的内容（包括 HTML 标记） val() – 设置或返回表单字段的值 获取属性 – attr() jQuery attr() 方法用于获取属性值。 下面的例子演示如何获得链接中 href 属性的值： 实例 代码如下: $(“button”).click(function(){ alert($(“#w3s”).attr(“href”)); });
jquery 操作DOM的基本用法分享
12-12
例子展示： jquery代码： 代码如下: [removed] $(document).ready(function(){ alert($(“ul li:eq(1)”).text()); //选取第二个li的值 alert($(“p”).attr(“title”)); //选取p的title属性的值 //追加元素 $(‘ul’).append(“<li title=’香蕉’>香蕉</li>”).append(“<li title=’雪梨’>雪梨</li>”); //前面追加 $(‘ul’).prepend(“<li title=’欠佳’>前加</li
JQuery的DOM操作+事例
泠泠似水
02-23 2784
1.DOM节点的创建通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("<div></div>")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("<div>我是文本
jQuery权威指南-源代码
11-11
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
使用jQuery获取radio/checkbox组的值的代码收集
10-29
很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。看下面的一个小例子。在这个例子中包括了以下几个功能
jquery生成一个li_jquery实现动态添加html代码
weixin_39636718的博客
12-19 685
先看下思导图，整体了解下，然后我们再来学习。现在我们来看一下几段代码，然后根据这几段代码我们来学习一下如何正确的学习动态添加html。一.html()方法html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。第一段代码：function CommentBubble(){var w1 = '' +' ' +'' +'' +'' +'' +'' +' ' +' ' +...
JQ操作DOM
dingxue3465的博客
03-16 198
回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构： <!-- HTML结构 --> <...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 281
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 361
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 284
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
Web前端写随机抽奖：技术与创意的碰撞
最新发布
yvnmth_025y的博客
06-16 183
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
SortTable.js + vxe-table 实现多条批量排序
小先生编程
06-12 598
环境: 功能: 实现表格拖动排序，支持单条排序，多条排序 实现思路: 官网只有单条排序的例子，网上也都是简单的使用，想要实现多条排序，就要结合着表格的复选框功能，在对其勾选的行统一计算！ 最终效果: 实现代码
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1265
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue格网图
南北粉面馆
06-16 141
【代码】vue格网图。
vue v-img引用公众号图片时报错 此图片来自微信公众平台
打不死的小五
06-11 278
解决方法so easy，官方一行代码解决，附参考文档。
js于jquery交互的代码
04-01
以下是一个简单的例子，展示了如何使用jQuery来操作DOM元素和事件处理，以及与JavaScript代码交互： HTML代码： ```html <html> <head> <title>jQuery和JavaScript交互</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1 id="title">这是一个标题</h1> <input type="text" id="input"> <button id="btn">点击我</button> <script src="app.js"></script> </body> </html> ``` JavaScript代码（app.js）： ```javascript // 获取DOM元素 var title = document.getElementById('title'); var input = document.getElementById('input'); var btn = document.getElementById('btn'); // jQuery事件处理 $(btn).click(function(){ var inputValue = $(input).val(); // 获取输入框的值 alert('您输入的内容是：' + inputValue); }); // JavaScript代码操作DOM元素 title.style.color = 'red'; // 设置标题颜色为红色 // jQuery代码操作DOM元素 $(title).css('font-size', '24px'); // 设置标题字体大小为24px ``` 在这个例子中，我们首先使用JavaScript获取了页面中的DOM元素，然后使用jQuery来绑定按钮的点击事件处理函数。在事件处理函数中，我们使用了jQuery获取输入框的值，并使用原生JavaScript代码来设置标题的颜色。最后，我们使用jQuery来设置标题的字体大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值