jQuery与js获取文本框的值以及调方法的区别

最新推荐文章于 2024-09-12 11:40:49 发布
最新推荐文章于 2024-09-12 11:40:49 发布
阅读量974 收藏
点赞数
分类专栏： jQuery学习 文章标签： jquery javascript linq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63662531/article/details/123579278
版权

代码如下

<!DOCTYPE html>

<html>

    <head>

       

        <meta charset="utf-8" />

        <title>jQuery</title>

        <script type="text/javascript">

//          window.οnlοad=function(){

//              //找到按钮

//              var b=document.getElementById("btna");

//              //给按钮增加点击事件  匿名函数

//              b.οnclick=function(){

//                  //拿文本框的值

//                  var a=document.getElementById("aa").value;

//                  alert(a);

//              }

//          

//          }

        </script>  

        <!-- 引入js=jquery类库 -->

        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //页面载入函数  相当于window.onload

            $(document).ready(function(){

                //案例1

                // var b=$("#btnb");//拿到按钮

                // b.click(function(){//添加点击事件

                //  var a=$("#aa").val();

                //  alert(a);

                // })

                //二 选择器

                //2.1基本选择器-层次选择器

                // $("#xx").css("background","red");单个属性

                //$("#yy").css({"background":"red","color":"pink"});多个属性

                //$("*").css("background","pink");//所有页面  通配符

                // $("p,span").css("background","red");并集

                // $("div span").css("background","red");交集 所有的后代

                //$("div>span").css("background","red");父子关系

                //$("p+span").css("background","red");兄弟

               

               

                //2.3 过滤选择器

                // $("ul>li:first").css("background","red");第一个

                // $("ul>li:last").css("background","red");最后一个

                 //$("ul>li:eq(-3)").css("background","red");倒数 下标 找指定位置

                // $("ul>li:odd").css("background","red");// 奇数下标 偶数行

                 //$("ul>li:even").css("background","red");//偶数下标 奇数行

                    //$("ul>li:gt(0)").css("background","red");大于 不包括自己

                    //$("ul>li:lt(4)").css("background","red"); 小于  不包括自己

                    //$("ul>li:lt(4):gt(2)").css("background","red"); //先小于再大于  不包括自己

                    //案例5  隔行换色

                    // $("table tr:even" ).css("background","pink");

                    // $("table tr:odd" ).css("background","red");

               

                    //2.4 表单选择器

                    $("#ok").click(function(){

                        拿性别

                        var sex=$("myForm input:radio:checked").val();

                        console.info(sex);

                        拿爱好

                        var ah=$("#myForm input:checkbox:checked").each(function(){

                            console.info($(this).val());

                        })

                        拿地址

                    var dz= $("#myForm select option:selected").val();

                        console.info(dz);

                       

                       

                    })

                })

        </script>

       

    </head>

    <body>

        <h2>jQuery入门以及选择器</h2>

        <h3>一，入门</h3>

        <h4>1.1点击按钮弹出文本框的值(js与jQuery对比)</h4>

        <input type="text" id="aa"/>

        <input type="button" value="点击(纯js方式)" id="btna"/>

        <input type="button" value="点击(jquery方式)" id="btnb"/>

        <h3>二·选择器</h3>

        <h4>2.1 基本选择器</h4>

        <div id="xx">

            <p> 这是第一个div&nbsp;<span>呕董：asd</span></p>

            <span>大炮:siad</span>

        </div>

        <div class="yy">

            这是第二个div

        </div>

        <p> 这是外面的div</p>

            <span>路边的野花</span>

            <h4>2.3 过滤选择器</h4>

            <ul>

                <li>0-A</li>

                <li>1-B</li>

                <li>2-C</li>

                <li>3-D</li>

                <li>4-E</li>

            </ul>

            <h4>案例5</h4>

            <table border="1" width="%50">

                <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                </tr>

                <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                </tr>

                <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                </tr>

                <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                </tr>

            </table>

            <h4>2.4 表单选择器</h4>

            <form action="" id="myForm">

                性别：<input type="radio" value="男" name="1"/>男

                <input type="radio" value="女" name="1"/>女<br>

                爱好：<input type="checkbox" value="打篮球"/>打篮球

                <input type="checkbox" value="触发"/>触发

                <input type="checkbox" value="打豆豆"/>打豆豆<br>

                地址：<select name="" id="">

                    <option value="湖南省">湖南省</option>

                    <option value="湖北省">湖北省</option>

                    <option value="海南省">海南省</option><br>

                </select><br>

                <input type="button"  id="ok" value="确定"/>

            </form>

    </body>

</html>

可乐386
关注
专栏目录
JS与jQuery实现子窗口获取父窗口元素值的方法
11-26
本文将详细介绍如何使用JavaScript（简称JS）与jQuery来实现子窗口获取父窗口中元素值的功能。 ### JS实现子窗口获取父窗口元素值的方法 在JavaScript中，可以通过`window.opener`属性访问打开当前窗口的那个窗口...
jQuery获取元素和原生js获取元素有什么区别
沐法沙
09-12 1536
DOM对象：用原生 js 获取过来的对象就是 dom 对象 jQuery对象： 用 jQuery 方式获取过来的对象就是 jQuery 对象，本质：通过$把DOM元素进行包装后产生的对象（伪数组形式存储） jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScript 属性和方法 Dom对象和 jQuery 对象相互转换 因为原生 js 比 jQuery 更大，原生...
js 与 jq 获取多个文本框的值并进行计算区别
sd6275832ght的博客
02-14 2839
首先是以js方式对多个文本框框进行操作 window.onload = function () { //var oTable = document.getElementById("dgv"); //if (oTable) { // var oInput = ...
如何使用jQuery获取文本框值
一名可爱的技术搬运工
05-22 2461
要获取文本框值，可以使用jQuery val（）函数。 例如， $（'input：textbox'）。val（）-获取文本框值。 $（'input：textbox'）。val（“新短信”）–设置文本框值。 文字框示例 <html> <head> <title>jQuery get textbox value example</ti...
关于js和jq获取文本内容和文本框内容的值
热门推荐
繁华是瑾的博客
05-23 2万+
jq：     $('.class').text()  获取文本的内容；     $('.class').text('想要在文本框内放置的内容');   在标签内放置内容 js： documentgetElementById('id').innerHTML    获取文本的内容； documentgetElementById('id').value    获取文本框的内容;
jQuery 监听修改文本框事件
LinDom
08-11 1万+
在开发中，有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能，要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的，还是鼠标粘贴进来的。 1，实现原理 要实现内容实时监听响应，我们需要用到两个监听事件：oninput 事件和 propertychange 事件 （1）oninput 这个是标准浏览器的事件，一般浏览器都支持。当
js/jquery获取文本框输入焦点的方法
10-26
在JavaScript和jQuery中，获取文本框输入焦点是常见的交互操作，它可以帮助用户更好地导航和编辑表单内容。本文将详细讲解两种不同的方法来实现这一功能。 首先，我们来看第一种方法，这是一种纯JavaScript的方式。...
在js(jquery)中获得文本框焦点和失去焦点的方法
12-12
先来看javascript的直接写在了input上 代码如下: <input name=”pwuser” type=”text” id=”pwuser” class=”input” value=”楼盘账号” onBlur=”if(this.value==”) this.value=’楼盘账号’;” onFocus=”...
jQuery+php实时获取及响应文本框输入内容的方法
10-22
这里，`onkeyup`事件触发了一个名为`search_func`的JavaScript函数，当用户在文本框中输入内容并释放键盘键时，该函数会被调用，并将当前文本框的值作为参数传递。 接下来，我们来看jQuery部分，这是实现实时响应的...
jquery获取easyui日期控件的值实现方法
11-27
然而，直接使用jQuery的`.val()`方法来获取日期控件的值可能会遇到问题，就像描述中提到的那样，返回的结果可能是空或者初始值。 EasyUI的日期控件在页面上表现为一个文本框，同时内部包含了一个隐藏的输入元素，...
jQuery、JS和jQuery Easyui三种不同获取值的方法
CainLanmbert的博客
06-27 183
首先时原生JS的获取值方法： var result=document.getElementById('id').value; jQuery获取值的方法时： $("#id").val(); jQuery Easyui获取值时： $("#id").getVal(); 没错，就是这么简单的，相信自己，能行！ ...
js与jQuery在页面取值的方法
weixin_41801336的博客
09-04 348
js与jQuery在页面取值的方法 1： 根据class 、 id 取 input 标签的value 值 。 jQuery : $(".className").val(); $("#idName").val(); javaScript : document.getElementById("idName").value; 2: 根据class 、id 获取标签之间的内容：如 <span> 、<
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2589
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 553
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 296
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 359
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 589
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 329
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
最新发布
weixin_41711744的博客
09-12 466
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
jQuery 设置光标到文本框最后一个值后
06-01
可以使用 JavaScript 来...这里用到了 jQuery 库中的 `val` 方法来获取文本框中的值，并用 `setSelectionRange` 方法设置光标位置。注意，`setSelectionRange` 方法是 DOM 原生方法，需要通过 `[0]` 来获取 DOM 元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值