jquery的使用超级快速入门熟练使用-白红宇

jquery的使用超级快速入门熟练使用

阅读量：7107 次

发布时间：2019-06-28

本文共 2035 字，大约阅读时间需要 6 分钟。

如何使用jquery，首先需要引入jquery的js库文件，可以是免费的cdn资源，也可以是本地下载的资源

使用方法：$(function(){

               这里面写你要执行的代码，例如下面的例子最好写到这个里面、

            })

1、对html元素添加事件

//选择器可以是标签、class名称、 id名称、各种符合jquery规定的选择器都可以，具体查看jquery手册

    $(‘选择器’).on(‘事件名称’,funciton(){

       要执行的内容

    })

2、ajax的使用

   例如：使用按钮进行form表单的ajax提交

$(‘选择器’).on(‘事件名称’,function(){

        var fm_data = $(‘#fm1’).serialize();
            //此方法可以把所有表单要提交的内容序序列化，不需要手动获取每一个值
            var fm_data = $('#fm').serialize();
            $.ajax({
                type:'get',
                url:'url',
                data:fm_data,
                dataType:'json',
                success:function(data){
                    if(data.code == '200'){
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                }
            });

})

3、对动态添加的元素添加事件

   $(‘选择器’).live(‘事件’,function(){})

   使用live 代替on等直接付给事件的方法

4、获取当前元素的属性，自定义属性，值等

例如： <input type=”button” _val=”123”>

          $(‘button’).click( function(){

          var _v = $(this).attr(‘_val’);

          alert(_v);//这个时候会弹出123

        })；//末尾的分号可加，可不加

5、对html文档的操作

例如我要给一个div添加一些内容

//配合ajax 就可以做三级联动的城市选择器了
var _html = '<select name="city">'
            +'<option value="1">北京</option>'
            +'<option value="1">北京</option>'
            +'<option value="1">北京</option>'
            +'<option value="1">北京</option>'
            +'</select>';
$('#id').append(_html);
//或者
$('#id').html(_html);


6、三级联动，城市选择器的实现
<select class="sec_add" name='province' id="pro" _lv='1'>
    <option value="0">请选择</option>
    <option value="1">北京</option>
    <option value="2">广东省</option>
</select>
<select class="sec_add" name='city' id="city" _lv='2'>

</select>
<select class="sec_add" name='county' id="county" >

</select>
$(function(){
    //当切换时触发
    $('.sec_add').on('change',function(){
        //根据_lv 判断是省份触发的事件，还是城市触发的事件
        var _lv = $(this).attr('_lv');
        //获取当前选中的option的值
        var _id = $(this).val();
        $.ajax({
            type:'get',//或者是post
            url:'请求的url',
            data:{'id':_id},
            dataType:'json',//请求返回的格式，可以不写，默认是html
            success:function(data){
                var _html = '<option value="0">请选择</option>';
                if(data.code =='200'){
                    _html +=data.content;
                    //将返回的内容直接添加到select里面
                    if(_vl=='1'){
                        $('#city').html(_html);
                    }else{
                        $('#county').html(_html);
                    }

                }
            }

        });
    })
})

7、使用jquery 对元素进行筛选