jQuery知识点粗浅总结

jquery是一个JavaScript工具库

关于$

• $是一个函数，与jquery等价
• 参数传递不同，效果也不同
  • 如果参数是一个匿名函数– 入口函数
  • 如果参数是一个字符串–选择器/创建一个对象
  • 如果参数传递的是一个dom对象，那将dom对象当作一个jquery对象

jquery选择器

• 关于jquery中的选择器，大部分都可以使用css中的选择器方法来实现
• 基本选择器
  • 交集选择器
    方法一：
    $(“S1S2”)，注意中间没有空格，这样就是需要同时满足这两个条件的选择器，也就是交集。
    例如：
    $(“div.ff”)
    表示即是”div”元素，同时又是clss=”ff”的类。
    方法二：
    $(“S1”).filter(“S2”);
    交集应该是同时符合两个条件，如果先找到符合第一个条件的，再用过滤器找到符合第二个条件的，这样就和选择交集效果相同了。
    例如：
    $(“div”).filter(“.ff”)
    这种方法与上面的$(“div.ff”)选择的集合是相同的。
  • 并集选择器
    例: $(‘div,p,li’)
    通过，号将这些属性的标签选择到
  • 接下来是三种最基本的选择器方法
  • 标签选择器
  • 类选择器
  • id选择器
• 层级选择器
  • 子代选择器
    $(‘ul>li’)表示选择ul标签下的li标签 此选择器只能选择直属后代标签
  • 后代选择器
    $(‘ul li’)表示选择ul标签下的li标签 此标签可以选择父结构下所有符合的子标签
• 过滤选择器
  • ：eq（index）选择索引的元素
  • ：odd 选择索引号为奇数的元素
  • ：even选择索引号为偶数的元素

修改类

• 添加class
  .addclass(‘’)
• 移除class
  .remove(‘’)
• 判断class
  .hasclass(‘’)
  • 切换class
    .toggleclass(‘’)
• 此处无注释，均为单纯方法调用

事件

• 注册事件 on
• 解绑事件 off
• 触发器trigger可以触发自定义事件

操作属性

• 获取/修改属性
  attr(‘属性名’，’属性值‘)

• 移除属性
  removeAttr()

• 对于jquery 关于checked clected disabled这类boolean属性 不能用attr方法 只能用prop方法

• 宽高

• outerWidth（true）与outerHeight(true)会获取到包含内边距与边框与外边距

• outerWidth（）与outerHeight()会获取到包含内边距与边框

• innerWidth（）与innerHeight()会获取到内边距

• position()得到一个对象 包含了元素距离定位父级top与left的值

• offset（）得到一个对象 包含了top与left的值

• scrollTop（）与scrollLeft()是元素内容贝卷曲的长度

• $(window).scrollTop()与secollLeft()是页面内容贝卷曲的长度

动画

• 显示：show（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 隐藏：hide（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 切换：toggle（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 滑入 slideDown（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 滑出 slideUp（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 切换：slideToggle（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 淡入：fadeIn（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 淡出：fadeOut（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 切换：fadeToggle（）参数1：执行动画的时长 毫秒数 参数2：回调函数

• 自定义动画：animate（）参数1：对象 参数2：可选的 代表执行时长 参数三：代表的是缓动swing还是匀速linner 参数四：回调函数

节点操作

• .html（）设置内容 如果内容包含了标签 也能被解析
  $()也可以创建节点
• 添加节点 父元素。appendTo（子元素）
• prepend（）作为第一个子元素添加
• 元素1.before（元素2）吧元素2插在元素1前面
• 元素1.after（元素2）吧元素2插在元素1后面
• 元素1.remove（）移除自己