jQuery对html元素的取值与赋值实例详解


Posted in Javascript onDecember 18, 2015

本文实例讲述了jQuery对html元素的取值与赋值方法。分享给大家供大家参考,具体如下:

Jquery给基本控件的取值、赋值

TEXTBOX:

var str = $('#txt').val();
$('#txt').val("Set Lbl Value"); 
//文本框,文本区域:
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');// 填充内容

LABLE:  

var str = $('#lbl').text();
$('#lbl').text("Set Lbl Value");
var valradio = $("input[@type=radio][@checked]").val();
var item = $('input[@name=items][@checked]').val();
var checkboxval = $("#checkbox_id").attr("value");
var selectval = $('#select_id').val();

多选框checkbox:

$("#chk_id").attr("checked",'');//使其未勾选
$("#chk_id").attr("checked",true);// 勾选
if($("#chk_id").attr('checked')==true) //判断是否已经选中

单选组radio:

$("input[@type=radio]").attr("checked",'2'); //设置value=2的项目为当前选中项

下拉框select:

$("#select_id").attr("value",'test');// 设置value=test的项目为当前选中项
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的 option
$("#select_id").empty();//清空下拉框

获取一组名为 (items)的radio被选中项的值

var item = $('input[@name=items][@checked]').val();//若未被选中 则val() = undefined

获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$('input[@name=items]').get(1).checked = true;

重置表单:

$("form").each(function(){
  .reset();
});

补充:

jQuery对form表单元素的取值与赋值:

1. 选取元素

$("#myid")效果等于document.getElementById("myid"), 但是写的字符要少好多啊.

如果需要将jQuery对象转换成html元素, 则只需要取其第0个元素即可. 例如$("#myid")返回的是jQuery对象, 而$("#myid")[0]返回的就是html元素

如果选择所有的img元素, 那么这么写: $("img")

如果选择带有class="TextBox"的div元素(<div class="TextBox"></div>), 那么这么写: $("div.TextBox")

选择带有myattr属性的元素$("div[myattr]")
选择带有myattr属性, 并且属性值等于myclass的元素$("div[myattr='myclass']")
属性不等于[myattr!='myclass']
属性以my开头[myattr^='my']
属性以class结尾[myattr$='class']
属性包含cla这三个字符[myattr*='cla']

如果一个选择会返回多个元素, 并且希望每返回一个元素, 就把某些属性应用到该元素上, 可以这么写

$("div").each(function()
{
$(this).css("background-color", "#F00″);
alert($(this).html());
$(this).width("200px");
});

2.事件

给页面加onload事件处理方法

$(function()
{
alert("页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)");
});

可以给页面绑定多个onload事件处理方法

$(function()
{
alert("我首先被执行");
});
$(function()
{
alert("我第二被执行");
});

绑定特殊事件

$("#myid").keydown(function()
{
alert("触发了keydown事件");
});

除了这些常用的, 不常用的事件需要通过bind方法绑定

3. 元素属性/方法

得到一个元素的高度, $("#myid").height()
得到一个元素的位置, $("#myid").offset() 返回的是一个offset对象, 如果取元素位置的top, 则$("#myid").offset().top,?取left则$("#myid").offset().left
得到一个元素的innerHTML, $("#myid").html()
得到一个元素的innerText, $("#myid").text()
得到一个文本框的值, $("#myid").val()
得到一个元素的属性, $("#myid").attr("myattribute")

以上这些方法有个基本特征, 就是不带参数表示取值, 带有参数表示设定值(除了offset), 例如

$("#myid").height("20″);
$("#myid").html("<a href=">asdasd</a>")
$("#myid").val("asdasd")

需要注意, offset是只读的.

给一个元素设置属性

$("#myid").attr("width", "20%")

读取一个属性
$("#myid").attr("width")

一次指定多个属性
$("#myid").attr({disabled: "disabled", width:"20%", height: "30″})

删除属性
$("#myid").removeAttr("disabled")

应用样式
$("#myid").addClass("myclass")

删除样式
$("#myid").removeClass("myclass")

加一个样式
$("#myid").css("height", "20px")

加一组样式
$("#myid").css({height:"20px", width:"100px"})

需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style="background-color:#FF0000″, 对应的jQuery写法是
$("#myid").css("background-color", "#FF0000″)

但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如: myid.style.backgroundColor = "#FF0000″, 对应的jQuery写法是
$("#myid").css({backgroundColor:"#FF0000″})

4. 根据关系查找元素

找和自己同级的下一个元素

$("#myid").next()

找和自己同级的所有位于自己之下的元素
$("#myid").nextAll()

找和自己同级的上一个元素
$("#myid").prev()

找和自己同级的所有位于自己之上的所有元素
$("#myid").prevAll()

找自己的第一代子元素
$("#myid").children()

找自己的第一个父元素
$("#myid").parent()

找自己的所有父元素
$("#myid").parents()

例子:

$("div.l4″).parents().each(
function() {
alert($(this).html());
});

会把class=l4的div的所有父元素都得到, 并且alert出他们的html

例子:

$("div.l4″).parents("div.l2″).each(function() { alert($(this).html()); });

会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2

这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分

5. 维护元素

在body中增加一个元素

$("body").append("<input type='text' value='asd' />")

该语句会把这段html插入到body结束标签之前, 结果是<input type='text' value='asd' /></body>
$("body").prepend("<input type='text' value='asd' />")

该语句会把这段html插入到body开始标签之后, 结果是<body><input type='text' value='asd' />

6.AJAX

用get方法请求一个页面

$.get("http://www.google.com", "q=jquery", function(data, status){alert(data)})

表示请求http://www.google.com, 参数是q, 参数的值是jquery, 请求结束后(不管成功还是失败)执行后面的function, 该function有两个固定参数, data和status, data是返回的数据, status是本次请求的状态

用post方法请求一个页面
$.post(……..) 参数同get方法

7.其他方法

$.trim(str) 将str前后空格去掉
$.browser 返回当前用户浏览器的类型
$.browser.version返回当前浏览器的版本

8. 插件

jQuery支持插件, http://jquery.com/plugins/上面有很多现成的插件, 也可以自己写
自己写插件, 请参考http://docs.jquery.com/Core/jQ.....end#object 和http://docs.jquery.com/Core/jQuery.extend#object

1. 下拉框:

var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:

select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2. 单选框:

$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3. 复选框:

$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
 alert($(this).val());
});
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
js有关元素内容操作小结
Dec 20 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 #Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
js获取url传值的方法
Dec 18 #Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 #Javascript
jquery获取css的color值返回RGB的方法
Dec 18 #Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 #Javascript
You might like
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
Javascript 继承实现例子
2009/08/12 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python单元测试unittest实例详解
2015/05/11 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python 处理数据的实例详解
2017/08/10 Python
Python实现随机漫步功能
2018/07/09 Python
python增加图像对比度的方法
2019/07/12 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
运动会稿件300字
2014/02/14 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
班主任经验交流材料
2014/12/16 职场文书
司机岗位职责
2015/02/04 职场文书
实习介绍信范文
2015/05/05 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技