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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery Html控件基本操作(日常收集整理)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10468字，纯文字阅读大概需要15分钟。

内容图文

闲来无聊，收集总结一下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控件基本操作(日常收集整理)全部内容，希望文章能够帮你解决jQuery Html控件基本操作(日常收集整理)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/353502.html

来源：【匿名】

【上一篇】基于jQuery日历插件制作日历【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery Html控件基本操作(日常收集整理)】教程文章相关的互联网学习教程文章

JavaWeb20.2【JQuery基础：jq基本操作、基本选择器、层次选择器】【代码】【图】

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>04-jq事件绑定、入口函数、样式控制</title> 6<script src="js/jquery-3.3.1.min.js"></script> 7<script> 8/*window.onload = function () { //js入口函数9 $("#b1").click(function () { 10 alert("hello jquery"); 11 }); 12 };*/1314/*$(function () { //jq入口函数(dom文档加载完成之后执行该函数中...

jQuery表格Table基本操作详解【图】

本文主要介绍了jQuery表格(Table)基本操作,结合实例形式分析了jQuery针对表格常见的样式、属性及增删行等相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table：table {border-collapse: collapse;border-spacing: 0;margin-right: auto;margin-left: auto;width: 800px;}th, td{border: 1px solid #b5...

JqueryTable的基本操作【图】

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table：table {border-collapse: collapse;border-spacing: 0;margin-right: auto;margin-left: auto;width: 800px;}th, td{border: 1px solid #b5d6e6;font-size: 12px;font-weight: normal;text-align: center;vertical-align: middle;height: 20px;}th{background-color: Gray;}<table><tr><th style="width...

Jquery表单取值赋值的一些基本操作_jquery

具有限定子节点选择器:$("mix1[mix2]"):返回包含mix2的mix1节点.如:$("div[a]"):包含a标签的div. 这个和$("div a")不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象冒号限定结点选择器:$("mix:condition"):mix标签,并且满足限定条件. E:root:类型为E,并且是文档的根元素 E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始 E:first-child:是其父元素的第1个类型为E的子元素 E:last-child:是其...

jQueryHtml控件基本操作(日常收集整理)_jquery

闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。基于jquery 1.3.2 1.文本框//文本框 $("#btnTextGet").click(function(){ alert($("#txtNum").val()); }); $("#btnTextSet").click(function(){ $("#txtNum").attr("value",'123456');//赋值 //$("#txtNum").val("123456");//赋值 });html代码：文本框：2.Span//span $("#btnSpanSet").click(function(){ $("#spanId").html("大家好"); }); $("#btnSpanGet").click(funct...

jquery中对表单的基本操作代码_jquery【图】

代码如下: JavaScript教程/参考手册 JavaScript热搜 Vue利用canvas实现移动端手写板的方法vue2.0 移动端实现下拉刷新和上拉加载更多的示例解决vue-router中的query动态传参问题解决使用vue.js路由后失效的问题微信小程序实现换肤功能JS中touchstart事件与click事件冲突的解决方法完美解决axios在ie下的兼容性问题在vue项目中引入highcharts图表的方法(详解)Vue的轮播图组件实现方法angular基于ng-alain定义自己...

jQuery中实现动画效果的基本操作介绍_jquery

动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换都可以传入参数，speed.fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度滑动显示 slideDown()： slideUp(): slideToggle(): 都可以传入一个speed参数。$(:animated);获取正在执行动画的元素。将正在执行动画的元素停止： $(:animated).stop():停止当前的动画。 stop(true)表示清除队列中的所有的动画，即...

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍_jquery【图】

初识Jquery EasyUI看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1、列表展示2、新增页面3、修改页面把jquery easyui下载好之后，一般引...

jQuery中Dom的基本操作小结_jquery【图】

jquery中各个节点的基本操作代码如下: jquery中的Dom操作你最喜欢的水果是？苹果香蕉西瓜你最喜欢的水果是？你最喜欢的水果是？ $(function(){ $("#btnFind").click(function(){ //查找元素节点 var getValue= $("ul li:eq(1)").text();//获取第二个元素的值 alert(getValue); //查找属性节点 attr()方法的参数可以是一个，也可以是两...

JQuery对表单元素的基本操作使用总结_jquery

select下拉列表onChange事件之JQuery实现： JQuery：$(document).ready(function () { $("#selectMenu").bind("change", function () { if ($(this).val() == "pro1") { $("#pro1").slideDown(); $("#pro2").slideUp(); } else if($(this).val() =="pro2") { $("#pro2").slideDown(); $("#pro1").slideUp(); } }); });HTML: Please select product below Product 1 Product 2 //1.jQuery对select的基本操作 $("#sele...

轻松学习jQuery插件EasyUIEasyUI实现树形网络基本操作（2）_jquery【图】

一、EasyUI树形网格动态加载动态加载树形网格有助于从服务器上加载部分的行数据，避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格（TreeGrid）。创建树形网格（TreeGrid）NameQuantityPriceTotal服务器端代码 treegrid3_getdata.php$id = isset($_POST[id]) ? intval($_POST[id]) : 0;include conn.php; $result = array(); $rs = mysql_query("select * from products where parentId=$id");...

轻松学习jQuery插件EasyUIEasyUI实现拖动基本操作_jquery【图】

本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。首先，我们创建三个元素：对于第一个>div<元素，我们通过默认值让其可以拖动。 $(#dd1).draggable(); 对于第二个元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。$('#dd2').draggable({proxy:'clone' });对于第三个元素，我们通过创建自定义代理（proxy）让其可以拖动。$('#dd3').draggable({...

jQuery表格(Table)基本操作实例分析【图】

本文实例讲述了jQuery表格(Table)基本操作。分享给大家供大家参考，具体如下： Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table： table {border-collapse: collapse;border-spacing: 0;margin-right: auto;margin-left: auto;width: 800px;}th, td{border: 1px solid #b5d6e6;font-size: 12px;font-weight: normal;text-align: center;vertical-align:...

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

闲来无聊，收集总结一下jQuery常用操作，希望对新手有用。基于jquery 1.3.2   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 1.文本框 //文本框 $("...

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作【图】

本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。首先，我们创建三个<div> 元素：<div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class="dd-demo"></div>对于第一个>div<元素，我们通过默认值让其可以拖动。 $(#dd1).draggable(); 对于第二个 <div> 元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。$...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery Html控件基本操作(日常收集整理)】教程文章相关的互联网学习教程文章

JavaWeb20.2【JQuery基础：jq基本操作、基本选择器、层次选择器】【代码】【图】

jQuery表格Table基本操作详解【图】

JqueryTable的基本操作【图】

Jquery表单取值赋值的一些基本操作_jquery

jQueryHtml控件基本操作(日常收集整理)_jquery

jquery中对表单的基本操作代码_jquery【图】

jQuery中实现动画效果的基本操作介绍_jquery

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍_jquery【图】

jQuery中Dom的基本操作小结_jquery【图】

JQuery对表单元素的基本操作使用总结_jquery

轻松学习jQuery插件EasyUIEasyUI实现树形网络基本操作（2）_jquery【图】

轻松学习jQuery插件EasyUIEasyUI实现拖动基本操作_jquery【图】

jQuery表格(Table)基本操作实例分析【图】

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

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作【图】

JQUERY - 相关标签

HTML - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程