锋利的jQuery读书笔记(五)

Love The Way You Lie 2022-02-26 04:36 416阅读 0赞

第五章 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)放大、缩小  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70]  
缓冲效果：  
$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 下拉框应用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 1]  
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)在必填框后添加\*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 3]  
避免重复添加校验信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 4]  
根据class为onError元素的长度来判断是否可以提交  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 5]  
5 表格隔行变色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 6]  
上述代码会将表头算进去，排除表头的写法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 7]  
6 表格高亮  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 8]  
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 复选框控制表格行高亮  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 10]  
刚进入页面时，处理选中的表格行  
$(‘tbody>tr:has(checked)’).addClass(‘selected’);

8 表格展开关闭  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 11]  
点击展开或关闭  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 12]  
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）网页选项卡

2）控制

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70]: /images/20220226/837980c9a2664e7aab3c4aea2da99b51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 1]: /images/20220226/f2b3db8297564994aa06d6cd0bc4a2ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 2]: /images/20220226/ea8e9649172c46b9ad6510fe72bf9f5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 3]: /images/20220226/ba35b295fbaa42f2bba539ba5f8059d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 4]: /images/20220226/d7d1a6e7ff394933a3f034c2b77e4960.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 5]: /images/20220226/5108eb25ec8b49769ad3d74f0b76401d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 6]: /images/20220226/ce4748f86284409fb653818c9ef581a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 7]: /images/20220226/2d020dc190e649a28943a33beb88d2cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 8]: /images/20220226/0dbe0f80275a4620a807248c3f5a362b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 9]: /images/20220226/77ce600825a04120bf3be02234f64994.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 10]: /images/20220226/cf4f6038fe974b6ba258fb655676f640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 11]: /images/20220226/fb0f6ae26dc54a42920b8ac1d1d902d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 12]: /images/20220226/a97d2a568ec745fea4a82e17fae268dd.png