JQuery对基本Html控件的操作

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量654 收藏
点赞数
分类专栏： Jquery 文章标签： jquery html button input div server

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ControlGetAndSet.aspx.cs" Inherits="JQueryExample_ControlGetAndSet" %>   

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

  

<html xmlns="http://www.w3.org/1999/xhtml">   

<head runat="server">   

    <title></title>   

  

    <mce:script src="../JS/jquery-1.3.2.min.js" mce_src="JS/jquery-1.3.2.min.js" type="text/javascript"></mce:script>   

    <mce:script type="text/javascript"><!--   

        function GetText() {   

            var text = $("input[name=text1]").val();   

            alert(text);   

               

            //用id获取  text的value值   

            var tmp = $("#text1").val();   

            alert(tmp);   

        }   

  

  

        function SetText() {   

            var text = $("input[name='text1']");   

            text.val("用Name获取赋值");   

            //var tmp = $("#text1").val("用ID获取赋值");   

        }   

  

           

        //获取Select选中值   

        function GetSelect() {   

            var sel = $("select[name='select1']").text();   

            //var sel = $("select[name='select1'] option[selected]").text();   

               

            //通过id获取   

            //var sel = $("#select1").text();    

  

            alert(sel);   

        }   

           

        //设置选中项的值  未实现   只能设置已有项选中   

        function SetSelect() {   

            //$("#select1").val("北京");//将value为“北京”的项选中   

            $("#select1 ").get(0).selectedIndex = 1   

        }   

           

        //添加Option   

        function AddSelectOptions() {   

            //$("<option>北京</option>").appendTo("#select1");   

            //for(var i=0;i<5;i++)   

            //{   

            //    $("<option>" + i + "</option>").appendTo("#select1");   

            //}   

  

            //prepend为第一个，append(appendTo)为追加   

            $("#select1").append("<option>北京</option>");   

            for(var i=0;i<5;i++)   

            {   

                $("#select1").append("<option>" + i + "</option>");   

            }   

               

               

        }   

           

        //移除选中项   

        function RemoveSelectOptions() {   

            $("#select1 option[selected]").remove();   

        }   

           

        //清空option   

        function ClearSelectOptions() {   

            //$("#select1").empty();   

            $("#select1").html("");   

        }   

  

  

  

  

  

        function GetCheck() {   

            var check = $("#checkbox1").attr("checked");   

            alert(check);   

        }   

  

        function SetCheck() {   

            $("#checkbox1").attr("checked", true);   

        }   

        function AddCheck() {   

            $("<input type='checkbox' />").appendTo("#form1");   

        }   

           

           

  

        function GetRadio() {   

            var ra = $("input[type='radio'][checked]").attr("value");   

            //var ra = $("input[type='radio'][checked]").val();   

            alert(ra);   

        }   

  

        function SetRadio() {   

            //$("input[type='radio']").get(0).checked = true;   

            $("input[type='radio'][value=2]").attr("checked","checked");   

        }   

       

// --></mce:script>   

       

       

       

       

    

</head>   

<body>   

    <form id="form1" runat="server">   

    <div>   

        <input id="checkbox1" type="checkbox" value="是否正确"  style="width:100px" />   

        <input id="btnGetCheck" type="button" value="获取Check是否选中" οnclick="GetCheck()" />   

        <input id="btnSetCheck" type="button" value="设置Check选中" οnclick="SetCheck()" />   

        <input id="btnAddCheck" type="button" value="新增Check" οnclick="AddCheck()" />   

           

    </div>   

    <div>   

       

        <input id="radio1" type="radio"  value="1" style="width:50px" />   

        <input id="radio2" type="radio" value="2" style="width:50px" />   

        <input id="btnGetRadio" type="button" value="获取Radio是否选中" οnclick="GetRadio()" />   

        <input id="btnSetRadio" type="button" value="设置Radio选中" οnclick="SetRadio()" />   

    </div>   

       

    <div>   

           

        <select id="select1" name="select1">   

            <option>上海</option>   

        </select>   

        <input id="btnGetSelect" type="button" value="获取选中项值" οnclick="GetSelect()" />   

        <input id="btnSetSelect" type="button" value="设置选中项值" οnclick="SetSelect()" />   

        <input id="Button1" type="button" value="添加Option" οnclick="AddSelectOptions()" />   

        <input id="Button2" type="button" value="移除选中项" οnclick="RemoveSelectOptions()" />   

        <input id="Button3" type="button" value="清空下拉框" οnclick="ClearSelectOptions()" />   

    </div>   

           

           

          

       

    <div>   

           

        <input id="text1" name="text1" type="text" value="文本框" />   

        <input id="btnGetText" type="button" value="获取Text值" οnclick="GetText()" />   

        <input id="btnSetText" type="button" value="设置Text值" οnclick="SetText()" />   

    </div>   

    </form>   

</body>   

</html>  

 

 

 

另外jquery对元素对象的使用可以参考这里

http://blog.csdn.net/zhvsby/archive/2010/10/15/5944160.aspx

 

jquery的系统学习可以参考这里

http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html

yanqinhui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多文件拖拽上传以及利用Jquery替代HTML5上传控件
好大一只麻吉
03-06 6806
最近一直在研究文件上传的各种方法以及使用其他控件去重构HTML5自带的上传控件，这一篇将会总结这段时间研究的文件上传的两种方式，并对这一方面告一段落。本文将分为两部分介绍并解释文件上传的原理和实现过程，第一篇为多文件拖拽上传，类似于QQ邮箱文件拖拽一样；第二篇为使用Jquery代替HTML5上传控件，比较华丽的为每一个文件显示进度条和显示返回结果。第一篇——拖拽文件拖拽即把一个或多个文件从电脑桌面选
jQuery—基本使用
m0_59030524的博客
03-14 399
目标： 能够说出什么是jQuery 能够说出jQuery的优点 能够简单使用jQuery 能够说出DOM对象和jQuery对象的区别 1. 概述 1.1JavaScript 库 仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。 JavaScript 库：即 library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等。 ...
JQuery对html控件操作总结
liuyuliuyu520的专栏
06-17 486
语法解释： 1. $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#select_i
html 按钮获取文本框,jQuery Html控件基本操作(日常收集整理)
weixin_39598472的博客
06-04 425
闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。基于jquery 1.3.21.文本框//文本框$("#btnTextGet").click(function(){alert($("#txtNum").val());});$("#btnTextSet").click(function(){$("#txtNum").attr("value",'123456');//赋值//$("#txt...
HTML5-JQuery
qq_57071468的博客
10-07 314
1.jQuery----JavaScript的封装库---DOM节点封装了方法与事件2.jQuery特点：1. 轻量级。核心文件才几十kb，不会影响页面加载速度。2. 跨浏览器兼容，基本兼容了现在主流的浏览器。3. 链式编程、隐式迭代。4. 对事件、样式、动画支持，大大简化了DOM操作。5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。6. 免费、开源。
【JQuery】JQuery和原生DOM操作动态增加HTML代码问题探究
weixin_45500506的博客
08-16 417
文章目录结论依然存在的问题   事情是这样的。再做动态表格行和列的删除时，导师说我做的这种键入的形式不对，这种形式用户体验感多差啊，甲方肯定不会满意的。给我提出改进方案，要么通过模态框和输入框结合起来获得相关数据，要么通过结合单选框（radio），选中要删除的行或列，再点击按钮删除。模态框我现在还没接触，同时为了锻炼前端编程能力就选择了使用单选框来解决。 首先给出基本HTML <!DOCTYPE html> <html lang="en"> <head> <
JQuery对基本Html控件的操作TextBox、Select、Radio、CheckBox
xrongzhen的专栏
04-01 2466
废话少说，将JQuery对Html控件的基本操作集成到一个Aspx页面，让初学者有个直观的了解。JQuery老鸟可以直接忽略。
html中字段是日期控件,jQuery日历插件datepicker用法详解
weixin_34474777的博客
06-01 727
jQuery是一款不可多得的非常优秀的javascript脚本开发库，而基于其上的很多插件也是非常规范和卓越的，如果错过这番美景真是太可惜了，比如datepicker这个插件。一般MIS系统的前端，尤其是用户注册页面，都会有诸如“出身年月”的日期输入框，最简单的做法就是使用一个标签，这样做的弊端有很多：首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题，如果深入下去还...
JQuery对基本Html控件的操作TextBox、Select、Radio、CheckBox .
java_pp的专栏
11-14 1300
废话少说，将JQuery对Html控件的基本操作集成到一个Aspx页面，让初学者有个直观的了解。JQuery老鸟可以直接忽略。直接拷贝下来放到本地页面即可直观查看。   [javascript] view plaincopyprint? "C#" AutoEventWireup="true" CodeFile="ControlGetAndSet.aspx.cs" Inheri
HTML、CSS、JavaScript、jQuery
weixin_54685622的博客
04-18 2081
1 HTML、CSS HTML: 用于开发网页的一门技术 CSS: 用于修饰、渲染网页的一门技术 HTML+CSS可以开发一个非常美观、非常漂亮的网页 开发网页 盖房子 HTML标签搭建网页的结构 砖块(搭建房子的结构) CSS属性 石灰、油漆等涂料 1.1. HTML概述 1.1.1. HTML是什么 HTML(Hyper Text Markup Language): 超文本标记语言 超文本: 超级文本、超过文本（其中可以包含除了文本以 外的其他数据，例如图片、音频、视频等各种格式） 标记：也叫标签、元素
jQuery操作基本控件方法实例分析
11-23
本文将深入探讨jQuery如何操作基本的HTML控件，通过实例来帮助理解这些方法的用法。 首先，jQuery提供了多种选择器来定位页面上的元素，这在操作控件时尤其有用： 1. **根据控件的样式class获取控件**： 使用`$....
jQuery Html控件基本操作(日常收集整理)
10-22
主要介绍了jQuery Html控件基本操作(日常收集整理)的相关资料,需要的朋友可以参考下
jquery.page分页控件.zip
03-01
2. **jquery-1.9.1.js** - jQuery的核心库，为分页功能提供基础的DOM操作和事件处理能力。 3. **jquery.page.js** - 分页插件的主要实现代码，包含分页逻辑和样式设置。 4. **jquery.page.css** - 提供了预设的CSS...
jquery时间控件时分秒
05-10
jQuery Timepicker Addon的基本使用方法是引入jQuery库、Timepicker插件的CSS和JS文件，然后通过简单的jQuery选择器和方法来激活控件。例如： ```html <!DOCTYPE html> <html lang="zh"> <title>jQuery ...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1158
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1019
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 407
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 251
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 777
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html+css+js前端知识点
12-13
HTML5的新特性包括离线存储、拖放功能、媒体元素、表单控件增强、画布、SVG图形、Web Workers和Web Storage等，CSS3的新特性则涉及选择器层级、多列布局、边框与背景、转换、动画、渐变、阴影等。 在布局方面，实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值