前端Jquery学习

jQuery语法

基础语法：$(selector).action()
文档就绪事件：

$(document).ready(function(){})
简写：
$(function(){})

选择器

• 元素选择器：$(“p”)
• id选择器：$(“#id”)
• 类选择器：$(“.clazz”)
• 其他如下

语法	描述
$(“*”)	选取所有元素
$(this)	选取当前HTML元素
$(“p.intro”)	选取class为intro的p元素
$(“p:first”)	选取第一个p元素
$(“ul li:first”)	选取第一个ul元素的第一个li元素
$(“ul li：first-child”)	选取每个ul元素的第一个li元素
$(“[href]”)	选取带有href属性的元素
$(“a[target=‘_blank’”)	选取所有target属性值等于“_blank”的a元素
$(“:button”)	选取所有type="button"的input和button元素
$(“tr:even”)	选取偶数位置的tr元素
$(“tr:odd”)	选取奇数位置的tr元素

jQuery事件

• click:点击事件
• dblclick:双击事件
• mouseenter:鼠标传过事件
• mouseleave:鼠标离开事件
• hover: 鼠标覆盖事件
• keypress:键被按下事件
• keydown:键按下的过程事件
• keyup:键被松开事件
• submit:提交事件
• change:改变事件
• focus:聚焦事件
• blur:失去焦点事件
• load:加载事件
• resize:窗口调整事件
• scroll:滚动事件
• unload:离开页面

jQuery隐藏和显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed规定效果时长，取值：slow、fast或毫秒
callback:完成后所执行的函数名称

jQuery hide()和show()
jQuery toggle() 此方法可以切换hide()和show()方法

jQuery效果-淡入淡出

$(selector).fadeIn(speed,callback);
speed规定效果时长，取值：slow、fast或毫秒
callback:完成后所执行的函数名称

• fadeIn():淡入
• fadeOut()：淡出
• fadeToggle()：切换淡入淡出
• fadeTo()：渐变

jQuery效果-滑动

$(selector).slideDown(speed,callback);
speed规定效果时长，取值：slow、fast或毫秒
callback:滑动完成后所执行的函数名称

• slideDown():向下滑动元素
• slideUp()：向上滑动元素
• slideToggle()：slideDown()和slideUp进行切换

jQuery效果-动画

$(selector).animate({params},speed,callback);
必填的params参数定义形成动画的CSS属性
speed规定效果时长，取值：slow、fast或毫秒
callback:滑动完成后所执行的函数名称

停止动画

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

jQuery-链(chaining)

jquery可以把动作/方法链接在一起

jQuery捕获

• text:设置或返回所选元素的文本内容
• html():设置或返回所选元素的内容（包括HTML标签）
• val():设置或返回表单字段的值
• attr():获取属性
  text()、html()、val()、attr()都提供了回调函数，参数为下标i+原值

jQuery添加元素

• append():在被选元素的结尾插入内容
• prepend():在被选元素的开头插入内容
• after():在被选元素之后插入内容
• before():在被选元素之前插入内容

jQuery删除元素

• remove():删除被选元素（及其子元素）
• empty():从被选元素中删除子元素

jQuery获取并设置CSS类

• addClass():向被选元素添加一个或多个类
• removeClass():从被选元素删除一个或多个类
• toggleClass():对被选元素进行添加/删除类的切换操作
• css():设置或返回样式属性

jQuery尺寸

jQuery遍历-祖先

• parent():返回被选元素的直接父元素
• parents():返回被选元素的所有祖先元素
• parentsUntil():返回介于两个给定元素之间的所有祖先元素

jQuery遍历-后代

• children():返回被选元素的所有直接子元素
• find():返回被选元素的后代元素，一路向下直到最后一个后代

jQuery遍历-同胞（siblings）

• siblings():返回被选元素的所有同胞元素
• next()：返回被选元素的下一个同胞元素
• nextAll()：返回被选元素的所有跟随的同胞元素
• nextUntil()：返回介于两个给定参数之前的所有跟随的同胞元素
• prev()：返回被选元素的下一个同胞元素
• prevAll()：返回被选元素的所有前同胞元素
• prevUntil()：返回被选元素和指定元素之间的同胞元素

jQuery遍历-过滤

• first():返回被选元素的首个元素
• last():返回被选元素的最后一个元素
• eq():返回被选中元素中带有指定索引号的元素
• filter():允许规定一个标准。不匹配标准会删除
• not():返回不匹配标准的所有元素

jQuery-Ajax

load()

$(selector).load(URL,data,callback);
callback可设置不同参数

• responseTxt:包含调用成功时结果内容
• statusTxt:包含调用状态
• xhr:包含XMLHttpRequest对象

$.get

$.get(URL,callback);
或
$.get(URL[,data][,callback][,dataType]);

• URL:发送请求的url字符串
• data:可选的，发送给服务器的字符串或key/value键值对
• callback:可选的，请求成功后执行的回调函数
• dataType:可选的，从服务器返回的数据类型

$.post

$.post(URL,callback);
或
$.post(URL[,data][,callback][,dataType]);

• URL:发送请求的url字符串
• data:可选的，发送给服务器的字符串或key/value键值对
• callback:可选的，请求成功后执行的回调函数
• dataType:可选的，从服务器返回的数据类型