铁雪资源网 Design By www.gsvan.com

今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css" media="screen">
  *{
    margin :0;
    padding :0;
    font : normal 12px/17px Arial;
  }
  .msg{
    width :300px;
    margin : 100px;
  }
  .msg_caption{
    width :100%;
    overflow : hidden;
    margin-botton : 1px;
  }
  .msg_caption span{
    display : block;
    float : left;
    margin :0 2px;
    padding :4px 10px;
    background :#898989;
    cursor : pointer;
    color : white;
  }
  .msg textarea{
    width :300px;
    height : 80px 100%;
    border :1px solid #000;
  }
  </style>

  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery1.11.js">

效果图如下:

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

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

再来一个input标签,代码:

<!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;
  }
  input,textarea{
    width : 12em;
    border :1px solid #888;
  }
  .focus{
    border : 1px solid #f00;
    background : #fcc;
  }
  </style>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery1.11.js">

效果图如下:

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

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

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

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
* { margin:0; padding:0; }
div.centent {
  float:left;
  text-align: center;
  margin: 10px;
}
span { 
  display:block; 
  margin:2px 2px;
  padding:4px 10px; 
  background:#898989;
  cursor:pointer;
  font-size:12px;
  color:white;
}
</style>
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery1.11.js">

效果图如下:

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

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

操作checkbox

html

<a href="javascript:;" id="all">全部选择</a><br>
 <a href="javascript:;" id="delAll">取消选择</a><br>
 <a href="javascript:;" id="antiAll">反向选择</a>   
 <p><input type="checkbox" name="checkbox1">A
 <input type="checkbox" name="checkbox1"> B
 <input type="checkbox" name="checkbox1">C</p>
 <p><input type="checkbox" name="checkbox1">D
 <input type="checkbox" name="checkbox1">E
 <input type="checkbox" name="checkbox1">F</p>

 Jquery部分

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

普通javascirpt部分:

function checkAll(){
 for(i=0;i<newTask.length;i++){
 e=newTask.elements[i];
 if(e.type=='checkbox'){
  if(e.checked=false){
  e.checked=true;
  }else{
  e.checked=true;
  }
 }
 } 
}
 

取消选择代码:

Jquery部分:

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

普通javascript部分:

function delAll(){
 for(i=0;i<newTask.length;i++){
 e=newTask.elements[i];
 if(e.type=='checkbox'){
  if(e.checked=true){
  e.checked=false;
  }
  else{
  e.checked=false;
  }
 }
 }
}

反向选择代码:

Jquery部分:

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

普通javascript部分:

function antiAll(){
 for(i=0;i<newTask.length;i++){
 e=newTask.elements[i];
 if(e.type=='checkbox'){
  e.checked=!e.checked;
 }
 }
}

标签:
JQuery,textarea,input,select,checkbox

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“JQuery操作textarea,input,select,checkbox方法”

暂无JQuery操作textarea,input,select,checkbox方法的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?