锋利的jQuery读书笔记(五)

第五章 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 $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 $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 $options=$(’#select1 option:selected’);
var $remove=$options.remove();
$remove.appendTo(’#select2’);
});
简化写法：
$("#add").click(function(){
var $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’)时，对象已经变为 $(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(){
$("table tbody tr").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");
});