zoukankan      html  css  js  c++  java
  • jquery 应用小结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script src="jquery-1.4.4.js" type="text/javascript"></script>
    <script type="text/javascript">

    $().ready(
    function()
    {

    $("#btn").bind("click",function()
    {
    var arr=new Array();
    $("input[name='ck1']:checked").each( function(){

    arr.push($(this).val());
    });
    //array.push($(this).val());

    alert(arr.join(','));

    //alert("ok");

    for(var i=0;i<arr.length;i++)
    {
    alert(arr[i]);

    }
    }

    )

    }


    )

    </script>

    </head>
    <body>
    <input type="checkbox" name="ck1" id="1c" value='1'>1</input>
    <input type="checkbox" name="ck1" id="2c" value='2'>2</input>
    <input type="checkbox" name="ck1" id="3c" value='3'>3</input>

    <input type="checkbox" name="ck1" id="4c" value='4'>4</input>
    <input type="checkbox" name="ck1" id="5c" value='5'>5</input>
    <input type="checkbox" name="ck1" id="6c" value='6'>6</input>

    <input type="button" id="btn" value="提交"/>
    </body>
    </html>

    ------------------------写法2:

    var valArr=new Array();

    $("input[name='ck1']").each(function(i){

     valArr[i]=$(this).val();

    })

    var priv=valArr.join(',');

    alert(priv);

    ------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script src="jquery-1.4.4.js" type="text/javascript"></script>
    <script type="text/javascript">

    $().ready(

    function()
    {
    var arr=new Array();
    var arrIndex=new Array();
    var arrItem=new Array();

    var arrtype=new Array();

    var arrSS=new Array();

    var arrLL=new Array();

    $("#btn").bind("click",function(){
    alert("ok");

    $("input").each(function(index,item)
    {
    arr.push($(this).attr("name"));
    arrIndex.push(index);
    arrItem.push(item);
    if($(this).attr("type")=="text")
    {
    arrtype.push($(this).val())
    }
    })

    $("input[type='checkbox']:checked").each(function(){

    arrSS.push($(this).val());
    })

    $("input[type='checkbox'][name='ck8']:checked").each(function(){

    arrLL.push($(this).val());
    })

    //alert(arr.join(','));
    // alert(arrIndex.join(','));
    //alert(arrItem.join(','));

    $("#1").html(arr.join(','))
    $("#2").html(arrIndex.join(','))
    $("#3").html(arrItem.join(','))

    $("#4").html(arrtype.join(','))
    $("#5").html(arrSS.join(','))
    $("#6").html(arrLL.join(','))


    })
    }
    )


    </script>

    </head>
    <body>
    <input type="checkbox" name="ck1" id="1c" value='1'>1</input>
    <input type="checkbox" name="ck1" id="2c" value='2'>2</input>
    <input type="checkbox" name="ck1" id="3c" value='3'>3</input>

    <input type="checkbox" name="ck1" id="4c" value='4'>4</input>
    <input type="checkbox" name="ck1" id="5c" value='5'>5</input>
    <input type="checkbox" name="ck1" id="6c" value='6'>6</input>

    <input type="text" name="ck7" id="7c" value='7'>7</input>

    <input type="checkbox" name="ck8" id="8c" value='8'>8</input>


    <input type="button" id="btn" value="提交"/>

    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    </body>
    </html>

    -------------------------------------------------------------------

    根据name取值:

    $("input[name='mobile']").val()

    根据id取值:

    $("#mobile_reg_form").html()
    根据name取值了遍历:

    $("input[name='mobile']").each(

    function(){

    alert($(this).val());

    }

    )

    取出form中的input:
    <script type="text/javascript" language="JavaScript" charset="UTF-8">
    $(document).ready(function(){
    var a=$("form input");
    $.each(
    a,
    function(name,object){
    alert(name+":"+$(object).val());
    }
    );
    });
    </script>
    得到值(多个的情况):

    $("input[name='mobile']")[0].value

    $("input[name='mobile']").get(1).value

    -----jquery添加删除样式--------
    给一个标签添加样式:
    $("#id").addClass("style");
    删除一个标签的样式:
    $("#id").removeClass("style");
    注:"#id" id是对应标签的id,style是对应css样式的名

    设置css样式

    div.box{300px;padding:20px;margin:20px;border:4px dashed #ccc;}
    div.box span{color:#999;font-style:italic;}
    div.content{250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
    input[type='checkbox']{margin:5px;}
    input[type='button']{height:30px;margin:10px;padding:5px 10px;}
    ----------------------
    jquery视频:http://edu.csdn.net/course/detail/237

    jQuery each用法及each解析json

    http://www.cnblogs.com/huangyong8585/archive/2012/03/29/2423028.html

    http://blog.sina.com.cn/s/blog_636f2d150101ezs1.html

    http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html

    $().ready(function()

    {

    
    

    var arr1=["AAA","BBB","CCC"];
    var arr2=[['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']]

    var obj={one:1,
    two:2,
    three:3,
    four:[{hh:11,yy:22,ZZ:33},{MM:44,NN:55,TT:66}]
    };

    
    

    $("#btn").bind("click",function(){
    alert("ok");

    $.each(obj,function(key,val){
    if(key=="four")
    {
    alert(key);
    $.each(val,function(key,val){
    alert(key);
    //alert(val);
    $.each(val,function(m,n){
    alert(m);
    alert(n);
    })

    
    

    })
    }
    })

    
    

    })

    
    




    })

    
    

     Jquery 对Table的选择:

    http://www.iteye.com/problems/95533

    1.》如果指定了id,可以直接通过$("#"+id).text()获取元素包含的文本。
    2.》如果想获取table中指定tr或者td中的某个元素的文本,可以这么写:
    $(

    $("#"+tableid+" tr").get(index)).find('td').each(function(i){
       if(i==位置){
          $(this).text();//指定位置的tr下,指定位置的td包含的文本
       }
    }

    );

     
  • 相关阅读:
    参考网站
    GridView手写事件,包括取主键、取值、更新、选择、删除
    jQuery通过滚轮滚动动态加载图片
    web前端开发人员和设计师必读文章推荐
    ASP.NET中常用代码
    构建高性能ASP.NET站点
    css实现类似相框的阴影div的shadow效果
    乐观复制算法8. 保证内容质量
    乐观复制算法附件C一致性模型
    乐观复制算法10.总结 附件A Happensbefore关系
  • 原文地址:https://www.cnblogs.com/chengjun/p/5448715.html
Copyright © 2011-2022 走看看