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

如何使用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 对元素进行筛选

$(‘#id’).parent(); //父节点

$(‘#id’).children();//子节点

$(‘#id’).prev();//上一个同级元素

$(‘#id’).next();//下一个同级元素

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。