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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/400029.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法

Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法

https://www.cnblogs.com/DragonFire/p/9259999.html 是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符串,用于传递到前端 STUDENT {name: Old, age:…
阅读更多...
【Jetson Nano学习笔记】1. 系统镜像和ROS的安装

【Jetson Nano学习笔记】1. 系统镜像和ROS的安装

目录安装系统换源安装VNC服务安装ROS初始化rosdep和环境测试平台&#xff1a;Jetson Nano 系统版本&#xff1a;4.6.1 安装系统 在Jetson Download Center下载镜像&#xff1a; 在树莓派资源下载 | 树莓派实验室下载工具 使用SDFormatter格式化内存卡 使用balenaEtcher烧录镜…
阅读更多...
我的Android进阶之旅------Android利用Sensor(传感器)实现水平仪功能的小例

我的Android进阶之旅------Android利用Sensor(传感器)实现水平仪功能的小例

这里介绍的水平仪&#xff0c;指的是比较传统的气泡水平仪&#xff0c;在一个透明圆盘内充满液体&#xff0c;液体中留有一个气泡&#xff0c;当一端翘起时&#xff0c;该气泡就会浮向翘起的一端。 利用方向传感器返回的第一个参数&#xff0c;实现了一个指南针小应用。我的And…
阅读更多...
【Jetson Nano学习笔记】2. ORB-SLAM3及ZED 2i驱动安装

【Jetson Nano学习笔记】2. ORB-SLAM3及ZED 2i驱动安装

目录ZED 2i驱动安装安装驱动自测ROS测试zed2i.launchrostopic listrosnode listdisplay_zed2i.launchzed_rtabmap.launchORB-SLAM3安装OpenCV 3安装Glew安装Pangolin安装boost安装Eigen 3安装OpenGL安装openssl安装ORB-SLAM3建立swap准备编译编译关闭swap平台&#xff1a;Jetso…
阅读更多...
proj1088

proj1088

滑雪Time Limit: 1000MS Memory Limit: 65536KTotal Submissions: 69608 Accepted: 25669Description Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走…
阅读更多...
【Jetson Nano学习笔记】3. ORB-SLAM3运行双目Demo（ZED 2i）

【Jetson Nano学习笔记】3. ORB-SLAM3运行双目Demo（ZED 2i）

目录修改zed-ros-wrapper的参数双目测试平台&#xff1a;Jetson Nano 系统版本&#xff1a;4.6.1 参考资料&#xff1a; zed-ros-wrapper —— ROS Wiki ZED 相机 && ORB-SLAM2安装环境配置与ROS下的调试 —— 李小铭 又一遍……ORB_SLAM2ZED相机(SDK2.2.1)CUDA9.0ROS…
阅读更多...
MySQL数据库和ACID模型

MySQL数据库和ACID模型

2019独角兽企业重金招聘Python工程师标准>>> ACID模型是一组强调高可靠性的数据库系统设计原则。InnoDB存储引擎坚持ACID原则&#xff0c;确保即使在软件崩溃甚至是硬件故障的情况下&#xff0c;数据也不会损坏。当你需要依赖兼容ACID原则的业务时&#xff0c;你不必…
阅读更多...
【Jetson Nano学习笔记】4. python 3编译bridge

【Jetson Nano学习笔记】4. python 3编译bridge

目录使用python3编译boostconsole_bridgepython3bridge平台&#xff1a;Jetson Nano 系统版本&#xff1a;4.6.1 参考资料&#xff1a; How to setup ROS with Python 3 Unable to use cv_bridge with ROS Kinetic and Python3 CMake Error &#xff1a;Could not find a pac…
阅读更多...
python time模块详解

python time模块详解

2019独角兽企业重金招聘Python工程师标准>>> python time模块详解 分类&#xff1a; python2009-03-28 23:35 89831人阅读 评论(9) 收藏 举报 pythonstructstringdstimportdate python 的内嵌time模板翻译及说明 一、简介 time模块提供各种操作时间的函数 说明&am…
阅读更多...
【RK3399Pro学习笔记】十九、在ROS中点亮LED灯

【RK3399Pro学习笔记】十九、在ROS中点亮LED灯

目录创建ROS工作空间创建ROS功能包CSysFs方式&#xff08;需root&#xff09;源文件blink.cppgpiolib.cpp头文件gpiolib.hCMakeLists.txt运行代码调用shell命令方式&#xff08;无需root&#xff09;源文件blink.cppCMakeLists.txt运行代码平台&#xff1a;华硕 Thinker Edge R…
阅读更多...
LaTex bib引用知网论文NoteExpress格式文献 —— cnki2bib

LaTex bib引用知网论文NoteExpress格式文献 —— cnki2bib

目录先决条件安装使用最后…棘手的用法简单用法获取NoteExpress格式到剪贴板将剪贴板内容转换在LaTex中使用调用格式效果TeXstudio 4.2.3 Windows 10 20H2 以下内容引自Python cnki2bib包介绍 先决条件 Python3 安装 pip install cnki2bibWinR打开cmd使用以上命令安装 使…
阅读更多...
24. 设计原则

24. 设计原则

总的来说是高内聚低耦合&#xff0c;内聚是把变化点进行封装&#xff0c;耦合还是要有的&#xff0c;只是要尽量少&#xff0c;不同内聚点的联系方式有两种&#xff0c;一种就是继承&#xff0c;一种就是组合。组合又分为基于接口组合还是基于类组合&#xff0c;基于接口就可以…
阅读更多...
js中 json详解

js中 json详解

var aa {name:"zoumm",age:23};var bb JSON.stringify(aa);console.log(bb); //打印出{"name":"zoumm","age":23} json的语法可以表示以下三种类型的值。 1、简单值&#xff1a;可以在json中表示字符串、数值、布尔和null。 2、对…
阅读更多...
试用合肥工业大学学位论文 LaTeX 模板（HFUT_Thesis）

试用合肥工业大学学位论文 LaTeX 模板（HFUT_Thesis）

目录编辑器模板下载TeXstudio 4.2.3 Windows 10 20H2 编辑器 编辑器的下载和安装参考Latex下载 —— 倔强菜鸟(转载) 模板下载 见合肥工业大学硕士毕业论文的LaTex模板? 感谢大佬~ 大佬的项目地址&#xff1a;https://github.com/HFUTTUG/HFUT_Thesis/releases 下载下来后…
阅读更多...
怎么查询局域网内全部电脑IP和mac地址..

怎么查询局域网内全部电脑IP和mac地址..

在局域网内查询在线主机的IP一般比较简单&#xff0c;但局域网内全部电脑的IP怎么才能够查到呢&#xff1f;查询到IP后我还要知道对方的一些详细信息&#xff08;如MAC地址、电脑名称等&#xff09;该怎么查询呢&#xff1f;&#xff1f;&#xff1f; 工具/原料 Windows 网络 方…
阅读更多...
C语言一阶低通、高通滤波器滤除截止频率外的杂波

C语言一阶低通、高通滤波器滤除截止频率外的杂波

目录理论推导产生测试信号sin_cal.csin_cal.h生成波形一阶滤波器FirstOrderFilter.cFirstOrderFilter.h测试低通滤波器高通滤波器IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 串口示波器&#xff1a;Vofa 1.3.10 理论推导 低通滤波器 …
阅读更多...
OAF_开发系列19_实现OAF对话框提示dialogPage（案例）

OAF_开发系列19_实现OAF对话框提示dialogPage（案例）

20150716 Created By BaoXinjian 一、摘要 Oracle dialogPage是OAF提示框的一种用法&#xff0c;具体应用例如在删除数据时&#xff0c;提示用户进行确认是否可以删除 二、实现方法 在CO中添加如下方法 public void processFormRequest(OAPageContext pageContext,OAWebBean we…
阅读更多...
设计模式（一）---简单工厂模式

设计模式（一）---简单工厂模式

1&#xff0c;简介&#xff1a;简单工厂模式&#xff0c;又称为静态工厂模式&#xff0c;是通过专门定义一个类来负责创建其他类的实例&#xff0c;被创建的实例通常都具有共同的父类。 2&#xff0c;简单工厂模式的结构 2.1&#xff1a;简单工厂的通用结构 2.2&#xff1a;示意…
阅读更多...
给LaTex输出的论文PDF加上电子签名

给LaTex输出的论文PDF加上电子签名

目录问题准备签名插入签名TeXstudio 4.2.3 Windows 10 20H2 参考资料&#xff1a;研究生毕业论文电子签名怎么弄&#xff1f;—— kk肥妹 问题 完成论文之后&#xff0c;需要加上签名&#xff0c;但LaTex输出的结果是PDF格式的 准备签名 准备自己的签名&#xff0c;比如直接…
阅读更多...
判断两个矩形相交以及求出相交的区域

判断两个矩形相交以及求出相交的区域

问题&#xff1a;给定两个矩形A和B&#xff0c;矩形A的左上角坐标为&#xff08;Xa1,Ya1&#xff09;&#xff0c;右下角坐标为&#xff08;Xa2,Ya2&#xff09;&#xff0c;矩形B的左上角坐标为&#xff08;Xb1,Yb1&#xff09;&#xff0c;右下角 坐标为&#xff08;Xb2,Yb2&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023