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程序设计有所帮助。
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
