一:jQuery简介及语法
1、认识jQuery:
①jQuery:jQuery库可以通过一行简单的标记被添加到网页中。
②jQuery是一个JavaScript函数库。
③jQuery库包含的功能:HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画
HTML DOM遍历和修改、AJAX 、Utilities
2、引入jQuery:
①从jquery.com下载jquery库。
②从CDN中载入jquery,例如从百度服务器中加载jquery:http://libs.baidu./jquery/1.10.2/jquery.min.js
③版本介绍:v1.x支持IE6+,v2.x支持IE9+(版本自己查找最新版本即可)
3、jQuery语法:
基础语法:$(selector).action()
解析:美元符号定义jQuery,选择符(selector)"查询"和"查找"HTML元素,action()执行对元素的操作
例如:$(this).hide();--隐藏当前元素,$("p").hide();--隐藏所有段落。
声明jQuery:$(document).ready(function(){
});
二:jQuery选择器和事件
1、jQuery选择器:常用的id、class和Element跟CSS一样、其他的查看API文档。
2、常用事件方法:点击事件、双击事件、鼠标移开、获取焦点.......
3、绑定事件(.bind)/解除绑定事件(.unbind):版本1.7以后用on/off代替了他俩
4、事件的目标和冒泡:
5、自定义事件:
三:jQuery HTML之捕获、设置元素,添加、删除元素
1、捕获常用方法:text()只能获取元素内容 ; html()也可以获取元素内容,还包括子标签;val()可以获取输入框的值;attr()获取元素具体属性值;等等
2、设置常用方法:text("修改的内容")方法来修改;html(可以在元素内新增加标签)方法来修改标签;
val()修改输入框值;attr()修改元素具体属性值;等等
备注:回调方式,传递一个function,里面有两个参数,第一个为当前元素的下标,第二个位当前要修改的内容。
例如:$("#btn").text(function(i ,ot){
return "old"+ot +" new:这是新的内容"+(i) ;
});
3、添加元素常用方法:append()在被选中元素的结尾插入内容;prepend()在被选中元素的开头来插入内容;
before也是在被选中元素之前插入内容;after()在被选中元素之后插入内容;(备注:before和after是换行插入)
添加元素常见三种方式:
html添加方式:var text1 = "<p>Hello</p>";
jQuery添加方式:var text2 =$("<p></p>").text("Word");
JS(DOM)添加方式:var text3 = document.createElement("p");
text3 .innerHTML="Hello Word";
$("body").append(text1,text2,text3);
4、删除元素常用方法:remove()全部删除;empty()删除里面的子元素;
四:jQuery效果之隐藏显示,淡入淡出,滑动,回调
1、隐藏与显示:hide():隐藏,可以添加参数时间的设置;show():显示,也可以添加参数来限定时间;
toggle():绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。v1.9被移除
2、淡入与淡出:fadeIn()淡出fadeOut()淡入fadeTo()设置透明度的效果;fadeToggle():切换,其实就是一个按钮实现两个效果。
3、滑动:slideDown()滑动出现;slideUp()滑动隐藏;slideToggle()
4、回调:就是在动画执行完后再执行调用的方法的意思。
例如:$("button").click(function(){
$("p").hide(1000,function(){
alter("动画结束后调用这个方法-----回调");
});
});
五:jQuery AJAX之异步访问和加载片段
1、ajax异步访问、更改数据而不刷新页面(可以在网上查看资料、还有php里的写法)
2、加载片段》》》》》详情上网查看案例