首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery Html控件基本操作(日常收集整理)

Posted in Javascript onMarch 11, 2016

闲来无聊，收集总结一下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控件基本操作(日常收集整理)

- Author -

jerrylsxu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
javascript中的this详解
Dec 08 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JS数组去重（4种方法）
Mar 27 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 #Javascript
JavaScript高级程序设计（第三版）学习笔记6、7章
Mar 11 #Javascript
JavaScript高级程序设计（第三版）学习笔记1~5章
Mar 11 #Javascript
Angularjs中使用Filters详解
Mar 11 #Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 #Javascript
JavaScript制作简单的日历效果
Mar 10 #Javascript
js滑动提示效果代码分享
Mar 10 #Javascript
间隙锁(2) 事务并发(1) MVCC(4) ctypes(1) 经纬度(1) C/C++(1) 复读(1) dll(1) innoDB(3) 幻读(5)
You might like
实用函数2
2007/11/08 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
js实现表格数据搜索
2020/08/09 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
pygame学习笔记（4）：声音控制
2015/04/15 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python使用Tesseract库识别验证
2018/03/21 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python实现弹窗祝福效果
2019/04/07 Python
Python向excel中写入数据的方法
2019/05/05 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python 创建守护进程的示例
2020/09/29 Python
美国高档百货Nordstrom的折扣店：Nordstrom Rack
2017/11/13 全球购物
Hunkemöller西班牙：欧洲最大的内衣连锁店
2018/08/15 全球购物
外贸业务员工作职责
2014/01/06 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
大学生村官个人对照检查材料（群众路线）
2014/09/26 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书