如何使用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();//下一个同级元素

jquery的使用 超级快速入门 熟练使用的更多相关文章

  1. jQuery UI 之 EasyUI 快速入门

    jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...

  2. jQuery UI 之 LigerUI 快速入门

    LigerUI 快速开发UI框架 LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以 ...

  3. jQuery UI 之 Bootstrap 快速入门

    转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...

  4. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. jquery easy ui 1.3.4 快速入门(1)

    什么是easyui jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂 ...

  6. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  7. 【个人笔记】001-PHP基础-01-PHP快速入门-01-PHP职业路线及PHP前景

    001-PHP基础-01-PHP快速入门 01-PHP职业路线及PHP前景 PHP职业路线 PHP初级工程师 1年以下 3k-6k PHP中级工程师 1-3年6k-10k PHP高级工程师 3年以上  ...

  8. .NET Core实战项目之CMS 第四章 入门篇-Git的快速入门及实战演练

    写在前面 上篇文章我带着大家通过分析了一遍ASP.NET Core的源码了解了它的启动过程,然后又带着大家熟悉了一遍配置文件的加载方式,最后引出了依赖注入以及控制反转的概念!如果大家把前面几张都理解了 ...

  9. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

随机推荐

  1. 【译】神经网络与深度学习 Ch1-Section0

    用神经网络识别手写数字 人类的视觉系统是是大自然的奇迹.考虑下面手写数字序列: 大多数人能够轻易地是识别出是504192.在我们大脑的每个半球都有一个基础的皮质,这就是我们熟知的V1区,它包含了14亿 ...

  2. js中几个容易混淆的概念

    1. var name = "The Window";var object = {name : "My Object",getName: function(){ ...

  3. JS window对象的top、parent、opener含义

    .top 该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. .opener opener用于在window.open的页面引用执行该window ...

  4. Core Data入门-备用

    简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象. ...

  5. 开心系列学习笔记---------javascript(7)

    一.函数        1)函数类型            函数声明(缩写为FD)是这样一种函数:            1.有一个特定的名称            2.在源码中的位置:要么处于程序级 ...

  6. C语言编程时常犯十八个错误

    C语言的最大特点是:功能强.使用方便灵活.C编译的程序对语法检查并不象其它高级语言那么严格,这就给编程人员留下“灵活的余地”,但还是由于这个灵活给程序的调试带来了许多不便,尤其对初学C语言的人来说,经 ...

  7. 【BBST 之伸展树 (Splay Tree)】

    最近“hiho一下”出了平衡树专题,这周的Splay一直出现RE,应该删除操作指针没处理好,还没找出原因. 不过其他操作运行正常,尝试用它写了一道之前用set做的平衡树的题http://codefor ...

  8. Micro Python - Python for microcontrollers

    Micro Python - Python for microcontrollers MicroPython

  9. JS中简单的this学习

        我在学习JS初期,在使用this的时候经常出现问题,当然就是在现在,也有一些场景不能很好的明白this到底指代的是什么?看下面一个例子:   var x = 10; var foo = { x ...

  10. 自定义的string类

    头文件Hi_String.h #include<iostream> #include<string.h> using namespace std; class Hi_Strin ...