JQ 1

Posted 2020-09-28 Hale.Proh

1. 什么是jQuery

2. 查找

 

1. 什么是jQuery

  jQuery是快速的，简洁的第三方javascript库

 为什么:

    1. DOM操作的终极简化:

         DOM的问题: 核心DOM: 万能，繁琐

                              html DOM: 简洁，不是万能

         jQuery在DOM操作的4个方面提供了终极简化:

         1. 查找元素, 操作元素(添加，删除，修改(内容,属性,样式))

         2. 事件处理:

         3. 动画效果: (了解)

         4. AJAX操作:

    2. 屏蔽了绝大多数浏览器兼容性问题:

         只要jQuery让我们用的，都是兼容的

 何时: 今后绝大多数公司的项目和绝大多数前端框架都是使用jQuery开发的。

 如何:

   1. 关于版本:

       1.x: 兼容旧浏览器

          未压缩: jquery-1.11.3.js ——可读性好，便于学习，大

          压缩: jquery-1.11.3.min.js ——生产环境使用，小

                 三方面: 去掉注释, 去掉换行和空字符, 极简化变量名

       2.x: 不再兼容旧浏览器

   2. 手册:

       day1 核心和选择器

       day2 选择器,属性，文档处理和css样式

       day3 事件和动画

   3. 开始使用:

      Step1: 下载jquery.js 保存在项目js文件夹下

      Step2: 在页面用<script src 引入jquery.js文件

         向window中添加了jQuery对象

            jQuery对象是封装所有简化版DOM操作API的全局对象

           window.jQuery=window.$=jQuery

      Step3: 使用jQuery简化版API执行DOM操作

           $("选择器") 查找元素

               $底层其实使用的还是:

                 getElementById

                 getElementsByTagName,ClassName,...

                 querySelectorAll

             问题: 使用DOM API返回的结果不能使用jQuery简化版API

             $的返回值: jQuery结果集对象——类数组对象

                只有$返回的结果，才能使用简化版API

                普通DOM API返回的是标准DOM对象，不能使用简化版API。

             jQuery API和DOM API 不能混用，也不通用

           $(...).click(function(){...})

   鄙视题: DOM对象 vs jQuery对象

      DOM对象: W3C的DOM标准规定，浏览器厂商已经实现的现成的对象。能使用DOM API——繁琐

      jQuery对象: 由jQuery库创建的，由第三方实现的。

         本质: 一个封装找到的一组DOM对象的类数组对象—集合

                 并在父对象中提供了简化版API

   要想使用jQuery简化版API，必须先获得jQuery结果集合对象:

    如何: 1. 用$("选择器")直接查找对象，返回的就是

            2. 如果已经获得一个DOM对象:

                用$(DOM对象), 创建一个结果集合对象，并将DOM对象放入其中。

    jQuery结果集合对象的核心API:

     $(...).size() => $(...).length 找到的元素个数

     $(...).get(i) => $(...)[i]  从jQuery结果中取出DOM对象

            何时: 如果有jQuery实现不了的功能

                     就要见DOM对象从jQuery结果中取出

                     继续使用DOM API

     $(...).index($("要查找的元素"))

            返回要查找的元素在整个结果集中的位置

 

2. 查找:

   按选择器查找: jQuery支持所有css选择器

       只要jQuery允许使用的css选择器，都屏蔽了兼容性问题

   包括:

     基本选择器: 同CSS

        #id   .class   element   *    selector1,selector2,...

     规律: $("...")返回的jQuery结果集合的所有API都自带forEach

                后续的修改操作，会自动作用到每个找到的元素上

     层次选择器: 同CSS

        select1 select2 后代

        select1>select2 直接子代

        select1+select2 紧邻的下一个兄弟

        select1~select2 之后所有符合条件的兄弟

     过滤选择器:

       基本过滤: 位置过滤: 根据元素在结果集中的下标位置选择

          :first/last : 在结果集中选择第一个和最后一个元素

          *以下选择器下标从0开始！*

          :even/odd: 选择结果集中*下标*为偶数/奇数的元素

          :eq/gt/lt(i): 选择下标=,>或<i位置的其他元素

        何时: 只要根据元素在结果集合中的下标位置选择元素    

 

       子元素过滤: 选择在父元素下指定位置的子元素

              强调: 参照的不是在结果集合中的位置

                       而是在父元素下的位置

          :first-child/last-child

          *以下选择器下标从1开始*

          :nth-child(n/odd/even/2n/2n+1)

 

       :not(selector): 同css，  否定选择器,可否定一切选择器

 

 

 

 

 

1. 查询:

   练习:

     $(...).API() : 规律:  1. 自带forEach

                                  2. 每个API都返回原结果集合

 

   内容过滤: (了解) 根据元素的内容查找

     :contains(text)： 查找内容中包含指定文本的元素

       span:contains("购物车"): 找内容中包含"购物车"的span

     :empty : 查找不包含任何内容的空元素

     :parent : 查找只要包含内容的父元素

     :has(selector) : 选择包含满足selector要求的子元素的父元素

        比如: div:has(.active) 包含class为active的子元素的div

   可见性过滤:  同CSS (了解)

     :visible : 匹配所有可见的元素

     :hidden : 匹配所有不可见的元素display:none

                    和type="hidden"的

 

   属性过滤选择器: 同CSS

    [属性] : 查找拥有该属性的元素

    [属性="值"] : 查找指定属性的值为"值"的元素

    [属性!="内容"] : 查找指定属性的值不为"值"的元素

    [属性^="内容"] : 查找指定属性的值以"内容"开头的

    [属性$="内容"] : 查找指定属性的值以"内容"结尾的

    [属性*="内容"] : 查找指定属性的值包含"内容"的

    [条件1][条件2]... : 查找同时满足条件1,2...的元素

   

   按节点间关系查找:

   1. 父子关系:

   $(parent).children() 查找parent下所有直接子元素

                  .children(selector)  查找parent下符合条件的元素

   $(parent).find(selector)  查找parent下所有后代元素中符合条件的

   $(child).parent()  获得child的父元素

   2. 兄弟关系:

      $(...).next/prev([selector])  获得下/前一个兄弟元素

     $(...).nextAll/prevAll([selector]) 获得之后/之前所有的兄弟元素

      $(...).siblings([selector]) 获得前后所有的兄弟元素

  练习:

    获取css样式属性的值:

      var 属性值=$(...).css("css属性名")

         .css默认获取的就是计算后的完整样式！

         .css默认设置的是内联样式

    问题: css样式属性修改，代码量大

    解决: 用class代替单独修改css样式

      $(...).addClass("类名") 向选中的元素添加类名

      $(...).removeClass("类名") 从选中的元素上移除类名

      $(...).hasClass("类名") 判断选中的元素上是否包含指定类名

      如果希望在有/没有"类名"之间切换:

      $(...).toggleClass("类名");