认识jQuery及jQuery中的选择器

一、认识JQuery？

　　1．为什么用jQuery？

• • 地址 http://jquery.com
  • 一个优秀的js函数库
  • 使用jQuery的网站超过90%
  • 中大型web项目开发首选（write less ,do more）

　　2 . 为什么用？

• • 1、html元素选取和操作
  • 2、Css操作
  • 3、Html事件处理
  • 4、Js动画效果
  • 5、链式调用（a()、b()）
  • 6、读写合一
  • 7、浏览器兼容
  • 8、已扩容插件
  • 9、Ajax封装

　　3 .怎么使用jQuery

• • 　　引入jQuery

　　　　（1）区分2种js库文件

• • • 测试版（开发版 .js）
    • 上线版（压缩版 .min.js）

　　　　（2）区分2种引用js库的方式

　　　　　　A . 服务器本地库

　　　　　　B . CDN远程库（项目上线时，一般使用比较靠谱的CDN资源库   减轻服务器负担）    地址https://www.bootcdn.cn/

　　　　（3）区别jquer的不同版本

1. 1. 1. 1.x版本(兼容老版本IE、文件较大)
      2. 2.x版本（部分IE8及以下不支持、文件小，执行效率更高）
      3. 3.x版本（完全不再支持IE8及以下版本、提供了一些新的API、提供不包 含ajax/动画API的版本）
2. 使用jQuery库

　　　　（1）使用jQuery核心函数（$ / jQuery）

　　　　（2）使用jQuery核心对象（执行$( )返回对象）

二．jQuery的两把利器

1. 使用jQuery核心函数

　　　　简称jQuery函数（$ / jQuery）

　　　　jQuery库向外直接暴露的就是$ / jQuery

　　　　引入jQuery库后，直接使用$ 即可

　　　　当前函数：$(xxx)

　　　　当前对象：$.xxx( )

1. 使用jQuery核心对象（执行$( )返回对象）

　　　　得到jQuery对象：执行jQuery函数的返回值就是jQuery对象

　　　　使用jQuery对象：$obj.xxx( )

三．jQuery中选择器的种类

1. 基本选择器

　　　　与css中选择器的用法类似

　　　　分为id选择器（id）、类名选择器（class）、元素选择器（标签名）等

<div id="div1" class="box">div1</div>

    <div id="div2" class="box">div2</div>

    <div id="div3">div3</div>

    <span class="box"> span</span>

    <br>

    <ul>

        <li>AAAAA</li>

        <li title="hollo"> BBBB</li>

        <li class="box">CCCCCCC</li>

        <li title="hello">DDDDD</li>

    </ul>

 

    <script>

        // 需求1：选择id为div1的元素

        $('#div1').css('background','red');

 

        // 需求2：选择所有的div元素

        $('div').css('background','pink');

 

        // 需求3：选择所有class属性为box的元素

        $('.box').css('background','pink');

 

        // 需求4：选择所有div和span元素

        $('div,span').css('background','red');

        

        // 需求5：选择所有class属性为box的div元素

        $('div.box').css('background','green');

    </script>

 

• 2. 层次选择器

　　　　分类：后代选择器、直接后代选择器、兄弟选择器、 相邻选择器

<ul>

        <li>AAAAAA</li>

        <li class='box'>CCCCCCC</li>

        <li title="hello"><span>BBBBBB</span></li>

        <li title="hello"><span>DDDDDD</span></li>

        <span>EEEEEE</span>

    </ul>

    <script>

        //需求1：选中ul下的所有span标签

        $('ul span').css('background','yellow')

 

        //需求2：选中ul下所有的子元素span

        $('ul>span').css('background','yellow')

 

        //需求3：选中class为box的下一个li

        $('.box+li').css('background','yellow')

 

        //需求4：选中ul下的class为box的元素后面的所有兄弟元素

        $('ul .box~*').css('background','yellow')

 

    </script>

 

• 3. 过滤选择器

　　　　过滤选择器是在原有选择器匹配的元素中进一步进行过滤的选择器

<div id="div1" class="box">div1</div>

    <div id='div2' class="box">div2</div>

    <div id="div3">div3</div>

    <span class="box">span</span>

    <ul>

        <li>AAAAAA</li>

        <li class='box'>CCCCCCC</li>

        <li title="hello"><span>BBBBBBBB</span></li>

        <li title="hello"><span>DDDDDD</span></li>

        <li style="display: none;">我本来是隐藏的</li>

        <span>EEEEEE</span>

    </ul>

    <script>

        // 需求1:选择第一个div

        $('div:first ').css('background','red')

 

        // 需求2：选择最后一个class为box的元素

        $('.box:last ').css('background','red')

 

        // 需求3：选择所有class属性部位box的div

        $('div:not(.box)').css('background','red')

 

        // 需求4：选择第二个和第三个li元素

        //:even 和:odd匹配奇偶数    :eq（index）匹配一个相等的元素

        //:gt 大于   :li小于    一般连用球区间

        

        // $('ul li:gt(0):lt(2)').css('background','red') 等价于

        $('ul li:lt(3):gt(0)').css('background','red')

 

        // 需求5：选择内容为BBBB的li

        $('li:contains("BBBBBBBB") ').css('background','red')

        

        // 需求6：选择隐藏的li

        console.log($('li:hidden').length,$('li:hidden')[0]);

 

        // 需求7：选择有title属性的li元素

        $('li[title]').css('background','red')

 

        // 需求8：选择所有属性title为hello的li元素

        $('li[title=hello]').css('background','red')

 

    </script>