JQuery:
jquer:是 js 框架,它封装了 js 的操作,可以更加简单操作DOM ,事件,css,ajax交互
JQuery的使用:
JQuery是第三方框架,使用时引入到当前项目。
1.首先将JQuery.js复制粘贴到项目的 js 文件夹下
2.在需要使用 JQuery 的页面中引用 JQuery.js
语法格式:
选择器语法格式:
$("选择器").事件函数 //选择器:标签名,#id,.class
常见 事件:
click | keypress | submit | load |
---|---|---|---|
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
事件的方法语法:
$("选择器").事件(响应函数(){ //事件触发后执行的代码 })
页面加载事件:
用ready()函数。
$(document).ready(function(){ $("#id").click(function(){ console.log("事件的反应") }) }) //简写 $(function(){ $("#id").click(function(){ console.log("事件的反应") }) })
JQuery的效果:
hide():隐藏
show():显示
fadeIn(速度,回调函数):淡入
fadeOut(速度,回调函数):淡出
fadeToggle():切换
slideDown():向下滑入
slideUp():向上滑出
slideToggle():切换
速度:指的是多长时间完成这个动作单位是毫秒
回调函数:指的是动作完成后触发的函数
动画语法格式:
对象.animate(参数1,参数2,参数3) /*参数1,是指定css属性,用{} 参数2,是多长时间完成效果 参数3,是回调函数, */
注意:有些css属性,例如margin-left,需要写成marginLeft
jQuery特点
具有独特的链式语法。
支持高效灵活的CSS选择器。 div.style.color =
拥有丰富的插件。
兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。