jQuery学习笔记（四）

jQuery对表单、表格的操作及更多应用

表单应用

一个表单组成部分：

表单标签、表单域及表单按钮

单行文本框应用

获取和失去焦点事件

$(function(){
$(":input").focus(function(){    //获取焦点触发事件
$(this).addClass("focus");    //增加样式
}).blur(function(){    //失去焦点触发事件
$(this).removeClass("focus");    //移除样式
});
})

多行文本框应用

1.高度变化

$(function(){
var $comment = $("#comment");    //获取评论框
$(".bigger").click(function(){    //放大按钮绑定单击事件
if ($comment.height() < 500){    //判断实际高度
$comment.height($comment.height() + 50);    //放大高度
}
});
$(".smaller").click(function(){    //缩小按钮绑定单击事件
if (!$comment.is(":animated")){    //判断是否处于动画队列中，避免堆积动画队列
if ($comment.height() > 500){    //判断实际高度
$comment.animate({height:"-=50"},400);    //以动画方式缩小高度，在原有基础上减50
}
}
});
});

2.滚动条高度变化

$(function(){
var $comment = $("#comment");    //获取评论框
#(".up").click(function(){    //点击向上滚动按钮(.up)触发事件
if(!$comment.is(":animated")){    //判断是否处于动画队列中，避免堆积动画队列
$comment.animate({scrollTop:"-=50"},400);    //以动画方式向上滚动滚动条
}
});
});

复选框应用

最基本应用就是全选、反选和全不选等操作

$(function(){
$("#checkedAll").click(function(){    //点击触发全选事件
$('[name=items]:checkbox').attr('checked',true);//使用attr方法更改checked属性（注意属性选择器），全不选选设置false值即可
});
$("#checkedRev").click(function(){    //点击触发反选事件
$('[name=items]:checkbox').each(function(){    //循环每一个复选框
$(this).attr("checked", !$(this).attr("checked"));    //设置反值（jQuery方法）
});
});
});
//如下使用原生JavaScript设置反选更简单
$(function(){
$("checkedRev").click(function(){
$('[name=items]:checkbox').each(function(){    //循环每一个复选框
this.checked = !this.checked;    //设置反值（JS原生方法）
});
});
})

下拉框应用

将选中选项添加给对方，将全部选项添加给对方，双击某个选项将其添加给对方

$('#add').click(function(){
var $options = $('#select1 option:selected');    //获取选中项
$options.appendTo('#select2');    //追加给另一个下拉框
});
$('#addAll').click(function(){
var $options = $('#select1 option');    //获取全部项
$options.appendTo('#select2');    //追加给另一个下拉框
});
$('#select1').dblclick(function(){    //双击某个选项将其追加给另一个下拉框
var $options = $("option:selected",this);    //获取选中项（注意选择器）
$options.appendTo('#select2');    //追加给另一个下拉框
})

表单验证

在每一个有requred类的文本框后加入“*”以提示必填项

$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>");    //创建元素
$(this).parent().append($required);    //追加到文档中，注意parent()方法的使用
})

验证表单的用户名和邮箱格式是否正确

$('form :input').blur(function(){    //失去焦点事件
var $parent = $(this).parent();    //定义临时变量
$parent.find(".formtips").remove();    //删除以前的提醒元素，避免堆积重复提醒
//验证用户名
if ($(this).is('#username')){
if (this.value=="" || this.value.length < 6){    //判断
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="onError formtips">' + errorMsg + '</span>'); //追加错误提示样式
}else{
var okMsg = '输入正确.';
$parent.append('<span class="onSuccess formtips">' + okMsg + '</span>'); //追加正确提示样式
}
}
// 验证邮箱
if ($(this).is("#email")){
if (this.value=="" || (this.value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ //判断
var errorMsg = '请输入正确的E-mail地址.';
$parent.append('<span class="onError formtips">' + errorMsg + '</span>'); //追加错误提示样式
}else{
var okMsg = '输入正确.';
$parent.append('<span class="onSuccess formtips">' + okMsg + '</span>'); //追加正确提示样式
}
}
})

验证表单，阻止提交

$('send').click(function(){
$("form .required:input").trigger('blur');    //模拟触发blur()事件
var numError = $('form .onError').length;    //定义numError变量
if (numError){
return false;    //判断错误提示个数（长度），如大于0（即存在错误提示）则阻止提交
}
alert("注册成功！");
})

实时验证（输入时验证，比blur()验证更及时）

$('form :input').blur(function(){
//验证代码，见前文
}).keyup(function(){
$(this).triggerHandler("blur");    //每次松开按键时模拟触发blur()事件以实时验证
}).focus(function(){
$(this).triggerHandler("blur");    //每次得到焦点时模拟触发blur()事件以实时验证

表格应用

表格变色

普通隔行变色

$(function(){$("tbody>tr:odd").addClass("odd");    //给tbody中的奇数行添加样式$("tbody>tr:even").addClass("even");  //给tbody中的偶数行添加样式
})
//其中addClass()中的odd和even是css样式，选择器中的索引是从0开始的，因此第一行是偶数

设定含有指定文字内容的某一行变色

$(function(){
$("tr:contains('内容')").addClass("selected");
})

单选框控制表格行高亮 find()方法；:radio，:checked，:has选择器

//DOM如：<table><tr><td><input type="radio" /></td></tr>...</table>
$(function(){
$("tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected").end()
.find(":radio").attr("checked",true);
$("table :radio:checked").parent().parent().addClass("selected");
//初始化表格时如有单选框默认选中也需要处理
//也可写作$("table :radio:checked").parent("tr").addClass("selected");
//或者$("tbody>tr:has(:checked)").addClass("selected");
});
})

复选框控制表格高亮 :has选择器；使用hasClass()方法进行判断

$("tr:has(:checked)").addClass("selected"); //进入页面时，处理已被选中的表格行
$("tr").click(function(){
if ($(this).hasClass("selected")){ //判断是否含有此样式
$(this).removeClass("selected").find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected").find(":checkbox").attr("checked",true);
}
})
//上述代码可使用三元运算简化为：
$("tr").click(function(){
var hasSelected = $(this).hasClass("selected");
$(this)[hasSelected?"removeClass":"addClass"]("selected")
.find(":checkbox").attr("checked",!hasSelected);
//注：$(this)["addClass"]("selected");等价于$(this).addClass("selected");
})

表格展开关闭

toggleClass()和toggle()方法；属性技巧的使用

$(function(){$('tr.parent').click(function(){   //获取所谓的父行$(this).toggleClass("selected")         //添加 /删除高亮 .silbings('.child_'+this.id).toggle();   //隐藏/显示所谓的子行});
});

表格内容删选

利用contains选择器并结合filter()的筛选方法，可以实现表格内容的过滤

$(function(){$("table tbody tr").hide()filter(":contains('李')").show();

表格内容按输入筛选显示

$(function(){
$("#filterName").keyup(function(){
$("tr").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup(); //DOM加载完时，绑定事件完成之后立即触发，避免在刷新页面后筛选效果消失
})

其他应用

<span class="bigger">放大</span>
<span class="smaller">缩小</span>
<p id="para"></p>

$(function(){
$("span").click(function(){
var thisEle = $("#para").css("font-size");//获取当前字号，带单位
var textFontSize = parseFloat(thisEle,10);//解析字符串并返回数字,参数10代表10进制
var unit = thisEle.slice(-2);//slice()方法返回字符串中从指定的字符开始的一个子字符串，
//用以截取单位
var cName = $(this).attr("class");//此处和下面的判断很有意思，可以免得再写一遍代码
if(cName == "bigger"){
if(textFontSize <= 22){//限制无限放大
textFontSize += 2;//加大字号
}
}else if(cName == "smaller"){
if(textFontSize >= 12){//限制无限缩小
textFontSize -= 2;
}
}
$(#para).css("font-size",textFontSize + unit);//记得拼上单位
});
});

网页选项卡

<div class="tab"><div class="tab_menu"><ul><li class="selected">时事</li><li>体育</li><li>娱乐</li></ul></div><div class="tab_box"> <div>时事</div><div class="hide">体育</div><div class="hide">娱乐</div></div>
</div>

HTML

var $div_li = $(".tab_menu > ul li");$div_li.click(function () {$(this).addClass("selected").siblings().removeClass("selected");var index = $div_li.index(this); //获取索引$(".tab_box >div").eq(index).show().siblings().hide();}).hover(function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");});

网页换肤

通过更换css并且记录进cookie实现换肤功能

转载于:https://www.cnblogs.com/BBeyes/p/7428318.html

jQuery学习笔记（四）相关推荐

jquery学习笔记四：ajax
$.ajax ->$.get ->$.getJson ->$.getScript ->$post jquery.ajax 最底层ajax接口,参数最灵活,需要自定义的参数也最多 ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jQuery学习笔记之unbind()
jQuery学习笔记之.unbind() 本文目标 1 了解.unbind()的几种调用方式及其参数含义 2 了解通过函数名解绑事件 3 了解利用命名空间解绑事件学习资料官方描述文档: http: ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
RabbitMQ学习笔记四：RabbitMQ命令（附疑难问题解决）
RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) 参考文章: (1)RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) (2)https://www.cnblogs. ...
JSP学习笔记(四十九)：抛弃POI，使用iText生成Word文档
POI操作excel的确很优秀,操作word的功能却不敢令人恭维.我们可以利用iText生成rtf文档,扩展名使用doc即可. 使用iText生成rtf,除了iText的包外,还需要额外的一个支持rt ...
Ethernet/IP 学习笔记四
Ethernet/IP 学习笔记四 EtherNet/IP Quick Start for Vendors Handbook (PUB213R0): https://www.odva.org/Port ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

jQuery学习笔记（四）

jQuery学习笔记（四）相关推荐

最新文章

热门文章