<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
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]);文章来源：https://www.toymoban.com/news/detail-721407.html
- URL:发送请求的url字符串
- data:可选的，发送给服务器的字符串或key/value键值对
- callback:可选的，请求成功后执行的回调函数
- dataType:可选的，从服务器返回的数据类型
$.post
$.post(URL,callback);
或
$.post(URL[,data][,callback][,dataType]);文章来源地址https://www.toymoban.com/news/detail-721407.html
- URL:发送请求的url字符串
- data:可选的，发送给服务器的字符串或key/value键值对
- callback:可选的，请求成功后执行的回调函数
- dataType:可选的，从服务器返回的数据类型
到了这里，关于前端Jquery学习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
