jQuery Html控件基本操作(日常收集整理)
闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。
基于jquery 1.3.2
<!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
1.文本框
//文本框
$("#btnTextGet").click(function(){
alert($("#txtNum").val());
});
$("#btnTextSet").click(function(){
$("#txtNum").attr("value",'123456');//赋值
//$("#txtNum").val("123456");//赋值
});
html代码：
文本框：
<input type="text" id="txtNum" /> <input type="button" value="给文本框赋值" id="btnTextSet" /><input type="button" value="获取文本框值" id="btnTextGet" />
2.Span
//span
$("#btnSpanSet").click(function(){
$("#spanId").html("大家好");
});
$("#btnSpanGet").click(function(){
alert($("#spanId").html());
})
html代码
span标签：
<span id="spanId"></span><input type="button" value="给span标签赋值" id="btnSpanSet" /><input type="button" value="获取span标签内容" id="btnSpanGet" />
3.下拉框：
//下拉框
$("#btnSelectText").click(function(){
alert($("#ddlBook option:selected").text());
});
$("#btnSelectValue").click(function(){
alert($("#ddlBook option:selected").val());
});
$("#btnClearSelect").click(function(){
$("#ddlBook").empty();//清空下拉列表
});
$("#ddlBook").change(function(){//添加change事件
var val=$("#ddlBook").val(); //获取Select选择的Value
var text=$("#ddlBook option:selected").text(); //获取Select选择的Text
var checkIndex=$("#ddlBook ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#ddlBook option:last").attr("index"); //获取Select最大的索引值
alert(text);
});
$("#btnSelectAppend").click(function(){
$("#ddlBook").append("<option value=\"5\">物理</option>"); //为Select追加一个Option(下拉项)
});
$("#btnSelectPreAppend").click(function(){
$("#ddlBook").prepend("<option value=\"0\">请选择</option>"); //为Select插入一个Option(第一个位置)
});
html源码
下拉框：
<select id="ddlBook"> <option value="1">语文</option> <option value="2">数学</option> <option value="3">英语</option> <option value="4">政治</option> </select> <input type="button" value="获取下拉框选中的值" id="btnSelectText" /><input type="button" value="获取下拉框选中的value" id="btnSelectValue" /> <input type="button" value="清空下拉框" id="btnClearSelect" /><input type="button" value="后面追加选项" id="btnSelectAppend" /> <input type="button" value="第一个位置插入" id="btnSelectPreAppend" />
4.radio 单选框
//radio 单选框
$("#btnRadioValue").click(function(){
//alert($("input:radio[type='radio'][checked]").val());
alert($("input:radio[type='radio'][name=IsEnable][checked]").val());//这是jquery 1.3的写法，在1.2版本下运行有问题
//alert($("input[@type=radio][@checked]").val());//1.2的版本的写法
});
$("#btnRadioSet").click(function(){
$("input:radio[type='radio'][name=IsEnable]").attr("checked",'0');//设置value=0的项目为当前选中项
});
html源码：
radio控件：
是<input type="radio" value="1" checked="checked" name="IsEnable" /> 否<input type="radio" value="0" name="IsEnable" /> <input type="button" value="获取Radio选中的值" id="btnRadioValue" /><input type="button" value="选中Value为0的选项" id="btnRadioSet" />
5.复选框
//复选框
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
});
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
});
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
});
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
});
});
$("#btn5").click(function(){
var str="";
$("input[name='checkbox']:checkbox:checked").each(function(){
str+=($(this).val()+"\r");
});
alert(str);
});
html源码：
复选框：
<input type="button" id="btn1" value="全选"/> <input type="button" id="btn2" value="取消全选"/> <input type="button" id="btn3" value="选中所有奇数"/> <input type="button" id="btn4" value="反选"/> <input type="button" id="btn5" value="获得选中的所有值"/> <br> <input type="checkbox" name="checkbox" value="checkbox1" />checkbox1 <input type="checkbox" name="checkbox" value="checkbox2" />checkbox2 <input type="checkbox" name="checkbox" value="checkbox3" />checkbox3 <input type="checkbox" name="checkbox" value="checkbox4" />checkbox4 <input type="checkbox" name="checkbox" value="checkbox5" />checkbox5 <input type="checkbox" name="checkbox" value="checkbox6" />checkbox6 <input type="checkbox" name="checkbox" value="checkbox7" />checkbox7 <input type="checkbox" name="checkbox" value="checkbox8" />checkbox8
6.按钮
//隐藏按钮
$("#btnHide").click(function()
{
if($("#btn").is(":hidden"))
{
$("#btnHide").val("隐藏按钮");
//$("#btn").show;//这种写法也可以
$("#btn").css('display','');
}
else
{
$("#btnHide").val("显示按钮");
//$("#btn").hide();//这种写法也可以
$("#btn").css('display','none');
}
//$("#btn").toggle();//这一句就可以实现上面的功能
});
html源码：
按钮：
<input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/>
<!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>
<title>JQuery操作Html控件</title>
<!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//文本框
$("#btnTextGet").click(function(){
alert($("#txtNum").val());
});
$("#btnTextSet").click(function(){
$("#txtNum").attr("value",'123456');//赋值
//$("#txtNum").val("123456");//赋值
});
//span
$("#btnSpanSet").click(function(){
$("#spanId").html("大家好");
});
$("#btnSpanGet").click(function(){
alert($("#spanId").html());
})
//下拉框
$("#btnSelectText").click(function(){
alert($("#ddlBook option:selected").text());
});
$("#btnSelectValue").click(function(){
alert($("#ddlBook option:selected").val());
});
$("#btnClearSelect").click(function(){
$("#ddlBook").empty();//清空下拉列表
});
$("#ddlBook").change(function(){//添加change事件
var val=$("#ddlBook").val(); //获取Select选择的Value
var text=$("#ddlBook option:selected").text(); //获取Select选择的Text
var checkIndex=$("#ddlBook ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#ddlBook option:last").attr("index"); //获取Select最大的索引值
alert(text);
});
$("#btnSelectAppend").click(function(){
$("#ddlBook").append("<option value=\"5\">物理</option>"); //为Select追加一个Option(下拉项)
});
$("#btnSelectPreAppend").click(function(){
$("#ddlBook").prepend("<option value=\"0\">请选择</option>"); //为Select插入一个Option(第一个位置)
});
//radio 单选框
$("#btnRadioValue").click(function(){
//alert($("input:radio[type='radio'][checked]").val());
alert($("input:radio[type='radio'][name=IsEnable][checked]").val());//这是jquery 1.3的写法，在1.2版本下运行有问题
//alert($("input[@type=radio][@checked]").val());//1.2的版本的写法
});
$("#btnRadioSet").click(function(){
$("input:radio[type='radio'][name=IsEnable]").attr("checked",'0');//设置value=0的项目为当前选中项
});
//复选框
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
});
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
});
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
});
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
});
});
$("#btn5").click(function(){
var str="";
$("input[name='checkbox']:checkbox:checked").each(function(){
str+=($(this).val()+"\r");
});
alert(str);
});
//隐藏按钮
$("#btnHide").click(function()
{
if($("#btn").is(":hidden"))
{
$("#btnHide").val("隐藏按钮");
//$("#btn").show;//这种写法也可以
$("#btn").css('display','');
}
else
{
$("#btnHide").val("显示按钮");
//$("#btn").hide();//这种写法也可以
$("#btn").css('display','none');
}
//$("#btn").toggle();//这一句就可以实现上面的功能
});
});
</script>
</head>
<body>
文本框：<input type="text" id="txtNum" />
<input type="button" value="给文本框赋值" id="btnTextSet" /><input type="button" value="获取文本框值" id="btnTextGet" />
<br /><br />
span标签：<span id="spanId"></span><input type="button" value="给span标签赋值" id="btnSpanSet" /><input type="button" value="获取span标签内容" id="btnSpanGet" />
<br /><br />
下拉框：
<select id="ddlBook"> <option value="1">语文</option> <option value="2">数学</option> <option value="3">英语</option> <option value="4">政治</option> </select> <input type="button" value="获取下拉框选中的值" id="btnSelectText" /><input type="button" value="获取下拉框选中的value" id="btnSelectValue" /> <input type="button" value="清空下拉框" id="btnClearSelect" /><input type="button" value="后面追加选项" id="btnSelectAppend" /> <input type="button" value="第一个位置插入" id="btnSelectPreAppend" /> <br /><br />
radio控件：
是<input type="radio" value="1" checked="checked" name="IsEnable" /> 否<input type="radio" value="0" name="IsEnable" /> <input type="button" value="获取Radio选中的值" id="btnRadioValue" /><input type="button" value="选中Value为0的选项" id="btnRadioSet" /> <br /><br />
复选框：
<input type="button" id="btn1" value="全选"/> <input type="button" id="btn2" value="取消全选"/> <input type="button" id="btn3" value="选中所有奇数"/> <input type="button" id="btn4" value="反选"/> <input type="button" id="btn5" value="获得选中的所有值"/> <br> <input type="checkbox" name="checkbox" value="checkbox1" />checkbox1 <input type="checkbox" name="checkbox" value="checkbox2" />checkbox2 <input type="checkbox" name="checkbox" value="checkbox3" />checkbox3 <input type="checkbox" name="checkbox" value="checkbox4" />checkbox4 <input type="checkbox" name="checkbox" value="checkbox5" />checkbox5 <input type="checkbox" name="checkbox" value="checkbox6" />checkbox6 <input type="checkbox" name="checkbox" value="checkbox7" />checkbox7 <input type="checkbox" name="checkbox" value="checkbox8" />checkbox8 <br /><br />
按钮：
<input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/> <br /><br /> </body> </html>
关于jquery html控件基本操作相关知识就给大家介绍这么多，希望对大家有所帮助！
相关推荐
-
jquery下操作HTML控件的实现代码
操作下拉框[Select] 1. $("#seelctId").append("<option value='"+optionval+"'>"+text+"</option>");//给下拉框增加 一下option选项 (ddlSayTo这是下拉框的ID) $("#seelctId").val(optionval);//选中刚才增加的option 2. $("#seelct
-
jQuery阻止冒泡和HTML默认操作
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包含的关系. 事件:现在我们都在这两个元素上绑定相同的事件,比如click事件. 结果:这时,当我们点击内层的P标签的时候
-
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
-.获取dropdownlist的text(ddlList为服务器端dropdownlist的ID,生成name属性等于ddlList的select标签) $("#ddlList option:selected").text() 二.获取dropdownlist的value(ddlList为服务器端dropdownlist的ID,生成name属性等于ddlList的select标签) $("#ddlList").val() 三.获取radiobuttonlist的t
-
jquery操作HTML5 的data-*的用法实例分享
阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. jquery 里已经内置这个方法. 通过 $('#content').data('list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性. <!DOCTYPE HTML> <html> <
-
jQuery Html控件基本操作(日常收集整理)
闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q
-
日常收集整理的Git常用命令
Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. 查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id git co -- <file> # 抛弃工作区修改 git co . # 抛弃工作区修改 git add <file> # 将工作文件修改提交到本地暂存区 git add
-
ANGULARJS中使用JQUERY分页控件
首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控
-
正则表达式日常收集整理(简单且实用)
正则表达式,又称正规表示法.常规表示法.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 正则表达式的功能非常的强大,废话不多说了,直接给大家分享整理的内容了. 一:基本匹配符: \d 匹配数字 eg:'5\d0'------->'580' \w 匹配字母或数字 eg:'\d\w\w'-----
-
日常收集整理php正则表达式(超常用)
以下是关于小编给大家日常收集整理php正则表达式,具体内容请看下文详解吧 $str = preg_replace("/(<a.*?>)(.*?)(<\/a>)/", '\1<span>\2</span>\3', $str); 其中用了三个子模式(每个圆括号中内容为一个子模式),第一个是链接开始标签,第二个是链接文本,第三个是</a> 然后第二个参数中\1.\2.\3就表示这三个部分,要替换成什么样子还不简单? 获取页面中的所有
-
JavaScript 经典实例日常收集整理(常用经典)
本文是小编日常收集整理些js经典实例,特此分享到我们平台供大家参考! 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除事件 function remove
-
设置jquery UI 控件的大小方法
如下所示: #ui-datepicker-div { font-size: 12px; } 以上这篇设置jquery UI 控件的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
自己动手写的jquery分页控件(非常简单实用)
最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo
-
日常收集整理SqlServer数据库优化经验和注意事项
网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 优化数据库的注意事项: 1.关键字段建立索引. 2.使用存储过程,它使SQL变得更加灵活和高效. 3.备份数据库和清除垃圾数据. 4.SQL语句语法的优化.(可以用Sybase的SQL Expert,可惜我没找到unexpired的序列号) 5.清理删除日志. SQL语句优化的基本原则: 1.使用索引来更快地遍历表. 缺省情况下建立的索引是非群集索引,但有时它并不是最
-
Jquery获得控件值的三种方法总结
一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu