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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
js实现选项卡效果
Mar 07 Javascript
vue实现简单瀑布流布局
May 28 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
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
js 窗口抖动示例
2013/09/04 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python制作图片缩略图
2019/04/30 Python
在python中修改.properties文件的操作
2020/04/08 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
中学生校园广播稿
2014/01/16 职场文书
高中军训感言400字
2014/02/24 职场文书
付款委托书范本
2014/04/04 职场文书
股份合作协议书
2014/04/12 职场文书
中文专业自荐书
2014/06/29 职场文书
责任书范本大全
2015/05/11 职场文书
行政申诉状范文
2015/05/20 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python