单词小记

prev       上一页
slide      (使)滑入，幻灯片
fade       褪色

1. jq基本

1.1 jq概念及优点

jq封装了js常用代码，优化了DOM操作，事件处理，动画设计和Ajax交互
优点：
    轻量级，几十kb，不影响加载速度
    兼容主流浏览器
    链式编程，隐式迭代
    对事物，样式，动画支持
    有丰富的第三方插件，如：树形菜单，日期控件，轮播图等
    免费，开源

1.2 jq快速入门

引入jquery文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

1.3 jq入口函数

$(function () {   
...  // 此处是页面 DOM 加载完成的入口，接正常代码
}) ; 
上面的这个入口，相当于原生的DOMContentLoaded(在节点加载完成就进行加载)
不同于load事件，是等页面文档，css，图片等代码加载完成才加载

1.4 jq顶层对象$

$是jquery的别称，是jquery的顶层对象，相当于js的顶层对象window

1.5 jq对象和DOM对象的区别和转换

用原生js方法获取的对象是DOM对象
用jq方法获取的对象是jq对象(封装的DOM对象加jq提供的功能)
不同获取方法获取的对象，只能使用自己(js/jq封装)的方法
DOM-》jq
    var div document.querySelector("div")
    var div1 = $(div)
jq-》DOM
    var div2 = div1.get(0)
    var div3 = div1[0]

1.6 jq获取元素

var div = $("选择器")

1.7 隐式迭代

遍历匹配到的所有元素的过程叫隐式迭代
jq会自动遍历元素，执行相应方法，不用我们再手动遍历

1.8 链式编程

$('li').eq(0).css('color', 'red').siblings().css('color', 'blue');

2. jq选择器

2.1 基础选择器

$("#id")         id选择器
$("*")           全选选择器
$(".class")      类选择器
$("div")         标签选择器
$("div,p,li")    并集选择器
$("li.uu")       交集选择器

2.2 层级选择器

$("ul>li")       子代
$(ul li)         后代

2.3 筛选选择器1

$(li:first)      获取第一个li元素
$(li:last)       获取最后一个li元素
$(li:eq(2))      索引号为2的元素，索引从0开始
$(li:odd)        索引为奇数的元素
$(li:even)       索引为偶数的元素

2.4 筛选选择器2

.parent()         查找父级
.children()       子代全部
.find()           后代全部
.siblings()       查找兄弟节点
.nextAll()        当前元素之后所有同级元素
.next()           当前元素下一个同级元素
.prevAll()       当前元素之前的所有同级元素
.hasClass()       检测当前元素是否含有某个特定类

3. jq样式操作

css()和设置类样式两种

3.1 css()三种形式 获取/改变 属性值

1.获取属性值
    element.css('属性名')
2.属性赋值(1个)
    element.css('属性名','属性值')
3.属性赋值(多个)
    element.css({
        '属性名1':'属性值',
        '属性名2':'属性值'
    })

3.2 设置类样式表 添加/删除/切换 类

    element.addClass("类名")      添加类
    element.removeClass("类名")   删除类
    element.toggleClass("类名")   切换类
对比：
    原生js className会覆盖原先类名，使用classList
    .add(),.remove(),.toggle()

4 jq 动画效果

4.1 显示隐藏，滑入滑出，淡入淡出

1.显示隐藏
    show()         显示
    hide()         隐藏
    toggle()       切换(如果显示就隐藏，隐藏就显示)
    括号中可以写时间(毫秒数)，与滑入滑出相似，表示切换时间
2.滑入滑出
    slideDown()    向下滑
    slideUp()      向上滑
    slideToggle()  切换滑动
3.淡入淡出
    fadeIn()                      淡入效果
    fadeOut()                     淡出效果
    fadeToggle()                  淡入淡出切换
    fadeTo(time(cs),透明度)       修改透明度

4.2 自定义动画，停止动画排队

自定义动画：
    element.animate(param,speed,easing,fn)
    param: 想要更改样式属性，以对象传递，复合属性用驼峰
    speed: 三种预定速度字符串(slow,normal,fast)或动画时长(cs)
    easing:指定切换效果，默认swing，参数linear
    fn:回调函数，动画完成时执行，每个元素执行一次
停止动画排队:
    .stop()