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

妖狐艹你老母 2022-08-07 03:56 108阅读 0赞

# [        Jquery表单取值赋值的一些基本操作        ][Jquery_] #

分类：            [js][][jquery][] 2011-12-19 10:541130人阅读[评论][Link 1](0)收藏[举报][Link 2]

[jquery][jquery 1] [function][] [input][] [textbox][] [class][] [html][]

var textval = $("\#text\_id").attr("value");

//或者  
    var textval = $("\#text\_id").val();  
    var valradio = $("input\[@type=radio\]\[@checked\]").val();  
    var item = $('input\[@name=items\]\[@checked\]').val();  
    varcheckboxval = $("\#checkbox\_id").attr("value")；  
    var selectval = $('\#select\_id').val();  
  
//文本框，文本区域：  
$("\#text\_id").attr("value",'');//清空内容  
$("\#text\_id").attr("value",'test');//填充内容

//多选框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的项目为当前选中项  
$("<optionvalue='test'>test</option><optionvalue='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();  
       \});

1. 选取元素  
$(”\#myid”)效果等于document.getElementByIdx\_x(”myid”), 但是写的字符要少好多啊.

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

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

如果选择带有class=”TextBox”的div元素(<divclass=”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(”<ahref=”>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><inputtype=’text’ value=’asd’ />

6.AJAX  
用get方法请求一个页面  
$.get(”http://www.google.com”, “q=jquery”, function(data,status)\{alert(data)\})  
表示请求[http://www.google.com][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_jquery.com_plugins]上面有很多现成的插件,也可以自己写  
自己写插件, 请参考[http://docs.jquery.com/Core/jQ.....end\#object][http_docs.jquery.com_Core_jQ.....end_object]和[http://docs.jquery.com/Core/jQuery.extend\#object][http_docs.jquery.com_Core_jQuery.extend_object]

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

稍微解释一下:  
1.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_]: http://blog.csdn.net/cheung1021/article/details/7083358
[js]: http://blog.csdn.net/Cheung1021/article/category/815934
[jquery]: http://blog.csdn.net/Cheung1021/article/category/869703
[Link 1]: http://blog.csdn.net/cheung1021/article/details/7083358#comments
[Link 2]: http://blog.csdn.net/cheung1021/article/details/7083358#report
[jquery 1]: http://www.csdn.net/tag/jquery
[function]: http://www.csdn.net/tag/function
[input]: http://www.csdn.net/tag/input
[textbox]: http://www.csdn.net/tag/textbox
[class]: http://www.csdn.net/tag/class
[html]: http://www.csdn.net/tag/html
[http_www.google.com]: http://www.google.com/
[http_jquery.com_plugins]: http://jquery.com/plugins/
[http_docs.jquery.com_Core_jQ.....end_object]: http://docs.jquery.com/Core/jQ.....end#object
[http_docs.jquery.com_Core_jQuery.extend_object]: http://docs.jquery.com/Core/jQuery.extend#object