jQuery学习笔记

[TOC]

1. 基本格式

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#left>li").mouseenter(function () {
            $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
        });
        $("#right>li").mouseenter(function () {
            $("#center>li").eq($(this).index() + 9).show().siblings().hide();
        });
    })
</script>

2. 选择器

基本选择器
- 标签 div p ul li
- 类 .class
- id选择器 #id
- 交集 li.green.big
- 并集 .green,.red
层级选择器
- 子代 s1>s2
- 后代 s1 s2
过滤选择器
- :even:偶数
- :odd:奇数
- :eq：指定下标
- :first :last :gt :lt
筛选选择器
- children():找儿子
- find():找后代
- parent():找爹
- siblings():找兄弟，不包括自己
- next():下一个兄弟
- prev():上一次兄弟
- eq():指定下标

$(this).index()返回的当前元素在所有兄弟里面的索引。

3. 操作

1. 操作样式

1.1 css操作
- 设置单个样式 .css(name, value)
- 设置多个样式 .css({ })
- 获取样式 .css(name) 隐式迭代只返回第一个元素对应的值
1.2 class操作
- 添加类：addClass(name)
- 移除类：removeClass(name)
- 判断类：hasClass(name)
- 切换： toggleClass(name)

2.操作属性

2.1 attr
- 设置单个属性 attr(name,value)
- 设置多个属性 attr({ })
- 获取属性 attr(name)
2.2 prop
- 对于布尔类型的属性，disabled，selected,checked，只能用prop
2.3移除某个属性 removeAttr(name)

3. 动画

3.1 三组基本动画
- show/hide, slideDown/slideUp/slideToggle, fadeIn/fadeOut/fadeToggle
3.2 自定义动画
- animate(prop, [speed], [swing/linear][callback])
3.3 停止动画
- stop

4. 操作节点

4.1 创建节点:
4.2 添加节点 append, appendTo, prepend, prependTo, after, before
4.3 清空内容 empty
4.4 删除节点 remove
4.5 克隆节点 clone

4. 特殊属性与事件

1. 特殊属性

val 设置或获取表单元素的值 input textarea
- 获取值 $(“#name”).val()
- 设置值 $(“#name”).val(“Wukong”)
html 相当于innerHTML text
text 相当于inner Text
width height scrollTop scrollLeft
offset 获取元素距离document的位置
position 获取元素距离有定位的父元素的位置

2.jQuery事件机制

on 注册
- 简单事件 $(selector).on( “click”, function() {}); 自己触发不支持动态绑定
- 委托事件 $(selector).on( “click”,“span”, function() {}); 内部后代元素触发支持后代绑定
- on语法 $(selector).on(events[,selector][,data],handler);
  - 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
  - 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
  - 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
  - 第四个参数：handler，事件处理函数
off 解绑
- $(selector).off(); 解绑所有事件
- $(selector).off(“click”); 解绑所有click事件
trigger 触发
- $(selector).trigger(“click”);
jQuery事件对象
- screenX和screenY 对应屏幕最左上角的值
- clientX和clientY 距离页面左上角的位置（忽视滚动条）
- pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离
- event.keyCode 按下的键盘代码
- event.data 存储绑定事件时传递的附加数
- event.stopPropagation() 阻止事件冒泡行为
- event.preventDefault() 阻止浏览器默认行为
- return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
补充知识点
- end(); 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
- 遍历集合 $(selector).each(function(index,element){});
- var c = $.noConflict(); 释放$的控制权,并且把$的能力给了c