jQuery学习

jQuery选择器

类数组操作

• children()
  返回原始包装集元素的所有不同子元素所组成的新包装集,
  如果指定了参数，那么该参数也是筛选表达式
• parent()
  返回原始包装集所有元素的唯一直接父元素的新包装集；
  如果指定了参数，那么该参数也是筛选表达式
• siblings()
  返回原始包装集元素中的所有兄弟元素所组成的新包装集；
  如果指定了参数，那么该参数也是筛选表达式
• find(String)
  返回原始包装集里与传入的选择器表达式相匹配的所有元素的新包装集,并且原始包装集中的元素的后代也会被传入新的包装集
• prev()
  获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
• end()
  结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
• next()
  匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

---

基本选择器

#id -> $("#test") ->选取id为test的元素
    返回:单个元素
class-> $(".test") ->选取class为test的元素
    返回:集合元素
div-> $("dic") ->选取标签为div的元素
    返回:集合元素
* -> $("*") -> 匹配所有元素
     返回:集合元素

---

层次选择器

$("ancestor descendant") ->选取 ancestor 元素里所有descendant (后代)元素
    返回:集合元素
$("parent>child") ->选取 parent 元素下的child (子)元素
    返回:集合元素
$("prev+next") ->选取紧接在 prev 元素后(紧邻)的 next 元素
    返回:集合元素
$("prev~siblings") -> 选取prev元素之后的所有兄弟元素
    返回:集合元素

---

过滤选择器

:first ->选取第1个元素 ->如:$(“div:first”)选取所有 <div> 元素中第一个 <div> 元素
    返回:单个元素
:last ->选取最后1个元素
    返回:单个元素
:not(selector) ->去除某个元素,匹配给的选择器的匹配元素
    返回:集合元素
    如:$(“input:not(.myClass)”)选取 class 不是 myClass 的 <input> 元素

:even ->不区分具体父元素下的元素,选取索引(从0开始)是偶数的所有元素
    返回:集合元素
:odd  ->不分区具体父元素下的元素,选取索引(从0开始)是奇数的所有元素
    返回:集合元素
:eq(index) ->选取索引(从0开始)等于index 的元素
    返回:单个元素
    如:$(“input:eq(1)”)选取索引等于1的 <input> 元素
:gt(index) ->选取索引(从0开始)大于index的元素
    返回:集合元素
     如:$(“input:gt(1)”)选取索引大于1的<input> 元素
:lt(index) ->选取索引(从0开始)小于index的元素
    返回:集合元素
    如:$(“input:lt(1)”)选取索引小于1的<input> 元素
:header ->选取所有的标题元素，即<h1>到<h6>
    返回:集合元素
:contains(text)->选取含有文本内容为 text 的元素
    返回:集合元素
:empty ->选取不包含子元素或文本的空元素
    返回:集合元素
:has(selector) ->选取含有给定选择器�匹配的元素的元素
    返回:集合元素
:parent ->选取含有子元素或文本的元素(内容不为空的)和:empty相反
    返回:集合元素
    如:$(“div:parent”)选取含有子元素或文本的 <div> 元素
[attribute] ->选取拥有此属性的元素
    返回:集合元素
    如:$(“div[id]”)选取拥有属性 id 的元素
[attribute=value] ->选取属性的值为value的元素
    返回:集合元素
[attribute!=value] ->选取属性的值不等于value的元素
    返回:集合元素
[attribute^=value]->选取属性的值以value开始的元素
    返回:集合元素
[attribute$=value] ->选取属性的值以 value结束的元素
    返回:集合元素
[attribute*=value] ->选取属性的值含有 value 的元素
    返回:集合元素
[selector1][selector2]...[selectorN] ->选取匹配以上所有属性�选择器的元素
    返回:集合元素
:nth-child(index/even/odd/equation) ->选取每个父元素下的第index (索引值为奇数/索引值为偶数/索引值等于某个表达式)个子元素，index 从1开始
    返回:集合元素
:first-child -> (同元素的父级孩子)选取第1个子元素
    返回:集合元素
:last-child ->选取最后1个子元素
    返回:集合元素
:only-child ->选取只有唯一子元素的元素的子元素
    返回:集合元素

---

表单选择器

:enabled
    选取所有可用元素
        返回:集合元素
:disabled
    选取所有不可用元素
        返回:集合元素
:checked
    选取所有被选中的元素(单选框、复选框)
        返回:集合元素
:selected
    选取所有被选中的选项元素(下拉列表)
        返回:集合元素
:input
    选取所有的<input>、<textarea>、<select>和<button>元素
        返回:集合元素
:text
    选取所有的单行文本框
        返回:集合元素
:password
    选取所有的密码框
        返回:集合元素
:radio
    选取所有的单选框
        返回:集合元素
:checkbox
    选取所有的多选框
        返回:集合元素
:submit
    选取所有的提交按钮
        返回:集合元素

---

---

jQuery动画

fadeTo(speed,opacity,callback )

方法将被选元素的不透明度逐渐地改变为指定的值。
speed 可选.规定元素从当前透明度到指定透明度的速度。
    单位毫秒
    "slow"
    "normal"
    "fast"
opacity 必填.规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback 可选。adeTo 函数执行完之后，要执行的函数

显示&隐藏

.show(speed ,easing,callback) ->显示方法
.hide(speed ,easing,callback) ->隐藏方法
.toggle(speed ,easing,callback) ->元素的显示与隐藏状态
携带的参数
    speed ->("slow","fast","nornal")/传递错误或者传空,则采用默认值400ms
    easing ->默认swing,可选linear
    callback-> 回调函数

收缩&下展

slideUp(speed ,easing,callback) ->收起
slideDown(speed ,easing,callback) ->展开
slideToggle(speed ,easing,callback)->通过使用滑动效果，在显示和隐藏状态之间切换元素
携带的参数
    speed ->("slow","fast","nornal")/传递错误或者传空,则采用默认值400ms
    easing ->默认swing,可选linear
    callback-> 回调函数

淡入&淡出

fadeIn(speed ,easing,callback) -> 向上收缩
fadeOut(speed ,easing,callback) ->向下卷东
fadeToggle(speed ,easing,callback) ->通过使用淡入/淡出效果，在显示和隐藏状态之间切换元素
携带的参数
    speed ->("slow","fast","nornal")/传递错误或者传空,则采用默认值400ms
    easing ->默认swing,可选linear
    callback-> 回调函数

自定义动画

animate()
    params:一组包含作为动画属性和终值的样式属性和及其值的集合
    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
    fn:在动画完成时执行的函数，每个元素执行一次。
  如：改变 "div" 元素的高度和宽度
        $(".btn1").click(function(){
          $("#box").animate({height:"300px"},width:"400px");
          });

.stop( clearQueue , gotoEnd )

clearQueue 传递一个布尔值,代表是否清空未执行完的 动画列队
gotoEnd 代表是否直接将正在执行的动画跳转到末状态

.delay()

执行动画或列队动画时,延迟执行

find()

获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选

---

---

jQuery对DOM树的操作

文本内容获取&修改

html(value)
    设置元素中 HTML 内容
html() 
    获取元素中 HTML 内容
text(value)
    设置元素中文本内容
text() 
    获取元素中文本内容 
val(value)
    设置表单中的文本内容
val() 
    获取表单中的文本内容

对属性的获取&设置操作

attr->设置用户自定义属性,
    prop->设置预定义属性
prop/attr(key ) 
    获取某个元素 key 属性的属性值
prop/attr(key, value) 字符串格式
    设置某个元素 key 属性的属性值 
prop/attr({key1:value2, key2:value2...}) 
    设置某个元素多个 key 属性的属性值 
removeattr(key)
    删除指定的属性

对CSS样式获取&设置操作

css(name)
    获取某个元素的 CSS 样式 
css(name, value) 
    设置某个元素行内的 CSS 样式 
css({name1 : value1, name2 : value2}) 
    设置某个元素行内多个 CSS 样式 

对标签插入&删除CSS类操作

addClass(class) 
    给某个元素添加一个 CSS 类 
removeClass(class)
    删除某个元素的一个 CSS 类
toggleClass(class) 
    来回切换默认样式和指定样式(有则删除,无则添加)
toggleClass(class, switch) 
    来回切换样式的时候设置切换频率

css方法

width() 
    获取某个元素的长度
width(value)
    设置某个元素的长度
height() 
    获取某个元素的长度
height(value)
    设置某个元素的长度

内外边距和边框尺寸方法
    innerWidth() /innerHeight()
        获取元素宽度 / 高度,包含内边距 padding 
    outerWidth() /outerHeight()
        获取元素宽度／高度,包含边框 border 和内边距 padding 
    outerWidth(ture) /outerHeight(true)
        同上,且包含外边距
其他方法
    offset() 
        获取某个元素相对于视口的偏移位置 
    position()
        获取某个元素相对于父元素的偏移位置
    scrollTop() / scrollTop(value)
        获取/设置垂直滚动条的值 
    scrollLeft() / scrollTop(value)
        获取/设置水平滚动条的值
each方法
    使用$.each()可以遍历原生的 JavaScript 对象数组,如果是 jQuery 对象的数组使用.each()方法

节点操作

节点创建
    $("<div class="on">新创建</div>") 可同时添加类名
插入节点
    内部插入
        append(content) 
            向指定元素内部后面插入节点 content
                eg:$("#wrap").append("<div class='on'>append节点</div>");
        appendTo(content)
            将指定元素移入到指定元素 content 内部后面
                eg:$("<div class='time'>appendTo节点</div>").appendTo($("#wrap"));
  *append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

        prepend(content)
            向指定元素 content 内部的前面插入节点 
                eg:$("#cont").prepend("<div class='on'>prepend节点</div>");
        prependTo(content)
            将指定元素移入到指定元素 content 内部前面 
                eg:$("<div class='time'>prependTo节点</div>").prependTo($("#cont"));
    外部插入
  *prepend() 和 prependTo()方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容

        after(content)
            向指定元素的外部后面插入节点 content 
        insertAfter(content)
            将指定节点移到指定元素 content 外部的后面 插入到这个元素的后面
        before(content)
            向指定元素的外部前面插入节点 content
        insertBefore(content) 
            将指定节点移到指定元素 content 外部的前面   插入到这个元素的前面
删除节点
    删除节点 remove() 不带参数时,删除前面对象选择器指定的元素
    而 remove() 本身也可以带选择符参数的
    清空节点 empty() 是用来删除掉节点里的内容
替换节点
    用匹配的元素替换掉所有 selector匹配到的元素。
    节点被替换后,所包含的事件行为就全部消失了。
  替换节点
用匹配的元素替换掉所有 selector匹配到的元素。
节点被替换后,所包含的事件行为就全部消失了。
replaceWith(content,callback) 方法把被选元素替换为新的内容
    content必需。规定要插入的内容（可包含 HTML 标签）。
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素
replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。
克隆节点
    clone([Even[,deepEven]])
    clone(true) 参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来 

---

---

jQuery事件相关

事件绑定的写法

一般用on()方法绑定
    events - > 事件类型
    selector -> 触发事件的选择器元素的后代
    data - > 当一个事件被触发时要传递 event.data 给事件处理函数
    fn ->该事件被触发时执行的函数。
$("选择器").on("事件类型",function({回调函数})）

鼠标事件

click(fn)  - > 触发每一个匹配元素的click(单击)事件
dbclick(fn)  - > 触发每一个匹配元素的dbclick(双击)事件
mousedown(fn)  - > 触发每一个匹配元素的mousedown(点击后)事件
mouseup(fn) - > 触发每一个匹配元素的mouseup(点击弹起)事件
mouseover(fn) - > 触发每一个匹配元素的mouseover(鼠标移入)事件
mouseout(fn) - > 触发每一个匹配元素的mouseout(鼠标移出)事件
mousemove(fn)  - > 触发每一个匹配元素的mouseover(鼠标移动)事件
mouseenter(fn) - > 触发每一个匹配元素的mouseenter(鼠标传过)事件
mouseleave(fn) - > 触发每一个匹配元素的mouseleave(鼠标穿出)事件

事件的解绑

off()
    events: 事件类型
    selector: 一个最初传递到 .on() 事件处理程序附加的选择器
    fn: 该事件被触发时执行的函数

jQuery 事件对象

事件对象就是 event 对象
jQuery 提供了一个事件对象的方法:event.stopPropagation()->阻止传播(传播和冒泡);这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消
jQuery 提供了一个事件对象的方法:event. preventDefault()；这个方法用来阻止默认行为

jQuery事件委托

子辈元素需要绑定的事件交给其父辈或者祖辈元素来绑定事件
事件委托的好处
    可以为新添加的节点也绑定上事件
    减少浏览器消耗
  eg:$("委托的父级或祖辈级元素选择器").on("事件名称","触发事件的选择器",function(){})

一次性事件

.one()
    type: 添加到元素的一个或多个事件
    data: 将要传递给事件处理函数的数据映射
    fn: 每当事件触发时执行的函数

jQuery插件