jQuery 学习笔记

一.jQuery链式编程：
    方法可以一直调用下去

二.jQuery隐式迭代：
    在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代　
设置的时候：会给jq 对象内部所有的值设置相同的对象
获取的时候：只会返回第一个元素对应的值

三.入口函数：
$(document).ready(function (){

});

或：
$(function (){

});
对比JavaScript的入口函数jQuery的入口函数,执行时机：
1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

备注：区分mouseenter和mouseover:
若被选元素无子元素，则两者无区别；
mouseenter(首选):只有在鼠标指针穿过 被选元素 时，才会触发,对应mouseleave
mouseover:不论鼠标指针穿过 被选元素或其子元素 ，都会触发,对应mouseout

四.jQuery Html:

过滤选择器都带“：”
筛选选择器：
find()：找后代
children():找子代
next();下一个兄弟
prev();上一个兄弟

添加到子元素的后面: append()    appendTo()
添加到子元素的前面: prepend()     prependTo()
添加到自身的前/后，作为兄弟元素： after()    before()

empty():清空元素内容；
remove()：移除
clone():深度复制，默认参数false，不会复制事件；若为true,也为深复制，但会复制事件。

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

get（）:获取由选择器指定的 DOM 元素。$(selector).get(index)

 

五.样式与属性的设置与获取：

样式：在style里面写的，用css操作
    获取样式：css("name")
    设置单个样式：css("name","value") 
    设置多个样式：css({    })
属性：在标签里面写的，用attr操作 
    获取属性：attr（name）
    设置单个属性：attr(name,value) 
    设置多个属性：attr({  })
对应：js 中 设置属性setAttribute(name，value)

注意：

对于布尔类型的属性，不要用attr()(存在bug),要用prop;
(checked,selected,disabled)
    checked 属性: 设置或返回 checkbox 是否应被选中(true/false)。
    disabled 属性: 可设置或返回是否禁用 checkbox。
    selected 属性:  规定在页面加载时预先选定该选项,该选项会显示在下拉列表最前面的位置。
<select>
<option selected="">a</option>
<option >b</option>
<select>

 

六.动画部分：
1.三组基本动画：
show()  /    hide()
slideDown();上滑  / slideUp()下滑
fadeOut()  /  fadeIn()

2.自定义动画

animate（prop , [speed] , [swing/linear] , [callback]）：
第一个参数prop：对象，添加动画的样式

3.stop（）:

停止当前动画效果 参数默认（false,false）
第一个参数：是否清除动画队列
第二个参数：是否跳转到当前动画最终结果
常用写法：stop().animate();

备注：

target=_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开

 

七.特殊属性操作：
1.获取宽度：
width():width
innerwidth():width+padding
outerwidth():width+padding+border
outerwiddth(true):width+padding+border+margin
2.
offset（）：获取元素相对于页面（document）的位置
position（）：获取元素相对于有定位父元素的位置.不能传参数，只读属性

 

八.事件机制：
1.on  注册事件：
    $(selector).on(events，[selector]，[data]，function（）{});
简单事件：$(selector).on(events，function（）{});
委托时间：$(selector).on(events，selector0，function（）{});
    事件委托：给父元素（selector）注册事件，给子元素（selector0）执行    原理：冒泡
第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
第四个参数：function，事件处理函数

2.off事件解绑：
解绑匹配元素的所有事件：$(selector).off( );
解绑匹配元素的所有click事件：$(selector).off("click");

3.trigger触发事件：
$(selector).click(); //触发 click事件
$(selector).trigger("click");

4.事件对象：
screenX和screenY    对应屏幕最左/上角的值
clientX和clientY    距离页面左/上角的位置（忽视滚动条）
pageX和pageY    距离页面左/上边缘的鼠标位置（会计算滚动条的距离）

event.keyCode    按下的键盘代码
event.data    存储绑定事件时传递的附加数据

event.stopPropagation()    阻止事件冒泡行为
event.preventDefault()    阻止浏览器默认行为
return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
    

节流阀  ：按下的时候，触发一次，如果没弹起，不让触发下一次（flag=true）

九.jQuery杂项方法：
$.noConflict():
    noConflict() 方法释放变量 $ 的 jQuery 控制权。
    该方法也可用于为 jQuery 变量规定新的自定义名称。

 

十.jQuery遍历
each() 方法为每个匹配元素规定要运行的函数。提示：返回 false 可用于及早停止循环。
$(selector)each（function( index , element ){ }）
    index - 选择器的 index 位置。
    element - 当前的元素（也可使用 "this" 选择器）