• jquery从零开始(一)


     1.jquery简介

           jQuery 是一个 JavaScript 库。它极大的简化了 JavaScript 编程。

          jQuery对JavaScript进行了一系列的封装,极大的解放了开发人员的双手,将开发人员从繁琐的JavaScript代码中解放了出来。

          举个十分简单的例子:

              场景:获取获取id为mid的标签的值,

        在javascript中:   

              document.getElementById().value;

           而在jQuery中:

             $("#mid").val();
    

      这只是一个小小的例子,却不难看出jQuery的锋利。

        下面开始正式进入jQuery的学习。

    2.jquery的获取

      获取jQuery有两种方式,一种是到官网上去下载,另一种是通过CDN引用

        1.官网下载 (推荐)

         网址:http://jquery.com/download/

       官网上有两个版本的 jQuery 可供下载:

    • Production version - 用于实际的网站中,已被精简和压缩。
    • Development version - 用于测试和开发(未压缩,是可读的代码)

      下载完毕后使用script标签将它引用到HTML页面中即可使用,方式如下

    <head>
    <script src="jquery-1.10.2.min.js"></script>
    </head>
    

     2.CDN方式引用

       如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

       百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

       如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。

      下面介绍几个CDN地址:

         a.百度 CDN:

    <head>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
    </script>
    </head>
    

      b.新浪CDN 

    <head>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    </script>
    </head>

          c.谷歌CDN

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    

     3.jQuery的语法

          基础语法:$(selector).action()

            1.美元符号定义 jQuery

            2.选择符(selector)"查询"和"查找" HTML 元素

            3.jQuery 的 action() 执行对元素的操作

          

          例如:$(this).hide() - 隐藏当前元素  

                 $("p").hide() - 隐藏所有 <p> 元素

        4.jQuery的九大选择器

              1.基本选择器(最常用)

                  a.元素选择器

                     例:获取所有的div元素: $("div")

                  b.id选择器

                     例:获取id为mid的元素: $("#mid")

                  c.class选择器

                     例:获取class为mclass的元素: $(".mclasss")          注:mclass前面的点是class选择器的标志。             

               此外,多个选择器可以并列使用,只需在中间加上逗号隔开即可。

                    例:设置所有div元素和id为mid的元素的背景色为#FF00FF:$("div,#mid").css("background","#FF00FF");    

           2.层次选择器

                 a.获取body内的所有div       $("body div")

                 b.获取body内的子<div>     $("body>div")    注:与a不同的是b中body标签与div标签是父子关系

             c.获取id为div2的标签的下一个div标签      $("#div2+div")

       

            3.基础过滤选择器

                 a.获取第一个 div 元素       $("div:first")

                 b.获取最后一个div元素      $("div:last")

                 c.获取class不是mclass的所有div元素         $("div:not(.mclass)")

                 d.获取索引值为偶数的div元素          $("div:even")

                 e.获取索引值为奇数的div元素       $("div:odd")

                 f.获取索引值大于2的div元素           $("div:gt(2)")

          g.获取索引值为2的div元素           $("div:eq(2)")

                 h.获取索引值小于2的div元素           $("div:lt(2)")

             

             4.内容选择器

                 a.获取含有文本“text”的div元素   $("div.contains('text')")

                 b.获取不含有文本“text”的div元素   $("div:not(:contains('text'))")

                 c.获取不包括子元素的空div元素   $("div:empty")

                 d.获取含有子元素的非空div元素      $("div:parent")

                 e.获取含有class为mclass的div元素    $("div:has(.mclass)")

              5.可见度过滤选择器

                 a.获取所有可见的div元素   $("div:visible")

                 b.获取所有不可见的div元素     $("div:hidden")

       

              6.属性过滤器

                a.获取含有属性name的div元素   $("div[name]")

                b.获取属性name值等于nm的div元素    $("div[name=nm]")

                c.获取属性name值不等于nm的div元素    $("div[name!=nm]")

      

              7.子元素过滤选择器

              8.表单对象属性过滤器

              9.表单选择器

        

    /********************待续***********************************/

      

                    最怕一生碌碌无为,还说平凡难能可贵。

    最怕一生碌碌无为,还说平凡难能可贵!
  • 相关阅读:
    模板方法模式
    Centos 6.4 python 2.6 升级到 2.7
    Python 在Visual studio 中做单元测试进行TDD开发
    C# 代码转换到Python
    VMware Network Adapter VMnet1和VMnet8 未识别的网络的解决方法
    Visual Studio 启动加速
    查询Sqlserver 表结构信息 SQL
    HTTP发送请求模拟
    【Xamarin 开发 IOS --使用 Storyboard Segue 实作 UIViewController 的切换 (实例)】
    【Xamarin 开发 IOS --IOS 页面导航概念Segue】
  • 原文地址:https://www.cnblogs.com/whllong/p/6608043.html
Copyright © 2020-2023  润新知