jquery学习总计
1,jquery的基础语法
$(selector).action();
选择器(selector)查询和查找html元素,action()执行对函数的操作。
2.选择器
id,类,类型,属性,属性值等查找html元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()。
$("ul li:first")。选取第一个ul元素的第一个li元素。
$("ul li:first-child")。选取每个 <ul> 元素的第一个 <li> 元素.
$("[href]")。选取带有href属性的元素。
$("a[target='_blank']")。选取所有target等于_blank的a元素。
$("a[target!='_blank']")。选取所有target属性不等于_blank的a元素。
$(":button")。选取所有button元素和type="button"的input元素。
$("tr:even"),$("tr:odd")。选取偶数位置的tr元素,选取奇数位置的元素。
3.事件
鼠标事件。click单击。dblclick双击。mouseenter鼠标进入。mouseleave鼠标离开。
表单事件。submit提交。change改变。focus获取焦点。blur失去焦点。
文档/窗口事件。load加载。resize浏览器窗口调整大小进行计数。scroll滚动计数。unload不加载。
click单击事件。dblclick双击事件。mouseenter鼠标指针穿过元素时会发生mouseenter事件。
mouseleave鼠标指针离开元素时,会发生mouseleave事件。mousedown事件,鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件。mouseup当在元素上松开鼠标按钮时,会发生mouseup事件。
4.jquery效果
$(selector).hide(speed,callback);可选的speed参数规定隐藏/显示的速度,可以取以下值:slow,fast或毫秒。可选的callback参数是隐藏或显示完成后所执行的函数名称。
fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
5.jquery动画 animate()方法
jquery animate()方法用于创建自定义动画。
语法:$(selector).animate({params},speed,callback);
必须的params参数定义形成动画的css属性。
jquery stop()方法用于停止动画或效果,在他们完成之前。
stop()方法适用于所有jquery效果函数,包括滑动,淡入淡出和自定义动画。
语法:$(selector).stop(stopAll,goToEnd);可选的stoAll参数规定是否应该清除动画列队。默认是false,即仅仅停止活动的动画,允许任何排列入队的动画向后执行。可选的goToEnd参数规定是否立即完成当前动画。默认是false。
6.jquery-链(chaining)
通过jquery,可以把动作/方法链接在一起。
chaining允许我们在一条语句中运行多个jquery方法(在相同的元素上)。
7.jquery获取内容和属性
jquery dom操作非常重要的部分就是操作dom的能力。
获取内容-text(),html(),val()。
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容(包括html标记)
val()设置或返回表单字段的值。
8.添加新的html内容
append()在被选元素的结尾插入内容
prepend()在被选元素的开头插入内容
after()在被选元素之后插入内容
before()在被选元素之前插入内容
remove()删除被选元素(及其子元素)
empty()从被选元素中删除子元素
addClass()向被选元素添加一个或多个类
removeClass()从被选元素删除一个或多个类
toggleClass()对被选元素进行添加/删除类的功能
css()设置或返回样式属性
8.jquery尺寸
width()方法设置或返回元素的宽度(不包括内边距,边框或外边距)。
height()方法设置或返回元素的高度(不包括内边距,边框或外边距)。
innerWidth()方法返回元素的宽度(包括内边距)。
innerHeight()方法返回元素的高度(包括内边距)。
outerWidth()方法返回元素的宽度(包括内边距,边框)。
outerHeight()方法返回元素的高度(包括内边距,边框)。
outerWidth(true)方法返回元素的宽度(包括内边距,边框,外边距)。
outerHeight(true)方法返回元素的高度(包括内边距,边框外边距)。