第五章 jQuery对表单表格的操作及更多应用
1 获取和失去焦点改变样式
input:focus,textarea:focus{
border:1px solid #f00;
background:#fcc;
}
jQuery代码如下:
$(function(){
$(":input").focus(function(){
$(this).addClass(“focus”);
}).blur(function(){
$(this).addClass(“focus”);
});
});
2 多行文本应用
1)放大、缩小
缓冲效果:
$comment.animent({height:"+=50"},400);
2)滚动条高度变化
var
c
o
m
m
e
n
t
=
comment=
comment=(’#comment’);
$comment.animate({scrollTop:"-=50"},400);
$comment.animate({scrollTop:"+=50"},400);
3)复选款应用
$(’[name=items]:checkbox’).attr(‘checked’,true);
反选或全选
$(’[name=items]:checkbox’).each(function(){
this.checked=!this.checked
});
$("#CheckedAll").click(function(){
$(’[name=items]:checkbox’).attr(“checked”,this.checked);
});
如果所有复选框都选中了,则选中全选框
var
t
m
p
=
tmp=
tmp=(’[name=items]:checkbox’);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲CheckedAll').at…tmp.length==$tmp.filter(’:checked’).length);
3 下拉框应用
1)将选中的选项添加给对方
$("#add").click(function(){
var
o
p
t
i
o
n
s
=
options=
options=(’#select1 option:selected’);
var
r
e
m
o
v
e
=
remove=
remove=options.remove();
$remove.appendTo(’#select2’);
});
简化写法:
$("#add").click(function(){
var
o
p
t
i
o
n
s
=
options=
options=(‘#select1 option:selected’);//获取选中的对象
$options.appendTo(’#select2’);//追加给对方
});
2)将全部选项添加给对方
$("#add_all").click(function(){
var $options = $(’#select1 option’);//获取全部的选项
$options.appendTo(’#selected’);//追加给对方
});
3)双击某个选项将其添加给对方
KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ var options=(“option:selected”,this);
$options.appendTo(’#select2’);
});
4 表单验证
1)在必填框后添加*
避免重复添加校验信息:
根据class为onError元素的长度来判断是否可以提交
5 表格隔行变色
上述代码会将表头算进去,排除表头的写法
6 表格高亮
1)将其中某行高亮
$(“tr:contains(‘王五’)”).addClass(“selected”);
2)单击某行时将其高亮,并去掉其他行的高亮
$(‘tbody>tr’).click(function(){
KaTeX parse error: Expected 'EOF', got '}' at position 110: …cked','true'); }̲); end()方法解释:当前…(this),当进行addClass(‘selected’)操作时,对象并未发生变化,当执行siblings().removeClass(‘selected’)时,对象已经变为
(
t
h
i
s
)
.
s
i
b
l
i
n
g
s
(
)
,
因
此
后
面
的
操
作
都
是
针
对
这
个
对
象
的
,
如
果
要
重
新
返
回
到
(this).siblings(),因此后面的操作都是针对这个对象的,如果要重新返回到
(this).siblings(),因此后面的操作都是针对这个对象的,如果要重新返回到(this),则可以使用end方法
7 复选框控制表格行高亮
刚进入页面时,处理选中的表格行
$(‘tbody>tr:has(checked)’).addClass(‘selected’);
8 表格展开关闭
点击展开或关闭
9 表格内容筛选
$(“tr:contains(‘王五’)”).addClass(“selected”);//匹配包含指定文字的元素
$(function(){
$(“table tbody tr”).hide().filter(":contains(李)").show();
});
通过输入框来显示表格中的内容
$(function(){
$(“filterName”).keyup(function(){
(
"
t
a
b
l
e
t
b
o
d
y
t
r
"
)
.
h
i
d
e
(
"
:
c
o
n
t
a
i
n
s
(
"
+
("table tbody tr").hide(":contains("+
("tabletbodytr").hide(":contains("+(this).val()+")").filter().show();
}).keyup();
});
10 其他应用
1)网页选项卡
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li class="selected">体育</li>
<li class="selected">娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
2)控制
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
//高亮当前元素,去掉其他同辈元素的高亮
$(this).addClass("selected").siblings().removeClass("selected");
var index = $div_li.index(this);//获取当前单击的<li>元素在全部的<li>元素中的索引
$("div.tab_box > div") //选取子节点
.eq(index).show() //显示<li>元素对应的<div>元素
.siblings().hide(); //隐藏同辈元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});