今天做jquery遇到的一些问题汇总

1.对select下拉框进行宽度控制

 

<select  name="" style="width:72px " >

 

2.对于表格th和td列宽的控制

 

一定要在th和td标签后面都给添加上 width属性,或者再css里面定义,否则表格这种奇葩的渣渣不按常规出牌,全部平均化列宽~~

 

3.jquery遍历form下的元素,并返回它的id

 

两种办法:

1).通过map()

 

$('#form1 *').map(function() {

    return this.id;

   }).get() )

 

2)通过each()

 

$('#form1 :hidden').each(function ()
            {
                //alert($(this).attr('id'));
                var x = $(this).attr('id');
                $('#' + x).val("");
            }
            );
                 
            //显示所有子节点
            /*
            $('#form1 :hidden').each(function(){
            alert($(this).attr('id')+":"+$(this).val());
            });
             */
                 
            $('#flag').val("update");
            //alert($("select[name=align"+ index+"]").val());
            //alert($('#align' + index).find("option:selected").text());
                 
            $('#align').val($("select[name=align" + index + "]").val());
            $('#isNumeric').val($("select[name=isNumeric" + index + "]").val());
                 
            $('#form1 :hidden').each(function ()
            {
                //alert($(this).attr('id'));
                var x = $(this).attr('id');
                valInputNameByIndex(x, index);
            }
            );
                 
            $('#form1 *').each(function ()
            {
                alert($(this).attr('id') + ":" + $(this).val());
            }
            );

4.jquery选择器中含有变量的情况:

$('#' + inputName).val();

function valInputNameByIndex(inputName, index)
        {
            // alert($("'#" + inputName +"'").val();
            //alert($('#' + inputName).val());
            var x = $('#' + inputName).val();
            if (x == "")
            {
                return $('#' + inputName).val($("input[name=" + inputName + index + "]").val());
            }
            else
            {
                return x;
            }
        }

5.jquery 超链接点击后提交表单

<a href="#" id="toUpdatePdf">

$('#toUpdatePdf').click(function ()
{
$('#flag').val('update');
//alert($('#flag').val());
$('#form2').submit();
}
);

 

6.jquery根据name拿到值

 

$('#seqNo').val($("input[name=seqNo"+ index+"]").val()); //index是前台调用js的时候传入的

 

7.完整js

 

<script type="text/javascript"> 
                
        function update(index){
            //alert($('#form1 *').map(function() {return this.id;}).get() )
               
            $('#form1 :hidden').each(function ()
            {
                //alert($(this).attr('id'));
                var x = $(this).attr('id');
                $('#' + x).val("");
            }
            );
               
            //显示所有子节点
            /*
            $('#form1 :hidden').each(function(){
            alert($(this).attr('id')+":"+$(this).val());
            });
             */
               
            $('#flag').val("update");
            //alert($("select[name=align"+ index+"]").val());
            //alert($('#align' + index).find("option:selected").text());
               
            $('#align').val($("select[name=align" + index + "]").val());
            $('#isNumeric').val($("select[name=isNumeric" + index + "]").val());
               
            $('#form1 :hidden').each(function ()
            {
                //alert($(this).attr('id'));
                var x = $(this).attr('id');
                valInputNameByIndex(x, index);
            }
            );
               
            $('#form1 *').each(function ()
            {
                alert($(this).attr('id') + ":" + $(this).val());
            }
            );
               
            /*
            $(":hidden").each(function(){
            alert($(this).attr('id'));
            });
             */
               
            //      valInputNameByIndex("seqNo",index);
            //      alert($('#seqNo').val());
            //序号
            //valInputNameByIndex("seqNo",index);
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
            //字段名
            //$('#fieldName').val($("input[name=fieldName"+ index+"]").val());
            //描述
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
            //描述
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
            //宽度
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
            //对齐方式
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
            //数字列
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
            //小数位数
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
               
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
               
            //$('#seqNo').val($("input[name=seqNo"+ index+"]").val());
               
            // var y = $("#"+inputName).val();
            //alert($("input[name="+inputName+"]").val());
            //var inputValue = ($("#" + inputName).val());
            //alert(inputValue);
            //$('#seqNo').val($("'"+inputName+"'").val());
            //alert($('#seqNo').val());
        }
   
        function valInputNameByIndex(inputName, index)
        {
            // alert($("'#" + inputName +"'").val();
            //alert($('#' + inputName).val());
            var x = $('#' + inputName).val();
            if (x == "")
            {
                return $('#' + inputName).val($("input[name=" + inputName + index + "]").val());
            }
            else
            {
                return x;
            }
        }
   
        /*
        $('#update').click(function () {
        update('${index}');
        //$('#flag').val('update');
        //alert($('#flag').val());
        //$('#form1').submit();
        });
         */
   
        $('#toUpdatePdf').click(function ()
        {
            $('#flag').val('update');
            //alert($('#flag').val());
            $('#form2').submit();
        }
        );
    
            </script>

8.html部分源码

 

<form action="" method="post" id="form1" name="form1">
            <input type="hidden" id="seqNo" name="seqNo" value=""/>
            <input type="hidden" id="fieldName" name="fieldName" value=""/>
            <input type="hidden" id="descMsg" name="descMsg" value=""/>
            <input type="hidden" id="width" name="width" value=""/>
            <input type="hidden" id="align" name="align" value=""/>
            <input type="hidden" id="isNumeric" name="isNumeric" value=""/>
            <input type="hidden" id="deciLength" name="deciLength" value=""/>
            <input type="hidden" id="flag" name="flag" value=""/>
</form>

落雨

qq 394263788

2013年6月6日18:03:48

时间: 2024-10-03 21:01:06

今天做jquery遇到的一些问题汇总的相关文章

jQuery常用的一些技巧汇总_jquery

引子 jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用jQuery么,当代码运行后无法看到自己预期的效果,是不是觉得jQuery出了问题,其实,问题还是出在了自己会不会用上面.下面列举一些开发中经常遇到的应用实例,发现一下另一个不同的jQuery世界. 回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. $('.top').click(function (e) {

jQuery操作Table技巧大汇总_jquery

本文汇总了jQuery操作Table的技巧.分享给大家供大家参考,具体如下: 1.鼠标移动行变色 方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能 $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children(&qu

jQuery常用且重要方法汇总_jquery

1.jquery  data(name) data() 方法向被选元素附加数据,或者从被选元素获取数据. $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting&quo

jquery常用方法及使用示例汇总_jquery

mouseover()/mouserout() 当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件. mouseover事件大多数时候会与 mouseout 事件一起使用. mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些脚本问题. mouseenter()/mouseleave() mouseenter/mouseleave当且仅当鼠标进入被选元素时才触发,当鼠标穿过任何子元素时不会触发.它不关心目标元素是否有

jQuery表格插件datatables用法汇总_jquery

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下 一.初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&

关于数组做函数参数的问题集合汇总_C 语言

首先是数组元素作为函数的实参,这和直接用多个变量作为函数的实参在用法上没有什么差别. 作为例子的代码: 复制代码 代码如下: #include<iostream>using namespace std;int main(){ int max(int a,int b);        int a[2],m;        a[0]=1;        a[1]=2; m=max(a[0],a[1]); cout<<m;   return 0;  }int max(int a,int

jQuery中Form相关知识汇总_jquery

form中的单行文本获取和失去焦点 复制代码 代码如下: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>     <

jQuery滚动加载图片实现原理_jquery

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)_jquery

本文实例总结了jQuery实用代码片段.分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this.value; $(this).focus(function () { if (this.value == vdefault) { this.value = "&q