黑马学习笔记——jQuery

1.jQuery 概述

1.1 JavaScript库

~：即library,是一个封装好的特定的集合（方法和函数）

~为了快速方便地操作DOM，里面基本都是函数（方法）

常见JS库：jQuery Prototype YUL Dojo Ext JS 移动端的zepto，这些都是对原生JS的封装，内部都是用JavaScriot实现的。

1.2 jQuery

(JavaScript Query)查询JS,吧JS中的DOM操作做了封装，可以快速查询使用里面的功能

~封装了JS常用的功能代码

2 jQuery基本使用

2.3 ~的入口函数

$(function(){
    ...//此处是页面DOM加载完成的入口
})

//方法2
$(document).ready(function(){
    ...//此处是页面DOM加载完成的入口
})

1. 等着DOM结构渲染完毕即可执行内部代码，不必等所有外部资源加载完成，jQuery帮我们完成了封装；
2. 相当于原生js中的DOMContentLoaded
3. 不同与原生js中的load事件

2.4 jQuery的顶级对象 $

$ 是jQuery的别称，在代码中可以使用jQuery代替$

2.5 jQuery对象和DOM对象

1. 用原生JS获取来的对象就是DOM对象；jQuery方法获取的就是jQuery对象
2. jQuery对象本质是：利用$ 对DOM对象包装后产生的对象（伪数组形式存储）
3. jQuery对象只能使用jQuery方法，DOM对象只能使用原生的JS属性和方法
4. 相互转换：   

var myDiv=document.querySelector('div');
//DOM对象转换为jQuery对象
$(myDiv);

//jQUery对象转换为DOM对象
$('div')[index];  //index是索引号
$('div').get(index)

3.jQuery选择器

3.1 ~基础选择器

单双引号都可

 

层级选择器

 

 3.3 隐式迭代

便利内部DOM元素（伪数组形式存储）的过程叫做隐式迭代  

3.4 ~筛选选择器

  

 重点：parent()  children()  find()  siblings()  eq()

• 得到当前元素索引号  $(this).index() 

4. jQuery样式操作

4.1 操作CSS方法

//1.参数只写属性名，则是返回属性值
$(this).css("color");

//2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可不加单位引号
$(this).css("color","red");

//3.参数可以使对象形式，属性名和属性值用冒号隔开，属性不用加引号
$(this).css({
    "color":"white"，
    "font-size":"20"
})

$(this).css({
    backgroundColor:white，  //复合属性名用驼峰命名法
    font-size:20
})

4.2 设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

// 1.添加类
$("div").addClass("current");

// 2.移除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");  //有这个类就移除，没有就添加

4.3 类操作与className区别

原生JS会覆盖元素原先里面的类名；

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

5. jQuery效果

5.1 显示隐藏效果

1. 显示语法规范

show([speed,[easing],[fn]]);

2.显示参数

• 参数都可以省略， 无动画直接显示；
• speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如1000）；
• easing:(Optional)用来指定切换效果，默认"swing",可用参数"linear";
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

隐藏  hide（） 同show()

5.2  事件切换  hover 鼠标经过离开的复合写法 

// 第一个函数鼠标经过触发，相当于 mouseenter;第二个离开触发，mouseleave
hover(function(){},function(){})

//如果只写一个函数，那么鼠标经过离开都会触发这个函数，和切换函数搭配使用

5.3 动画队列及其停止排队方法

1.动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发， 就会造成多个动画或者效果排队执行

2.停止排队

stop()

写到动画或者效果的前面，相当于停止结束上一次的动画。

6. jQuery属性操作

6.1 设置或获取元素固有属性值 prop()

6.2 设置或获取元素自定义属性值 attr()

6.3  数据缓存 data()

~可以在指定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

7. jQuery内容文本值

7.1 普通元素内容

1. 普通元素内容  html()  （包含标签，相当于原生 innerHtml）；
2. 普通元素文本内容  text() ；
3. 获取表单值 .val()

购物车案例知识点：

parents(".className")  //可以获取所有父元素（一直到body html），加上类名获得指定的

toFixed(2)  //保留2位小数