如何使用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. error RC1015: cannot open include file &#39;afxres.h&#39; 解决办法

    在为WindowsPhone8程序添加本地化的过程中遇到这个问题: 问题原因就是afxres.h文件缺失,下载它,放到VS安装目录下的VS\include目录下就可以了(选择目录的时候注意对应对版本) ...

  2. github 修改fork的代码之后如何提交代码并pull request

    官方的解释还是有点模糊,我是参照这篇文章来的. http://www.linuxidc.com/Linux/2012-12/76922.htm 关于Git的版本管理的原理,我是从这篇文章里面学习的. ...

  3. [转]sublime 使用技巧总结

    原文链接:http://www.cnblogs.com/yingzi/archive/2012/04/24/2469056.html 对于用惯了editplus的人来说,突然接触到sublime有点无 ...

  4. JDBC 异常特殊原因 (数据库只读解决办法)

    JDBC 异常特殊原因   有时候并不是因为程序写的有问题  ,是因为  数据库只读 在sqlserver2005中附加数据库时,附加的数据库会变成只读的,只能进行查询操作. 解决方法: 1 打开Sq ...

  5. java安全框架shiro(一)

    第一个简单的案例 ,通过读取.ini文件的方式模拟登陆, 1.通过Factory工厂的getInstance()方法来获取SecurityManager的实例,实例化Factory需要一个ini文件的 ...

  6. [Swift]LeetCode470. 用 Rand7() 实现 Rand10() | Implement Rand10() Using Rand7()

    Given a function rand7 which generates a uniform random integer in the range 1 to 7, write a functio ...

  7. codeforces 982C Cut &#39;em all!

    题意: 给出一棵树,问最多去掉多少条边之后,剩下的连通分量的size都是偶数. 思路: 如果本来就是奇数个点,那么无论去掉多少条边都不可能成立的. 如果是偶数个点,就进行一次dfs,假设一个点的父亲是 ...

  8. Day 07 文件的相关操作

    文件初始: 文件的三要素: path:文件的路径 mode:r w r+ w+ a encoding: 编码方式 # 打开一个文件的方法 f1 = open('e:\echo.txt', encodi ...

  9. python多线程同步机制Semaphore

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ Python 线程同步机制:Semaphore "" ...

  10. python基础学习1-第一个网络爬虫程序

    #!/usr/bin/env python # -*- coding:utf-8 -*- 煎蛋网抓妹子图 import urllib.request import os import random d ...