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

站长资源 2024/12/1 佚名

2 0 1

闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。

基于jquery 1.3.2

<!--<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.3.2.js">



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="/UploadFiles/2021-04-02/jquery-1.3.2.js">

下拉框：


<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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月01日

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

基于jQuery日历插件制作日历

JavaScript获取客户端IP的方法(新方法)

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接