首页
所有分类
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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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
SeaTable(1) Three.js(1) tree shaking(1) Mysql8(2) HBuilder(1) 条形码(1) Outlook(1) MutationObserver(1) OOP(1) celery(1)
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP实现简单日历类编写
2020/08/28 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Django URL传递参数的方法总结
2016/08/28 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
伦敦高级内衣品牌：Agent Provocateur（大内密探）
2016/08/23 全球购物
澳大利亚领先的皮肤诊所：Skin Matrix（抗衰老、痤疮专家、药妆护肤）
2018/05/20 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
七匹狼男装广告词
2014/03/21 职场文书
五水共治一句话承诺
2014/05/30 职场文书
科学育儿宣传标语
2014/10/08 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python