概述

以下博客是对以前知识的简单应用，以加深理解

单行文本框

只介绍一种简单的风格：获得和失去焦点来改变风格

基本结构：

formaction=' # '方法=' post ' id=' reg from ' field set legend个人基本信息/legend Div label for=' username ' name:/labe input id=' username ' type=' text '/Div label for=' pass ' pass:/label input id=' pass ' type=' pass '/Div Div label for=' msg ' details:/label textareid=' msg '/textarea/Div/field set/form在CSS中添加了一种焦点样式。focus { border: 1px solid # f00背景技术# fcc}然后将获取和失去焦点事件添加到文本框中

$(function(){ $(':input '))。focus(function(){ $(this))。addCLaSS(' focus ')；}).blur(函数(){ $(this))。removeClass('焦点')；});});影响

多行文本框的应用

1.高度变化

更改多行文本框的高度

基本结构：

formaction=' # '方法=' post ' id=' reg from ' Div class=' msg ' Div class=' msg _ caption ' span class=' bigger '放大/span span class='small '缩小/span/Div text area id=' comment ' row=' 8 ' cols=' 20 '多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框。

1.点击“放大”按钮后，如果评论框的高度小于500px，会在原来高度的基础上增加50px。

1.点击“缩小”按钮后，如果评论框的高度大于50px，会在原来高度的基础上减少50px

添加事件：

$(function(){ var $ comment=$(' # comment ')；$('.更大的’)。click(function(){ if($ comment . height())500){ $ comment . height($ comment . height())50)；} });$('.小’)。click(function(){ if($ comment . height())50){ $ comment . height($ comment . height()-50)；} });});效果：

2.滚动条的高度会改变

添加事件：

$(function(){ var $ comment=$(' # comment ')；$('.更大的’)。单击(function(){ if(！$ comment . is(' : animated '){ $ comment . animate({ scroll top : '-=50 ' }，400)；} });$('.小’)。单击(function(){ if(！$ comment . is(' : animated '){ $ comment . animate({ scroll top : '=50 ' }，400)；} });});效果：

复选框应用程序

复选框的基本应用是全选、取消全选和全选复选框

基本风格：

form action=' # ' method=' post ' id=' reg from ' p你最喜欢的运动/p输入类型=' checkbox ' name=' items ' value=' football '/football input type=' checkbox' name=' items ' value='篮球'/篮球input type=' checkbox ' name='羽毛球'/羽毛球input type=' checkbox ' name=' items ' value='乒乓球'/乒乓球br/输入类型='按钮'标识='全部选中'值='全选'/输入类型='按钮'标识='选中否'值='全选无'/输入类型='按钮'标识='选中版本'值='反向选择'/输入类型='按钮'标识='发送'值='提交'/表单添加全选按钮并选择无事件

$('#CheckedAll ')。单击(function(){ $('[name=items]: checkbox ')。attr('checked '，true)；});$('#CheckedNo ')。单击(function(){ $('[name=items]: checkbox ')。attr('checked '，false)；});添加反选举事件

$('#CheckedRev ')。单击(function(){ $('[name=items]: checkbox ')。每个(函数(){ this.checked=！this.checked});});添加提交事件：输出选定的值

Var str='您选择的是： r n '；$('#send ')。单击(function(){ $('[name=items]: check box : checked ')。每个(函数(){ str=$(this))。val()' r n '；});警报；});效果：

下拉框应用程序

基本结构：

div class=' centet ' select multiple id=' select 1 ' style=' width :100 px；'高度：160像素选项值='1 '选项1/选项选项值='2 '选项2/选项选项值='3 '选项3/选项选项值='4 '选项4/选项选项值='5 '选项5/选项选项值='6 '选项6/选项选项值='7 '选项7/选项选项值='8 '选项8/选项/选择div span id='add '选中添加到右边/spanbr/span id='add_all '全部添加到右边/span/div/div class=' centet ' select multiple id=' select 2 ' style=' width :100 px；height :160 px '/select div span id=' remove '选中删除到左边/spanbr/span id='remove_all '全部删除到左边/span /div /div实现的功能：

1、将选中的选项添加给对方

$('#add ').单击(function(){ var $ options=$(' # select 1 options : selected ')；$选项。appendo($(“# select 2”))；});2、全部的选项添加给对方

$('#add_all ').单击(function(){ var $ options=$(' # select 1 options ')；$选项。appendo($(“# select 2”))；});3、双击某个按钮将其添加给对方

$('#select1 ').dblclick(function(){ var $ options=$(' option : selected ')；$选项。appendo($(“# select 2”))；});效果：

表单应用

基本结构：

form methos=' post ' action=' div class=' int ' label for=' username '用户名/标签输入类型=' text ' id=' username ' class=' required '/div class=' int '标签为=' email '邮箱/label input type=' text ' id=' email ' class=' required '/div div class=' int ' label for=' person info '个人资料/标签输入类型=' text ' id=' person info '/div/div class=' sub '输入类型='submit '值='提交id='send' /输入类型=' reset ' id=' red '/div/表单验证用户输入的是否正确

$("表单：input”).模糊(函数(){ var $ parent=$(this)).parent()；//删除以前的提示元素$parent.find(' .表单提示').移除();//验证用户名if($(this).是(' # username '){ if(this。value==' ' | | this。价值。长度6){ var errorsmsg='请输入至少6位的用户名；$家长。追加(' span class=' formtips OnError ' '错误消息'/span ')；}else{ var okMsg='输入正确；$家长。追加(' span class=' form tips on success ' ' okMsg '/span ')；} } //验证邮箱if($(this).是(' # email '){ if(this。value==' ' | | |(这个。价值！='' !/[emailprotected] .[a-zA-Z] {2，4}$/.测试(这个。value)){ var errorsmsg='请输入正确的电子邮件地址；$家长。追加(' span class=' formtips OnError ' '错误消息'/span ')；}else{ var okMsg='输入正确；$家长。追加(' span class=' form tips on success ' ' okMsg '/span ')；} } });提交按钮绑定事件

//提交按钮$(“# send”).单击(function(){ $(' form。必需的d :输入').触发器("模糊");var numError=$('形式“onError”).长度；if(number){ return false；}警报('注册成功');});以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！