欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JQuery操作textarea,input,select,checkbox方法_jquery

程序员文章站 2022-05-10 18:14:37
...
今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下:


放大 缩小

效果图如下:

JQuery操作textarea,input,select,checkbox方法_jquery

可以流畅的放大缩小,这就是JQuery特效的优点.

再来一个input标签,代码:



个人基本信息

效果图如下:

JQuery操作textarea,input,select,checkbox方法_jquery

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

第三个呢,写了一个select,这个东西一般在QQ空间和淘宝中使用比较广泛,所以也比较有兴趣,代码如下:



选中添加到右边>> 全部添加到右边>>

效果图如下:

JQuery操作textarea,input,select,checkbox方法_jquery

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

操作checkbox

html

Jquery部分

//全部选择
 $("#all").click(function(){ 
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",true);
 }); 
 });

普通javascirpt部分:

function checkAll(){
 for(i=0;i

取消选择代码:

Jquery部分:

//取消选择
 $("#delAll").click(function(){ 
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",false);
 }); 
 });

普通javascript部分:

function delAll(){
 for(i=0;i

反向选择代码:

Jquery部分:

//反向选择
 $("#antiAll").click(function(){
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",!this.checked);       
   });

普通javascript部分:

function antiAll(){
 for(i=0;i