• jQuery learning


    1.ajax多种用法

    $.ajax({type,url,data,dataType,success})请求后返回的数据类型应与dataType一致。

    $.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: success
    dataType: dataType
    });    

    $.post(url,data,callback,type)请求后返回的数据类型应与type一致。

    $.post("test.php", { name: "John", time: "2pm" },
    function(data){
    alert("Data Loaded: " + data);
    },'json');

    $.post("test.php", { name: "John", time: "2pm" },
    function(data){
    process(data);
    }, "xml");

    2.$('form1').serialize();
    3.异步请求返回Json格式数据(PHP json_encode(array))
    4.iconv(),PHP改变字符编码函数
    5.json支持跨域调用,由于安全性问题,AJAX不支持跨域调用,这样要调用不同域名下的数据,很麻烦。

    例:

    主调文件index.html

    <script type="text/javascript">
    function getProfile(str) {  
    var arr = str;  
    document.getElementById('nick').innerHTML = arr.nick;  
    }  
    </script>
    <body><div id="nick"></div></body>
    <script type="text/javascript" src="http://www.openphp.cn/demo/profile.php"></script>

    被调文件profile.php

    <?php  
    $arr = array(  
    'name' => '刘洋',  
    'nick' => '李宁',  
    'contact' => array(  
    'email' => 'shenkong at qq dot com',  
    'website' => 'http://www.okajax.com',  
    )  
    );  
    $json_string = json_encode($arr);  
    echo "getProfile($json_string)";  
    ?>
    6.<a href="#this"onclick="goToIndex();return false;">Click</a>推荐用这种方式来触发javascript事件而不改变当前链接;
    7.jquery取得选中复选框的个数

    两种方法

    <html>
    <head>
    <title>test</title>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    //方法一
    $(function(){
    $("#GetButton_1").click(
    function(){
    var CheckCount=0;
    $("[name='ChooseOne']").each(function(){
    if($(this).attr("checked")){
    CheckCount++;
    }
    });
    alert(CheckCount);
    });
    });

    //方法二
    $(function(){
    $("#GetButton_2").click(
    function(){
    alert($("input[name='ChooseOne']:checked").length);
    });
    });
    </script>
    </head>
    <body>
    <input type="checkbox" name="ChooseOne" >
    <input type="checkbox" name="ChooseOne" >
    <input type="checkbox" name="ChooseOne" >
    <input type="checkbox" name="ChooseOne" >
    <input type="checkbox" name="ChooseOne" >
    <br>
    <input name="GetButton_1" id="GetButton_1" type="button" value="方法一">
    <input name="GetButton_2" id="GetButton_2" type="button" value="方法二">
    </body>
    </html>

    8.全选/取消全选

    方法1

    <script type="text/javascript">
    function getRS()
    {   
    //var ched=$("input[name='items[]']:checked").length;   
    //$("input[name='items[]']").attr("checked","checked");
    $("input[name='items[]']").removeAttr("checked");
    }
    $(function(){
    $("#test").toggle(function(){$("input[name='items[]']").attr("checked","checked");},function(){$("input[name='items[]']").removeAttr("checked");});
    })
    </script>
    <?php echo time();?>
    <form action=""name="searchform" method="get">              
    <input type="checkbox" name="items[]" value="1"/>
    <input type="checkbox" name="items[]" value="14"/>
    <input type="checkbox" name="items[]" value="2"/>
    <input type="checkbox" name="items[]" value="3"/>   
    <input type="button" value="click" id="test"/>
    </form>

    方法2经典
    <html>
    <head>
    <title>JQuery实现全选</title>
    <script src="http://192.168.99.21/map/style/js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function(){
    $('#selectall').click(function() {
    $(':checkbox[id!=selectall]').attr('checked',$(this).attr('checked'));
    }
    );
    });
    </script>
    </head>
    <body>
    <input type='checkbox' />UserA
    <input type='checkbox' />UserB
    <input type='checkbox' />UserC
    <input type="checkbox" id="selectall" />全选
    </body>
    </html>

    9.javascript 定义数组

    var arr1=new Array()
    arr1[0]='red';
    arr1['g']='green';    
    var arr2=['red','green'];
    var arr3={0:'red','bb':'green'};

    10.this为DOM对象/元素,$(this),将DOM对象转为jquery对象,各自有各自的方法、属性

    $('p').each(function(i){
    //alert($('p').eq(i).html());
    //this.style.color=arrColor2[i%2];
    //alert(this.innerHTML);
    //alert($(this).html());
    });
    11.选择器selector
    function test()
    {
    /** selector **/    
    //$('#tttt').val('');
    //$("input:checkbox").each(function(i){alert($(this).val());});    
    //$(":checkbox").each(function(i){alert($(this).val());});    
    //$("input:radio:checked").each(function(i){alert($(this).val());});    
    //$("[name='items[]']:checked").each(function(i){alert($(this).val());});    
    }
    12.层级关系的选择器 ">",查找含有ID 的 $('div[id]'),

    13.text(),html(),val()----text()取得标签下文本内容,如果内容中包含<>,则过滤掉,html()   取得标签下所有内容,包括 标签 ,val()取得标签的值,<input valu          

    14. jquer简单应用
    $(function(){
    $('.tabbox li').hover(function(){
    $('.tabbox li').removeClass('changecolor');
    $(this).addClass('changecolor');
    var i=$(this).parent('ul').children('li').index(this);
    $(this).parent('ul').siblings('div').hide();
    $(this).parent('ul').siblings('div').eq(i).show();
    });

    })

    15.jquery选择器

    <script type="text/javascript">
        $(function() { //显示所有含有id属性的元素
            $("div[id]").show(800);
        })
        $(function() { //显示所有属性title的值是"A"的元素
            $("div[title='A']").show(3000);
        })
        $(function() { //显示所有属性title的值不是"A"的元素
            $("div[title!='A']").show(3000);
        })
        $(function() { //显示所有属性title的值以"A"开始的元素
            $("div[title^='A']").show(3000);
        })
        $(function() { //显示所有属性title的值以"C"结束的元素
            $("div[title$='C']").show(3000);
        })
        $(function() { //显示所有属性title的值中含有"B"的元素
            $("div[title*='B']").show(3000);
        })
        $(function() { //显示所有属性title的值中含有"B"且属性id的值是"divAB"的元素
            $("div[id='divAB'][title*='B']").show(3000);
        })
    </script>

    <body>
    <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">ID <br />
    Title AB</div>
    <div title="ABC">Title ABC</div>
    </body>

  • 相关阅读:
    c# 类名不同,字段相同,如何快速给类赋值
    .net 中 Json 与List 相互转
    echarts Hello world 入门
    Could not load file or assembly 'Oracle.ManagedDataAccessDTC.DLL' or one of its dependencies.
    省厅报件7.0 读取mdb 生成xml 文件
    【0 基础学Dojo】第【1】篇 HelloWord
    UnicodeEncodeError: 'gbk' codec can't encode character 'xa0' in position 9865: illegal multibyte sequence 解决办法
    算法的稳定性(Stability of Sorting Algorithms)
    选择排序(Selection Sort)
    快速排序(Quick Sort)
  • 原文地址:https://www.cnblogs.com/twelve/p/1942884.html
Copyright © 2020-2023  润新知