jQuery对html元素的取值与赋值实例详解
jQuery对html元素的取值与赋值实例详解
转载 2015-12-18 作者:欢欢 我要评论
本文实例讲述了jQuery对html元素的取值与赋值方法。分享给大家供大家参考,具体如下:
Jquery给基本控件的取值、赋值
TEXTBOX:
1
2
3
4
5
|
var str = $( '#txt' ).val(); $( '#txt' ).val( "Set Lbl Value" ); //文本框,文本区域: $( "#text_id" ).attr( "value" , '' ); //清空内容 $( "#text_id" ).attr( "value" , 'test' ); // 填充内容 |
LABLE:
1
2
3
4
5
6
|
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:
1
2
3
|
$( "#chk_id" ).attr( "checked" , '' ); //使其未勾选 $( "#chk_id" ).attr( "checked" , true ); // 勾选 if ($( "#chk_id" ).attr( 'checked' )== true ) //判断是否已经选中 |
单选组radio:
下拉框select:
1
2
3
|
$( "#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被选中项的值
获取select被选中项的文本
1
2
3
|
var item = $( "select[@name=items] option[@selected]" ).text(); select下拉框的第二个元素为当前选中值 $( '#select_id' )[0].selectedIndex = 1; |
radio单选组的第二个元素为当前选中值
重置表单:
1
2
3
|
$( "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']
如果一个选择会返回多个元素, 并且希望每返回一个元素, 就把某些属性应用到该元素上, 可以这么写
1
2
3
4
5
6
|
$( "div" ).each( function () { $( this ).css( "background-color" , "#F00″); alert($(this).html()); $(this).width(" 200px"); }); |
2.事件
给页面加onload事件处理方法
1
2
3
4
|
$( function () { alert( "页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)" ); }); |
可以给页面绑定多个onload事件处理方法
1
2
3
4
5
6
7
8
|
$( function () { alert( "我首先被执行" ); }); $( function () { alert( "我第二被执行" ); }); |
绑定特殊事件
1
2
3
4
|
$( "#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), 例如
1
2
3
|
$( "#myid" ).height( "20″); $(" #myid").html("<a href=">asdasd</a>") $( "#myid" ).val( "asdasd" ) |
需要注意, offset是只读的.
给一个元素设置属性
读取一个属性
一次指定多个属性
删除属性
应用样式
删除样式
加一个样式
加一组样式
需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style="background-color:#FF0000″, 对应的jQuery写法是
但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如: myid.style.backgroundColor = "#FF0000″, 对应的jQuery写法是
4. 根据关系查找元素
找和自己同级的下一个元素
找和自己同级的所有位于自己之下的元素
找和自己同级的上一个元素
找和自己同级的所有位于自己之上的所有元素
找自己的第一代子元素
找自己的第一个父元素
找自己的所有父元素
例子:
1
2
3
4
|
$("div.l4″).parents().each( function () { alert($( this ).html()); }); |
会把class=l4的div的所有父元素都得到, 并且alert出他们的html
例子:
会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2
这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分
5. 维护元素
在body中增加一个元素
该语句会把这段html插入到body结束标签之前, 结果是<input type='text' value='asd' /></body>
该语句会把这段html插入到body开始标签之后, 结果是<body><input type='text' value='asd' />
6.AJAX
用get方法请求一个页面
表示请求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. 下拉框:
1
2
3
4
5
|
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. 单选框:
1
2
|
$( "input[@type=radio][@checked]" ).val(); //得到单选框的选中项的值(注意中间没有空格) $( "input[@type=radio][@value=2]" ).attr( "checked" , 'checked' ); //设置单选框value=2的为选中状态.(注意中间没有空格) |
3. 复选框:
1
2
3
4
5
6
7
|
$( "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程序设计有所帮助。
您可能感兴趣的文章:
- jquery select(列表)的操作(取值/赋值)
- Jquery 表单取值赋值的一些基本操作
- jquery select(列表)的操作(取值/赋值)
- jQuery对表单元素的取值和赋值操作代码
- Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
- Jquery操作下拉框(DropDownList)实现取值赋值
- Jquery中val()表单取值赋值的实例代码
- jQuery对html元素取值与赋值的方法
- jQuery中的RadioButton,input,CheckBox取值赋值实现代码
- jQuery 取值、赋值的基本方法整理
- Jquery给基本控件的取值、赋值示例
- jQuery给div,Span, a ,button, radio 赋值与取值
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
- 这篇文章主要介绍了如何使用jQuery异步加载JavaScript脚本,需要的朋友可以参考下
2014-04-04
jquery attr方法获取input的checked属性问题
如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,需要的朋友可以参考下2014-05-05
jquery配合.NET实现点击指定绑定数据并且能够一键下载
本篇文章主要介绍了jquery配合.NET实现点击指定绑定数据并且能够一键下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2016-10-10
- jquery模拟雅虎首页的点击对话框效果实现代码,喜欢的朋友可以参考下。
2010-04-04
利用jQuery+localStorage实现一个简易的计时器示例代码
这篇文章主要给大家介绍了关于利用jQuery+localStorage实现一个简易的计时器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。2017-12-12
- 本文主要分享了jQuery实现对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
2017-01-01
- 下面小编就为大家带来一篇jquery设置表单元素为不可用的简单代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
- 分享一个背景云变换js特效随着鼠标的移动,背景云会不断的变化位置和形状,感兴趣的朋友可以研究下
2012-12-12
- 这篇文章主要介绍了jquery实现很酷的网页顶部图标下拉菜单效果,效果非常美观大方,通过鼠标hover事件及页面元素的遍历与样式操作实现该功能,需要的朋友可以参考下
2015-08-08
- 下面小编就为大家带来一篇jQ处理xml文件和xml字符串的方法(详解)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
2016-11-11
最新评论
jQuery对html元素的取值与赋值实例详解的更多相关文章
- jQuery对表单元素的取值和赋值操作代码
使用常规的思路:$(“#keyword”).value 取值是取不到的,因为此时$(‘#keydord’)已经不是个element,而是个jquery对象,所以应该使用:$(“#keyword”).v ...
- jQuery对表单元素的取值和赋值操作代码(转)
使用常规的思路:$("#keyword").value 取值是取不到的,因为此时$('#keydord')已经不是个element,而是个jquery对象,所以应该使用:$(&qu ...
- (转)jquery对表单元素的取值和赋值
/*获得text的值*/ var textval =$("#text_id").attr("value"); //或者 var textval =$(" ...
- 浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- Jquery给网页的title取值和赋值
//获取title的值 var title_val=$('#id').attr('title'); alert(title_val); //修改title的值.赋值给title $('#id2').a ...
- 常用html元素的取值和赋值方法总结
1.获得type类型为TEXT或者AREATEXT的值 var textval = $("#text_id").attr("value"); var textv ...
- jquery关于select框的取值和赋值
jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发 var checkValue ...
- JQuery select与radio的取值与赋值
radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...
随机推荐
- IO流2 --- File类的常用方法1 --- 技术搬运工(尚硅谷)
File类的获取功能 @Test public void test2(){ File file1 = new File("hello.txt"); File file2 = new ...
- 洛谷P1456Monkey King
洛谷P1456 Monkey King 题目描述 Once in a forest, there lived N aggressive monkeys. At the beginning, they ...
- 洛谷P1003 [NOIP2011提高组Day1T1]铺地毯
P1003 铺地毯 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号 ...
- SpringCloud 融入 Python - Tornado
前言 该篇文章分享如何将Python Web服务融入到Spring Cloud微服务体系中,并调用其服务,Python Web框架用的是Tornado 构建Python web服务 引入py-eure ...
- BZOJ1076奖励关题解
链接 很容易想到状压,f[i][s]表示前i个选择的箱子集合为s的最大期望 果断wa了,因为有一些不合法的状态,譬如f[1][1111001]这样的状态 这样的状态不好排除,所以改用倒推 用f[i][ ...
- Leetcode905.Sort Array By Parity按奇偶排序数组
给定一个非负整数数组 A,返回一个由 A 的所有偶数元素组成的数组,后面跟 A 的所有奇数元素. 你可以返回满足此条件的任何数组作为答案. 示例: 输入:[3,1,2,4] 输出:[2,4,3,1] ...
- 新一代互联网传输协议QUIC浅析
QUIC(Quick UDP Internet Connection)是谷歌制定的一种互联网传输层协议,它基于UDP传输层协议,同时兼具TCP.TLS.HTTP/2等协议的可靠性与安全性,可以有效减少 ...
- LintCode_420 报数
题目 报数指的是,按照其中的整数的顺序进行报数,然后得到下一个数.如下所示: 1, 11, 21, 1211, 111221, ... 1 读作 "one 1" -> 11. ...
- 【转】MySQL的btree索引和hash索引的区别
Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...
- 【JZOJ4770】【NOIP2016提高A组模拟9.9】闭门造车
题目描述 自从htn体验了一把飙车的快感,他就下定决心要闭门造车!但是他两手空空怎么造得出车来呢?无奈的他只好来到了汽车零部件商店. 一走进商店,玲琅满目的各式零件看得htn眼花缭乱.但是他很快便反应 ...