一.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" 选择器)