Jquery获对HTML控件的控制

1、获取控件的值
  1.1、radio

    1.1.1 获取一组radio被选中项的值 
        var item = $(‘input[name=items][checked]‘).val();

    1.1.1 radio单选组的第二个元素为当前选中值 
        $(‘input[name=items]‘).get(1).checked = true;
  1.2、select

      1.2.2 获取select被选中项的文本 
       var item = $("select[name=items] option[selected]").text();

    1.2.1 设置select选中为某一项
      $(‘#select_id‘)[0].selectedIndex = 1;

 获取值:

      文本框,文本区域:$("#txt").attr("value"); 
      多选框checkbox:$("#checkbox_id").attr("value"); 
      单选组radio:
$("input[type=radio][checked]").val(); 
      下拉框select:
$(‘#sel‘).val();

2、控制表单元素: 
  文本框,文本区域:

      $("#txt").attr("value",‘‘);//清空内容 
      $("#txt").attr("value",‘11‘);//填充内容

  多选框checkbox:

      $("#chk1").attr("checked",‘‘);//不打勾 
      $("#chk2").attr("checked",true);//打勾 
      if($("#chk1").attr(‘checked‘)==undefined) //判断是否已经打勾

  单选组radio:

      $("input[type=radio]").attr("checked",‘2‘);//设置value=2的项目为当前选中项

  下拉框select:

      $("#sel").attr("value",‘-sel3‘);//设置value=-sel3的项目为当前选中项 
      $("<option value=‘1‘>1111</option><option
value=‘2‘>2222</option>").appendTo("#sel")//添加下拉框的option 
      $("#sel").empty();//清空下拉框

  注: 

      在用$("#id")来获得页面的input元素的时候,$("#id").value不能取到值 ,$("")是一个jquery对象,而不是一个dom element ;

      value是dom element的属性 ,jquery与之对应的是val 。val() :获得第一个匹配元素的当前值;val(val):设置每一个匹配元素的值。

      所以,代码应该这样写:

          取值:val = $("#id")[0].value  或者 val = $("#id").attr("value");
          赋值: $("#id")[0].value = "new value"  或者  $("#id").val("new value");

Jquery获对HTML控件的控制

时间: 2024-10-17 12:46:29

Jquery获对HTML控件的控制的相关文章

Jquery easyui的validatebox控件和正则表达式

Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email.是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性.验证可以实现在数据层和业务规则层,但应当在表现层进行前端的"保护",因此,我们通常在UI层为用户提供友好的.可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证.在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证.那现在说的Validatebox是怎么实现验证的呢? 仔细观察j

jQuery之自定义pagination控件

slpagination 效果: slpagination.js (function($) { $.fn.slpagination = function(options, params) { $.extend($.fn.slpagination.defaults, options); $(this).attr({ "class" : $.fn.slpagination.defaults.css, style : $.fn.slpagination.defaults.style });

jQuery同时处理一个控件的click和dblclick事件

1 jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) { 2 return this.each(function(){ 3 var clicks = 0, self = this; 4 jQuery(this).click(function(event){ 5 clicks++; 6 if (clicks == 1) { 7 setTimeout(func

jquery上传文件控件Uploadify

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

jquery 的日期时间控件(年月日时分秒)

<!-- import package --> <script type="text/javascript" src="JS/jquery.js"></script> <script type="text/javascript" src="JS/jquery-ui-1.7.3/ui/jquery-ui-1.7.3.custom.js"></script> <sc

jquery仿jquery mobile的select控件效果

不说废话,直接上代码 //仿jQuery mobile Select控件 //用法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function SelectBox(box,_id,selectvalue,Value) { if(Value != selectvalue) { $("#" + box).html("<input type=hidden value='" + Value + "' id='&qu

为什么Jquery对input file控件的onchange事件只生效一次

今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解决方法的: 1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑添加.... }); 3.Jquery方法二: onchange后,生成一个新input type

解决Jquery对input file控件的onchange事件只生效一次的问题

如题,解决办法的代码如下: 1. $('#fileId').live('change',function(){ //逻辑添加.... }); 2. $('#fileId').change(function(){ $('#inputFileID').replaceWith('<input name="fileToUpload" type="file" id="inputFileID" />'); }); 解决Jquery对input f

jquery的智能提示控件

福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我