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.表单选择器

    

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

  

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

最怕一生碌碌无为,还说平凡难能可贵!
原文地址:https://www.cnblogs.com/whllong/p/6608043.html