jQuery总结

1.jQuery简单介绍

• dom操作方便

• 链式写法

• 动画便捷

• 强大的ajax功能

• 生态丰富（插件多）

2.前端常用框架

• jQuery

• Vue：渐进式javascript库

• React：构建用户界面的js库

• Angular：前端应用程序平台

3.入口函数与onload

• 入口：
  　　$(function( ){...})

　　　　　$(document).ready(function( ){...})

$(function(){
    alert("jQ执行");
})
$(document).ready(function(){//可执行多次，不覆盖
    alert("ready准备文本");
})

　　　　　特点：可以重复执行多次，文档加载完就执行（快）

• onload：
  　　　　window.window.onload = function(){//只执行一次，覆盖之前

window.onload = function(){//只执行一次，覆盖之前
    alert("window加载完毕");
}

　　　　　特点：后面的onload会覆盖前面的onload，需要等待页面所有内容加载完再执行

4.js与jq相互转换

• jQuery转JavaScript：

　　　　　　　　　　$(" ")[下标];

　　　　　　　　　　$("").get(下标)

• JavaScript转jQuery：
  　　　　　　　$(js对象)

5.显示与隐藏

• show(speed,callback) 显示：　　　　　

  • 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

  • 可选的 callback 参数是隐藏或显示完成后所执行的函数名称

  • 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒： 可选的 callback 参数是隐藏或显示完成后所执行的函数名称

  • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

• hide([speed,[easing],[fn]]) 隐藏

  • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

• toggle( ) 切换显示与隐藏

• sliceToggle( ) 滑动切换显示与隐藏

• fadeToggle( ) 淡入淡出

• fadeIn(speed,fn) 淡入：（speed 执行的速度）

• fast 200毫秒fn 完毕后的回调函数

  • normal 400毫秒
  • slow 600毫秒
  • 自定义毫秒数

• fadeOut( ) 淡出

• fadeToggle( ) 淡入淡出

• fadeTo( ) 设置透明度

6.获取CSS

• .css(name) 获取css属性值

• .css(name,value) 设置css的属性值

• css({name:value,name2:value2}) 设置多个css属性值

7.attr设置获取节点属性

• .attr(name) 获取节点属性值

var str = $(".main").attr("title");

• .attr(name,value) 设置节点的属性值

• attr({name:value,name2:value2}) 设置多个节点属性值

8.prop设置获取节点属性（和attr相同）

• .prop(name) 获取节点属性值

• .prop(name,value) 设置节点的属性值

• prop({name:value,name2:value2}) 设置多个节点属性值

9.prop和attr区别

• attr获取节点的初始属性值

• prop是获取节点的属性值

• attr设置的属性值在dom节点是可见的

• prop设置的属性值在dom节点是不可见的

10.jQuery事件

• click( ) 单击

$(function(){                
    $("button").click(function(){
        $("p").toggle();
    })            
    // $()是jquery的核心函数
    // $是jQuery简写
    // $(函数)文档准备完毕            
})

• ready( ) 准备完毕

• hover( ) 移入移出

• change( ) 当表单值发生变化时

12.文本

• text( ) 设置或获取文本

$(function(){
    console.log($("p").text());//获取p标签的内容
        
})

• html( ) 设置获取html

• val( ) 设置获取表单的值

13.类的操作

• addClass( ) 添加类

• removeClass( ) 移除类

• toggleClass( ) 切换类

<script type="text/javascript">
    $(function(){
        // 单击颜色改变
        $("p").click(function(){
        // this当前点击p标签,$(this)转换为jq对象，
                //.toggle切换类名active
        $(this).toggleClass("active");
        })
    })
</script>        

14.选择器

• 基本

  • * 全部
  • tag 标签
  • . 类
  • # id
  • ，分组

• 层次

  • 空格 后代
  • > 直接子集
  • + 相邻子集
  • ~ 之后的兄弟节点

• 基本过滤

  • :first---第一个
  • :last---最后一个
  • :eq(n)---第n个
  • :gt(n)大于n个
  • :lt(n)小于n个
  • :odd奇数下标的元素
  • :even偶数下标的元素
  • :header标题标签
  • :animated动画

• 内容过滤

  • :contans(txt) 包含
  • :empty 空
  • :has( ) 有
  • :parent 父节点

• 可见过滤

  • :visible 现实的
  • :hidden 隐藏

• 表单过滤

• • :enabled 匹配所有可用元素
  • :disabled 匹配所有不可用元素
  • :checked 匹配所有选中的被选中元素
  • :selected 匹配所有选中的option元素

• nth-of-type

• nth-of-child

原文：https://www.cnblogs.com/qqcxy/p/15349986.html