22.jQuery介绍

学习jQuery函数库的基本使用方法和应用场景

前面21章讲的都是调用原生js方法。

一。jQuery介绍

jQuery是目前使用最广泛的js函数库，据统计，全世界排名前100万的网站，由46%使用jQuery，远远超过其它库，微软公司是指把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x，3.x系列。1.x系列兼容低版本的浏览器，2.x，3.x系列放弃支持低版本浏览器，目前使用最多的1.x系列的。

jQuery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

注意：不能直接在jquery的引入标签里写js代码，需要另外写一个script标签，在这个标签里面写js代码

 

jquery的口号和愿望write Less ， Do More（写得少，做的多）

      1.https://jquery.com/         官方网站

      2.https://code.jquery.com/         版本下载

二。jQuery加载 --- 采用$符号

将获取元素的语句写道页面头部，会因为元素还没有加载而出错，jQuery提供了   ready  方法解决这个问题，它的速度比原生的window.onload  更快。

 

三。jQuery选择器

jQuery用法思想一：

选择某个网页元素，然后对它进行某种操作。

jQuery选择器：

jQuery选择器可以快速的选择元素，选择规则和css样式相同，使用    length  属性判断是否选择成功。

        $("#myId")      //选择id未myId的网页元素

        $(".myClass")      //选择class为myclass的元素

        $("li")      //选择所有的li元素

        $("#ul li span")      //选择id为ul元素下的所有li下的soan元素

        $("input[name=first]")      //选择name属性等于first的input元素

对选择集进行过滤：

        $("div").has("p")      //选择包含p元素的div元素

        $("div").not(".myClass")      //选择class不等于myClass的div元素

        $("div").filter(".myClass")      //选择class等于myClass的div元素

        $("div").eq(5)      //选择第6个div元素

选择集转移：

        $("div").prev()      //选择div元素前面紧挨的同辈元素

        $("div").prevAll()      //选择div元素之前所有的同辈元素

        $("div").next()      //选择div元素后面紧挨的同辈元素

        $("div").nextAll()      //选择div元素所有紧挨的同辈元素

        $("div").parent()      //选择div的父元素

        $("div").children()      //选择div的所有元素

        $("div").siblings()     //选择div的同级元素

        $("div").find(".myClass")      //选择div内的class等于class的元素

 

判断是否选择到了元素

jQuery由容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素。length等于0.就是没选择到元素，length大于0.就是选择到了元素。