js►JQuery

01-入口函数,jq对象转换,jq选择器,mouseenter,addClass,attr&prop

JQuery

  1. 官方网址：jQuery官方网站
  2. jQuery是一个快速、小巧、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，因为它提供了一个易于使用的API（ application programming interface ），可以跨多种浏览器工作。jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。

JQuery的特点

  1. 不需要考虑浏览器的兼容性问题
  2. jquery隐式迭代特性不需要再写繁琐的for循环
  3. 获取元素的方式简单多样，不需要原生js那么繁琐
  4. 提供一些列动画相关的函数,直接使用，简洁高效

js库的概念

  1. js方法的集合即将js多个常用的js方法，写到一个js文件中，引入页面供我们直接调用
  2. js库有很多种比如zeptojs,seejs,jquery只是其中一种

jquery的版本信息

  1. 1.x 兼容IE678(jquery最受欢迎的特色：处理浏览器的兼容性)
  2. 2.x 不兼容IE678(更小更快)
  3. 3.x
    1. jquery compat 3.0.0 兼容[IE8,Opera 12 ,Safari5] 放弃IE6,7
    2. jquery 3.0.0 就面向当前长青浏览器
    3. 当前版本放弃IE8 兼容IE9+和其他长青浏览器
  4. 如今还在使用jquery绝大部分还在用1.x的版本

压缩版本和非压缩版本的区别

  1. 代用.min的版本就是压缩版本，特点是代码经过了压缩和混淆，体积更小，加载速度更快，用于线上生产环境
  2. 普通版本代码没有经过压缩，一般用于开发，学习用，体积大

jquery的使用步骤

  1. jquery引入
    <script src="jquery-1.12.4.min.js"></script>
  2. 入口函数
    1
    2
    3
    $(function(){

    })
  3. 功能实现
    1
    2
    3
    4
    5
    $(function(){

      // 功能代码

    })

jquery入口函数

入口函数的写法

  1. 写法一
    1
    2
    3
    $(document).ready(function(){// 直观解析(document)文档(此处文档指页面元素)加载完成(ready)执行函数
       // 功能代码
    })
  2. 写法二(简写)
    1
    2
    3
    $(function(){
       // 功能代码
    })

入口函数的好处

  1. 文档加载完成执行函数，确保能够获取到元素
  2. 形成了一个沙箱，避免了全局变量的污染

相比js的入口函数有何不同？

1
2
3
4
5
6
7
8
window.onload=function(){
    console.log(1)
}


$(function({
    console.log(1)  // jquery 先执行
})
  1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
  2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
  3. jquery入口函数可以多次调用且不会覆盖，onload只能执行一次

jquery对象和dom对象

基本认识

  1. 使用js方法获取页面的元素返回的对象就是dom对象
  2. 使用jquery方法获取页面元素的返回的对象就是jquery对象
    关系：jquery对象内部是一个伪数组，内部存放就是dom对象

jquery对象和js对象的区别

  1. jquery对象不能直接使用dom的方法
  2. dom对象也不能使用jquery对象的方法

jquery对象和dom对象的相互转换

1. dom对象转换成jquery对象

1
DomObj+$()=>$(DomObj)  // 只需要用$()包住dom对象即可

2. jquery对象转dom对象

  1. 方法一：$('li').get(1)
  2. 方法二：$('li')[1]
  3. 解析：jquery对象是dom对象的合集，是一个伪数组，我们只需要从伪数组中取出dom即可

JQuery选择器

  1. jquery为我们提供的一组方法，目的是更加方便的获取到页面的元素
  2. jquery兼容了几乎所有的css的选择器，也添加了更多复杂的选择器
  3. jquery的选择器很多，所以获取一个元素的方式就不止一种，所以常用的选择器并不多

    jQuery完全兼容css选择器

名称用法描述
ID选择器$(“#id”);获取指定ID的元素
类选择器$(“.class”);获取同一类class的元素
标签选择器$(“div”);获取同一类标签的所有元素
并集选择器$(“div,p,li”);使用逗号分隔，只要符合条件之一就可。
交集选择器$(“div.redClass”);获取class为redClass的div元素
子代选择器$(“ul>li”);使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器$(“ul li”);使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

过滤选择器

注意：这类选择器都带 冒号:

名称用法描述
:eq（index）$(“li:eq(2)”).css(“color”, ”red”);获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd$(“li:odd”).css(“color”, ”red”);获取到的li元素中，选择索引号为奇数的元素
:even$(“li:even”).css(“color”, ”red”);获取到的li元素中，选择索引号为偶数的元素
:first$(“li:first”).css(“color”, ”red”);获取到的li元素中的第一个
:last$(“li:last”).css(“color”, ”red”);获取到的li元素中的最后一个

筛选选择器(JQuery方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
回忆js中常用找亲戚的方法如：childNodes，parentNode，nextSbiling，previousSbiling，firstChild，lastChild

名称用法描述
children(selector)$(“ul”).children(“li”)获取当前元素的所有子元素中的li元素
find(selector)$(“ul”).find(“li”)获取当前元素中的后代元素中的li元素
siblings(selector)$(“#first”).siblings(“li”)查找兄弟节点，不包括自己本身。
parent()$(“#first”).parent()查找父亲
eq(index)$(“li”).eq(2)相当于$(“li:eq(2)”),index从0开始
next()$(“li”).next()找下一个兄弟
prev()$(“li”).prev()找上一次兄弟

children()查找子元素 children(selector)查找指定子元素mouseover鼠标经过事mouseout:鼠标离开事件mouseenter:鼠标进入事件mouseleave：鼠标离开事件

mouseenter和mouseleave

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
     .container {
         width: 800px;
         height: 800px;
         background-color: seagreen;
         padding: 100px;
         margin: 0 auto;
     }

     .parent {
         height: 600px;
         width: 600px;
         background-color: aqua;
         padding: 100px;
     }

     .son {
         width: 400px;
         height: 400px;
         background-color: sienna;
         padding: 100px;
     }
 </style>
1
2
3
4
5
<div class="container">
       <div class="parent">
           <div class="son"></div>
       </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var container = $(".container")
            var parent = $(".parent")
            var son = $(".son")

            // container.mouseover(function () {
            //     console.log("container over");
            // })
            // parent.mouseover(function () {
            //     console.log("parent over");
            // })
            // son.mouseover(function () {
            //     console.log("son over");
            // })

            // container.mouseout(function () {
            //     console.log("container out");
            // })
            // parent.mouseout(function () {
            //     console.log("parent out");
            // })
            // son.mouseout(function () {
            //     console.log("son out");
            // })


            // mouseenter和mouseleave

            container.mouseenter(function () {
                console.log("container enter");
            })
            parent.mouseenter(function () {
                console.log("parent enter");
            })
            son.mouseenter(function () {
                console.log("son enter");
            })

            container.mouseleave(function () {
                console.log("container leave");
            })
            parent.mouseleave(function () {
                console.log("parent leave");
            })
            son.mouseleave(function () {
                console.log("son leave");
            })


            // mouseover和mouseout 存在冒泡
            // mouseenter和mouseleave 不存在冒泡
        })
    </script>

find(selector)找到指定元素，siblings()找到所有兄弟元素

index() 获取元素索引值

1
2
3
4
5
6
7
8
<ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
1
2
3
4
5
6
7
8
<script src="jquery-1.12.4.js"></script>
<script>
  $(function(){
      $("li").click(function(){
          console.log("index",$(this).index()) // 打印出索引
      })
  })
</script>

.eq(index)根据下标获得指定jquery对象 .get(index)根据下标获得dom对象index()方法获得jquery对象的索引值

JQuery操作样式

  1. style：行内样式
  2. class：类样式（主要方式）
  3. css()：采用的是行内
    1. 情况一： css(name,value)给元素添加一个样式，直接给样式名称和值
    2. 情况二： css({key:value,key2:value2}) 给元素添加多个样式，参数传入对象
    3. 情况三： css(name) 当只传入样式名的时候，返回该样式名称的值
  4. 注意
    1. 隐式迭代：设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
    2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
      1
      2
      3
      4
      5
      6
      <style>
        div{
          width: 500px;
          height: 500px;
        }
      </style>
      1
      <div></div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <script src="jquery-1.12.4.min.js"></script>
       <script>
         // 给元素添加单个样式
         $('div').css("backgroundColor",'red')
         // 给元素添加多个样式
         $('div').css({
           "backgroundColor":'red',
           'border':'2px solid black',
           "margin":'100px auto'
         })
         // 获取样式的值
         var sv=$('div').css('border')  //此处如果有多个div，只返回第一个元素的该样式的值
         console.log("样式的值",sv)
       </script>

jquery操作class

js中操作类名的方法

  • classList.add(“className”); 添加类名
  • classList.remove(“className”); 删除类名
  • classList.contains(‘className’); 是否包含类名
  • classList.toggle(‘className’); 切换类名

常用方法介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .base {
    background-color: pink;
  }

  .fz {
    font-size: 50px;
  }

  .red {
    color: red;
  }
</style>
1
2
3
<div>AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
  1. addClass(name): 添加类名，同时操作多个类名，中间空格隔开
    1
    $('div').addClass('base fz')
  2. removeClass(name): 移除指定类，同时操作多个类名，中间空格隔开
    1
    $('div').removeClass('fz')  // 如果参数为空，就会移除掉该元素所有的类名
  3. toggleClass(name): 切换类名，同时操作多个类名，中间空格隔开
    1
    $('div').toggleClass('red') // 所谓切换，就是如果有该类名则删除，如果没有则添加
  4. hasClass(name): 是否有某个类名，同时操作多个类名，中间空格隔开,顺序不能变
    1
    $('div').hasClass('red') // 返回true或者false，如果有多个元素只判断"第一个"
    addClass()添加了名siblings()获取兄弟节点index()获取索引值removeClass()移除class

JQuery操作属性

js中操作属性

  • setAttribute 设置属性
  • getAttribute 获取属性

常用方法

1
2
<img src="imgs/01.jpg" alt="">
<img src="imgs/02.jpg" alt="">
  1. attr() 设置属性
    1. 情况一： attr(name,value) // 设置单个属性
      $('img').attr("title","这是图片")
    2. 情况二: attr({key:value,key2:value2}) // 设置多个属性
      $('img').attr({ "title": "这是图片", 'alt': '哈哈' })
    3. 情况三: attr(name) // 获取属性的值
      $('img').attr('title')
  2. removeAttr() 移除单个或者多个属性
    1
    2
    $('img').removeAttr('alt')  // 移除单个属性
    $('img').removeAttr('alt title') // 移除多个属性中间用"空格隔开"

布尔类型的属性操作

attr操作布尔属性的bug

1
2
3
4
 <!-- 这段代码使用attr操作布尔类型的属性有Bug -->
<button>选中</button>
<button>不选中</button>
<input type="checkbox">
1
2
3
4
5
6
7
8
$('button:first').click(function () {
     $('input').attr('checked', true);
     console.log($('input').attr('checked'));
 });
 $('button:last').click(function () {
     $('input').attr('checked', false);
     console.log($('input').attr('checked'));  // undefined
 });

prop()

1.6版本以后凡是布尔类型属性如：checked disabled selected不在使用attr来操作，换成prop

1
2
3
4
5
6
7
8
9
$('button:first').click(function() {
  $('input').prop('checked', true);
  console.log($('input').prop('checked'));
});

$('button:last').click(function() {
  $('input').prop('checked', false);
  console.log($('input').prop('checked'));
});// 功能正常

attr和prop用法区别

  • attr() 处理非布尔类型的固有的或者 自定义属性
  • prop() 处理自带属性和布尔类型属性， 不能自定义属性