JQuery操作文本区域、输入、选择、复选框方法

今天，我学习了如何用JQuery写一些小代码，并尝试写了一个文本区。代码如下：

！DOCTYPE HTMl HTMl lang=' en ' head meta charset=' UTF-8 ' title/title style type=' text/CSS ' media=' screen ' * { margin :0；填充：0；字体：普通12px/17px Arial；} .msg { width :300px边距： 100px} .msg _ caption { width :100%；溢出：隐藏；margin-botton : 1px；} .msg _ caption span { display :块；向左浮动：保证金：0 2px填充：4px 10px背景： # 898989；光标：指针；颜色：白色；} .msg textarea { width :300px高度： 80px 100%；边框：1px实心# 000；} /style脚本类型=' text/JavaScript ' src=' http :/jquery 1 . 11 . js/script script type=' text/JavaScript ' charset=' utf-8 ' $(function(){ var $ comment=$(' # comment ')；$ ('.更大的’)。点击(function(){//绑定放大的按钮if(！$ comment . is(' : animated '){//判断对象是否处于动画状态，执行内部代码if($ comment . height()500){ $ comment . animate({ height : '=50 ' }，1000)；//重置高度50 } } })；$ ('.'更小')。单击(函数(){//绑定缩小按钮if(！$ comment . is(' : animated '){//判断对象是否处于动画状态，如果($ comment . height()50){ $ comment . animate({ height 3360 '-=50 ' }，1000)；//将高度重置-50 } } })；})/script/head body form action=' method=' post ' Div class=' msg ' Div class=' msg _ caption ' span class=' big '放大/span span class=' small '缩小/span/Div text area id=' comment ' row=' 8 ' cols=' 20 ' c/s通过任何协议相互通信，这通常需要特定的客户端。比如QQ是C/S模式，你桌面上的QQ是腾讯的特定客户端，服务器是腾讯的服务器。比如你看的互联网电视也是如此，比如你桌面上的爱奇艺和视频软件，都是C/S模式，都要求用户有特定的客户端。B/S模式在应用层通过http协议进行通信(当然也依赖于底层的很多协议)。一般不需要特定的客户端，而是需要统一规范的客户端，也就是你的浏览器！网页是B/S模式，也就是说我们说的网站是B/S模式。/text area/div/div/form/body/html渲染如下：

它可以平滑地放大和缩小，这是JQuery特效的优势。

另一个输入标签，代码：

！DOCTYPE HTMl HTMl lang=' en ' head meta charset=' UTF-8 ' title/title style type=' text/CSS ' media=' screen ' body { font : normal 12px/17px Arial；} div { padding :2px}输入，textarea { width : 12em边框：1px实心# 888;} .焦点{边框： 1px实线# f00背景： # FCC }/样式脚本类型=' text/JavaScript ' src=' http :/jquery 1。11 .js/'脚本脚本类型=' text/JavaScript ' charset=' utf-8 ' $(function(){ $(' : input ')).focus(function(){ $(this))。addCLaSS(' focus ')；if($(this).val()==这个。DefaultValue){ $(this).val(" ")；};}).模糊(函数(){ $(此)).removeClass(“”焦点');if($(this).val()==''){ $(this).瓦尔(这个。default value)；};});//addClass:为每个匹配的元素添加指定的类名，一个或多个用空格分开，添加属性//val():获得或者更改价值属性对应的值//defaultValue():获取默认值的value //removeClass():删除对应的班级属性});/script/head body form action=' method=' post ' id=' RegFOrm '字段集图例个人基本信息=用户名的/图例分区标签名称：/标签输入id='用户名'类型=“文本”值='名称//div标签为=“通过”密码：/标签输入id='pass '类型='密码'值='密码//div标签为='msg '详细信息：/标签文本区域id=' msg ' rows=' 2 ' cols=' 20 '详细信息/文本区域/div/字段集/表单/正文/html效果图如下：

添加一个焦点和失去焦点，默认值，再设置一个得到焦点时的背景颜色

第三个呢，写了一个选择，这个东西一般在即时通信软件空间和淘宝中使用比较广泛，所以也比较有兴趣，代码如下：

！DOCTYPE HTMl HTMl lang=' en ' head meta charset=' UTF-8 ' title/title style type=' text/CSS ' * { margin :0；划水：0;} div。centet { float : left文本对齐：中心；margin : 10px } span { display : block margin 33602 px；2pxpadding:4px 10px背景技术： # 898989;光标：指针指针；font-size :12 px颜色：白色；}/样式脚本类型=' text/JavaScript ' src=' http :/jquery 1。11 .js/脚本脚本类型=' text/JavaScript ' charset=' utf-8 ' $(function(){//移动到右边$('#add ').单击(函数(){ //获取选中的项，删除然后再移动到右边，这里是选择移动；$(' #选择1个选项：已选择').appendo(' # select 2 ')；});//移动到左边$('#remove ').单击(function(){ $(' # select 2 options : selected ').appendo(' # select 1 ')；}) //全部到右边$('#add_all ').单击(function(){ $('#select1 option ')).appendo(' # select 2 ')；}) //全部到左边$('#remove_all ').单击(function(){ $('#select2 option ')).appendo(' # select 1 ')；}) //双击选项$('#select1 ').dblclick(function(){ //这里先定位#选择一这个大的选择框，然后定位到里面的被选择的元素组陈的集合//这个就是表示这个集合，当我们按计算机的计算机的ctrl按键按键或者变化的时候，我们操作的就是这个集合//$('option:selected '，this).appendo(' # select 2 ')；$('option:selected '，this).appendo(' # select 2 ')；}) //双击选项$('#select2 ').dblclick(function(){ $(' option : selected '，this).appendo(' # select 1 ')；}) });/script/head body div class=' centet ' select multiple=' multiple ' id=' select 1 ' style=' width :100 px；高度：160 px选项值='1 '选项1/选项选项值='2 '选项2/选项选项值='3 '选项3/选项选项值='4 '选项4/选项选项值='5 '选项5/选项选项值='6 '选项6/选项选项值='7 '选项7/选项/选择div span id='add '选中添加到右边/span span id='add_all '全部添加到右边/span/div/div class=' centet ' select multiple=' multiple ' id=' select 2 ' style=' width : 100px；高度：160 px选项值='8 '选项8/选项/选择div span id='remove '选中删除到左边/span span id='remove_all '全部删除到左边/span /div /div/body/html效果图如下：

将左边的选项移到右边，且可双击，可多选添加，哈哈，写代码的时候很有意思，

操作检验盒

超文本标记语言

a href=' javascript:'id='all '全部选择/ABR a href=' JavaScript :'id='delAll '取消选择/ABR a href=' JavaScript :'id=' antiAll '反向选择/A输入类型='复选框'名称='复选框1 ' A输入类型='checkbox '名称='checkbox1' B输入类型='复选框'名称='复选框1 ' C/p输入类型='复选框'名称='复选框1 ' D输入类型='checkbox '名称='checkbox1'E输入类型='复选框'名称='复选框1 ' F/pquery部分

//全部选择$('#all ').单击(function(){ $(' input[name='复选框1 ']').每个（函数(){ $(此)).attr('checked '，true)；});});普通javascirpt部分：

函数CheckAll(){ for(I=0；inewtask . lentii){ e=new task。元素[I]；if(e . type==' checkbox '){ if(e . checked=false){ e . checked=true；} else { e.checked=true} } } }取消选择代码：

Jquery部分：

//取消选择$('#delAll ').单击(function(){ $(' input[name='复选框1 ']').每个（函数(){ $(此)).attr('checked '，false)；});});普通爪哇岛描述语言部分：

函数delAll(){ for(I=0；inewtask . lentii){ e=new task。元素[I]；if(e . type==' checkbox '){ if(e . checked=true){ e . checked=false；} else { e.checked=false} } }}反向选择代码：

Jquery部分：

//反向选择$(' # antili ').单击(function(){ $(' input[name='复选框1 ']').每个（函数(){ $(此)).attr('选中',这个。选中)；});普通爪哇岛描述语言部分：

函数antiL(){ for(I=0；inewtask . lentii){ e=new task。元素[I]；if(e . type==' checkbox '){ e . checked=！e。已检查；} }}