jquery 开发总结(不断更新)

最近开发用到了jquery，做个总结，不断更新

$(document).ready(function(){

});

$(function(){

});

1 取值

var value=$("#name").val(); //取值

$("#name").val("测试测试"); //设置值

var valueTrim= jQuery.trim(value); //去掉左右空格

//或 var valueTrim= $.trim(value);

//去掉页面中所有文本框中的空格

$("input:text").each(function(){
              var v=$(this).val().replace(/[ ]/g,""); //去掉所有空格
              $(this).val(v);
     });

2 操作内容

1）<span id="test"><font color="red">测试</font></span>

var rs=$("#test").test(); //取内容

$("#test").test(" 测试测试测试"); //设置内容

var rs=$("#test").html(); //取html内容

$("#test").html("<font color="red">测试</fong>"); //设置html内容

2）<select name="test" id="test" style="width:180px">

var rs=$("#test").find("option:selected").text(); //取得被选中的内容

3) 设置下拉框根据条件默认选中（使用2)中的select）

var length=$("#test option").length;

for (var i=0;i<length;i++){

if ($("#test").get(0).options[i].value=="测试二"){

$("#test").get(0).options[i].selected=true; //将下拉框，内容为"测试二"的选项选中
break;

}

4) 删除下拉框选项和新增下拉框选中

$("#test option").each(
function(){
if($(this).val() == 111){
$(this).remove();
}
}
);

$("#test").append("<option value=''>请选择</option");

3 禁用启用文本框

$("#name").attr({'disabled':'disabled'}); //禁用

$("#name").removeAttr("disabled"); //启用

4.1 复选框操作

var num=0; //统计被选中的个数

var ids=null; //统计被选中的值

$("input[name='test']:checkbox").each(function(){
           if($(this).attr("checked")){
                num+=1;
                ids=ids+$(this).val()+",";
            }
       });

alert(num);

alert(ids);

4.2 单选按钮取值方法

$("input[type=radio]").bind("click",function(){
               var value = $("input[name='test'][type='radio'][checked]").val();
              alert(value);
      });

4.3 单选按钮默认选中

$("input[name='test']:radio").each(function(){
              if($(this).attr("value")=="test2"){
                 $(this).attr('checked','checked');
              }
         });

5 事件绑定

$("#test").bind("click",function(){

alert("做我想做的");

});

//其中事件真对不同的元素有不同的事件，包括 blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,

mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error

6 ajax

var param="name=zhangshan,age=30"l

$.ajax({
       url: '${ctx}/scoreMngAction.do?method=relScore',
       type: 'POST',
       dataType:'html',
       timeout: 2000000,//超时时间设定
       data:param,//参数设置
       error: function(){alert('error:不能连接远程服务器');},//错误处理，隐藏进度条
       success: function(data){
             alert(data);
       }
     });

后台取值

String name=request.getParameter("name");

String age=request.getParameter("age");

后台返回值

PrintWriter out = response.getWriter();

out.print("操作成功!");

7 操作元素属性

$("#test").attr("name","test2"); //设置元素中name属性中的内容，将test1改为test2

alert($("#test").attr("name")); //取得元素name属性中的内容

8 表单提交

</form>

$("#submit").bind("click",function(){
        $("#form1").attr("action","xx.action");
        $("#form1").attr("method","post");
        $("#form1").submit();
   });

9 填加和移除样式

.focus {
          border: 1px solid #f00;
          background: #fcc;
      }

</style>

10 遍历指定无素

function disableText(){
$("input[type='text']").each(function(){ //遍历所有text元素
$(this).attr({'disabled':'disabled'}); //增加禁用属性

//$(this) 为当前所遍历到的元素对象
});
}

//$(":input").attr({'disabled':'disabled'}); 该方法可以默认禁用所有input元素

11 显示隐藏指定元素

$("#test").show(); //显示

$("#test").hide(); //隐藏

12 文本框获得焦点

$("#test1")[0].focus();

13 表格操作

<thead>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tbody>

<table>

//改变表中的第某行中列的内容1

var tr=$("#testTr1");

tr.find("td").get(0).innerHTML="con1"

tr.find("td").get(0).innerHTML="con2"

//改变表中的第某行中列的内容2

var td1=$('#conTab > tbody > tr :radio:checked').parents("td"); //取得单选按钮所在的列

var td2=td1.next(); //取得下一列

var con=td2.text(); //取得下一列的内容

//点击单选按钮所在行，选中本行单选按钮

$('#tab1 > tbody > tr').bind("click",function(){
$(this).find(':radio').attr('checked',true);
});

//点击复选框所在行，控制复选框是否选中( 增加此功能后单击复选框，将不起作用，所以复选框增加onclick方法checkSelect(this))

$('#tab1 > tbody > tr').bind("click",function(){
            if ($(this).find(':checkbox').attr('checked')){
                  $(this).find(':checkbox').attr('checked',false);
            }else{
                  $(this).find(':checkbox').attr('checked',true);
            }
       });

//点击复选框，控制复选框是否选中
        function checkSelect(obj){
           if ($(obj).attr('checked')){
                 $(obj).attr('checked',false);
            }else{
                 $(obj).attr('checked',true);
            }
         }

//添加下一行

$('#add). ("click",function(){
$(this).parent().parent().after("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>");

});

//删除下一行

$('#del). ("click",function(){
$(this).parent().parent().next().remove(); //删除下一行

$(this).parent().parent().remove(); //删除本行

});

//添加表格最后一行

$('#addLast). ("click",function(){
$("#tab1").append("("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>");

});

jquery 开发总结(不断更新)相关推荐

使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
第五模块：WEB开发基础-第8章 Jquery开发BootStrap
系列文章目录 Jquery开发&BootStrap 文章目录系列文章目录前言一.jQuery 1.知识点介绍 2.基础核心使用 3.入口函数 4.如何处理多个库$冲突问题二.选择器 1 ...
实用Jquery开发自己的插件
实用Jquery开发自己的插件 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身 ...
10分钟快速配置sublime2支持jQuery开发
昨天介绍了javascript的开发工具sublime 2 edit,今天我们将介绍如何10分钟快速配置sublime2支持jQuery开发.希望大家能喜欢着款jQuery开发工具. 相关介绍:使用s ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
Android常用开发网址(持续更新)
2019独角兽企业重金招聘Python工程师标准>>> Android常用开发网址(持续更新) 环境搭建 android镜像 http://www.androiddevtools.c ...
基于jQuery开发的javascript模板引擎-jTemplates
这里介绍一个基于jQuery开发的模板引擎. jTemplates目前最新的版本是0.7.8,由tPython开发.官方网站:http://jtemplates.tpython.com 两个附件,一个 ...
jquery开发插件_如何开发jQuery插件
jquery开发插件 We have gone through different jQuery event methods, jQuery effects and animations in the ...

jquery 开发总结(不断更新)

jquery 开发总结(不断更新)相关推荐

最新文章

热门文章