再探jQuery

Posted 2020-08-21 Wayne Zhu

再探jQuery

　　jQuery是一个javascript库，它极大的简化了JavaScript编程，虽然目前网络上有大量开源的JS框架，但是jQuery是目前最流行的JS框架，而且提供了大量的扩展。包括Google、Microsoft、IBM等大公司都在使用jQuery框架，值得注意的是，jQuery团体知道JS咋不同浏览器中存在这大量的兼容性问题，所以jQuery兼容所有主流浏览器，包括Internet Explorer 6！

　

第一部分：使用方法

　那么如何使用jQuery呢？很简单，只需要在jQuery.com下载jQuery并引入置于</body>的上面即可，如下所示：

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

　  如果你不希望下载并存放jQuery，也可以通过CDN（内容分发网络）引用它。其中，百度、新浪、谷歌、微软的服务器都存有jQuery。

  　比如百度CDN：

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

　   不推荐google的CDN,因为google产品在中国很不稳定。

　   使用这些大公司的CDN有什么好处呢？　　

　　许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

 

　　补充CDN概念：CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快更稳定。使得用户可以就近取得所需内容，解决Internet网络拥挤的状况，从而提高用户访问网站的响应速度。

 

第二部分：jQuery语法

　1.　jQuery语法是通过选取html元素，并对选取的元素执行某些操作。基础语法如下：

       $(selector).action()

• 美元符号$定义jQuery
• 选择符（selector）"查询"和“查找”HTML元素
• jQuery的action()执行对元素的操作

 

    实例如下：

• $(this).hide()-隐藏当前元素
• $("p").hide()-隐藏所有<p>元素
• $("p.test").hide()-隐藏所有class="test"的p元素

   

 

2.文档就绪事件

$(document).ready(function(){
    //此处开始写jQuery代码
});

　这句代码的意思是再文档完全加载之后再运行jQuery代码。

  文档就绪事件可以简写为：

$(function(){
      //开始写jQuery代码
});

　 注意到结尾处都有一个分号作为结束。

 

第三部分：jQuery选择器

　　jQuery选择器基于元素的id、类、类型、属性、属性值等查找（或选择)HTML元素.这些都是基于存在的css选择器，除此之外，它还有一些自定义的选择器。值得注意的是：jQuery中所有的选择器都以美元符号开头。下面作简单的介绍。

　　1.元素选择器

　　jQuery元素选择器基于元素名选取元素。 如$("p")为在页面中选区所有的<p>元素，注意到p是由双引号括起来的。

　　2.#id选择器

　　jQuery中#id选择器通过HMTL中的id属性选取指定的元素。如$("#text"),由于元素的id是唯一的，所以获得的元素也只有一个。

      3. .class选择器

     jQuery中.class选择器通过HTML中的class属性选取指定的元素。如$(".test"),由于元素的class不是唯一的，所以获取的元素可能不止一个。

      4. $("*")，选取所有的元素。

      5. $(this),选取当前的HTML元素,注意：$(this)中的this不需要双引号括起来。

      6.$("p:first"),选取第一个p元素。

      7.$("p.intro"),选取类名为class的p元素。

　　8.$("ul li:first"),选取第一个ul下的第一个li元素。

      9.$("ul li:first-child"),选取每个ul下的第一个li元素。   注意和8的区别。

      10.$("[href]"),选取含有属性href的元素。

      11.$("a[href!=‘_blank‘]"),选取href属性的属性值不为_blank的a元素。注意：用单引号将属性值括起来。

      12.$("a[href=‘_blank‘]"),选取href属性的属性值为_blank的a元素。

      13.$(":button")，选取所有type=button的input元素和button元素。

      14.$("tr:even"),选取偶数行的tr元素。

      15.$("tr:odd"),选取奇数行的tr元素。

 

第四部分：jQuery事件