jQuery总结

01 jQuery的概述

jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。

02 jQuery的发展

2006 年 8 月发布了 jQuery1.0，第一个稳定版本，具有对 CSS 选择符、事件处理和 Ajax 交互的支持

2013 年 1 月发布了 jQuery1.9，CSS 的多属性设置，增强了 CSS3。 2013 年 5 月发布了 jQuery1.10，增加了一些功能。

2013 年 4 月发布了 jQuery2.0，5 月发布了 jQuery2.0.2，一个重大更新版本，不再支 持 IE6/7/8，体积更小，速度更快。

最新版本：jquery-3.5.1

03 jQuery的使用

（1）jQuery的引入

（2）绑定函数、事件

 

 04 jQuery函数

（1）入口函数与onload

1.入口函数
        $(function(){...})
        $(document).ready(function(){ ... })
    特点：
            可以重复执行多次
            文档加载完就执行（快）
 2. onload
        window.onload = function(){...}
     特点：
            后面的onload会覆盖前面的onload
            需要等待页面所有内容加载完再执行

05 js与jq互转
    jQ->js
        $(" ")[下标]
        $(" ").get(下标)
    js->jQ
        $(js对象)

05 显示与隐藏
    show() 显示
    hide() 隐藏
    toggle()切换显示与隐藏
    sliceToggle()滑动切换显示与隐藏
    fadeIn 淡入
    fadeOut 淡出
    fadeToggle()淡入淡出
    fadeTo() 设置透明度
    fadeIn(speed,fn)
        speed   执行的速度
           

06 设置、获取css
    .css(name)   获取css属性值
    .css(name,value)    设置css的属性值
    css({name1:value1,name2:value2})      设置多个css属性值

06 attr 设置获取节点属性
    .attr(name)
获取节点属性值
    .attr(name,value)
设置节点的属性值
    attr({name1:value1,name2:value2})
设置多个节点属性值
07 prop  设置获取节点的属性
    .prop(name)
获取节点属性值
    .prop(name,value)
设置节点的属性值
    prop({name1:value1,name2:value2})
设置多个节点属性值
08 prop和attr的区别
    1. attr获取节点的初始属性值
   prop是获取节点的动态值
    2. attr设置的属性值在dom节点是可见的
     prop设置的表单属性值在dom节点上不可见

09 事件
    click()
   单击
    ready()
   准备完毕
    hover()
   鼠标移除一次
    change()
   当表单值发生改变

10 文本与值
    text()设置或获取文本
    html() 设置获取html
    val() 设置获取表单的值

11 类的操作
    addClass() 添加类
    removeClass()移除类
    toggleClass() 切换类

12 选择器
    （1）基本选择器
        *全部
        tag标签
        . 类
        # id
        ,分组
    （2）层次选择器
        空格 后代
        > 直接子元素
        + 相邻
        ~ 后兄弟
   （3） 基本过滤
        :first 第一个
        :last 最后一个
        :eq(n) 第n个
        :gt(n) 大于n个
        :lt(n)小于n个
        :odd 基数
        :even 偶数
        :header h标签
        :animated 动画
    （4）内容过滤
        :contans(txt) 包含
        :empty 空
        :has() 有
        :parent 父节点
    （5）可见过滤
        :visible 显示的
        :hidden 隐藏