jQuery是JS的函数库,"量少功能多",可以进行HTML元素选取、操作,CSS操作,HTML事件处理函数,JS特效、动画,DOM遍历、修改,AJAX异步请求等等功能。
使用:jQuery是JS的函数库,需要在<script></script>内部引用它,如果下载了可以直接引用 src="jquery-1.10.2.min.js"
如果没有下载jQuery,可以通过CDN(content delivery network)引用 获取jQuery版本
百度的CDN:src="https:apps.bdimg.com.libs/jquery/2.1.4/jquery.min.js"
jQuery语法 $(selector).action(): $符号用于定义jQuery selector是选择符(选择html元素)action是对元素要执行的动作|事件
如 $("p").hide() 隐藏所有<p>的元素 $(this).hide() 隐藏当前的元素
selector(选择器): 均以$()开头
$("element")选取所有html元素
$("#id")为id选择器,选择id相同的所有元素
$(".class")为class选择器,选择class相同的所有元素
jQury事件
一般来说使用$(document).ready()允许在文档全部加载完全后执行对应的函数,一般使用js匿名函数的形式
$(document).ready(function(){
//jQuery code to be executed
});
常见事件: click(0 dbclick() mouseenter() mouseleave() mousedown() mouseup() //->鼠标的事件
hover(fun1,fun2)//enter和leave的结合,需要两个函数动作参数
focus()//获取焦点 鼠标点击或者tab移动到元素 blur()//失去焦点 submit()//提交 change()//改变 --->表单的事件
load() resize() scoll() unload() //----->window dom的事件
keypress() keydown() keyup() //------->键盘的事件
jQuery效果
show() hide() 动作
$(selector).(hide|show)([speed[,function]]) //function是隐藏或者显示之后执行的函数动作
$("hideBtn").click(function(){
$("#texttobehide").hide(1000,function(){
window.alert("text has been hiden");
});
});
hide一般和show成对出现 使用toggle()方法来切换hide()和show()方法 参数
淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo()
fade(In|Out)([speed[,function]]):淡入已经隐藏的元素|淡出可见的元素
同hide/show 淡入淡出也可以切换 fadeToggle([speed[,function]]);
fadeTo(speed,opacity[,function])方法 // opacity不透明度 将元素渐变为给定的不透明度
滑动:(元素上下滑动) slideDown() slideUp() slideToggle()
使用方法完全同hide show
动画:(允许自定义动画) animate()
$(selector).animate({cssParams}[,speed,function]) //注意html元素默认是无法移动的 故而元素css属性要设置position的值
//animate()操控css属性的时候 要用驼峰命名 如: margin-left属性要使用marginLeft
$("btnChangeCss").click(function(){
$("#changeDiv").animate({
left:'100px',
opacity:'0.8',
height:'+=100px',//animate可以使用-= +=做相对值
width:'toggle'});//animate使用预定义的值 show | hide | toggle
});
animate()可以使用相对值(使用-= +=) 还能使用预定义的值 如上
animate()动画队列 可以使指定的元素 依次执行动画
停止动画:stop()
以上各方法的可选函数function都是在动画100%执行完之后执行的函数--->callback
链Chaining:允许在相同的元素上执行多条jQUery指令(方法或者动作),顺序执行
$(selector)(.action())+
jQuery DOM 获取/设置内容和属性
text() //获取/设置文本内容
html() //获取/设置元素内容 含标记
val()//获取表单字段的值
attr("attr")//获取属性的值
$("btn").click(function(){
window.alert('text'+ $("#txt").text());//改为val获取输入字段的值
});
(text|html|val)("content"[,callbackfun])//设置元素的值 可以设置回调函数 设置完毕后调用
attr("attr","newAttrToReplaceTheOld");//第二个参数是新的属性值 替换原来的属性值
attr("attr",function(i,oriValue){ return ...})//回调函数: 第一个参数是元素在元素列表的下标 oriValue是原先的值
添加元素/内容 :
元素的内部添加 : append() //末尾添加 prepend()//开头添加
元素前后添加 : before() after()
各方法的参数都可以任意个数
function test(){
var append1 = "<h1>node append</p>";
var prepend1 = "<b>prepend</b>";
$("#test").append(append1).prepend(prepend1).after("text behind element").before("text ahead");
}
删除元素/内容:
remove([过滤参数]) 删除(匹配参数的)元素 以及子元素 empty() 删除元素的子元素
$("body").remove("#test")//删除body标签内部 id为test的元素
jQuery操作CSS,获取并设置CSS
addClass("classes") removeClass("class") toggleClass("class") css()
一般已经定义了css样式表 可以使用这几种方法增删class属性
字符串参数内部可以使用空格分割 可以添加多个class $("p").addClass("css1 css2");
css("propertyName"[,"value"]);//获取css属性的值 第二个参数使用 用于设置属性的值
可以使用js对象的格式{("properName":"value")[,"properName":"value"]?} 用于对一个元素的多个CSS属性进行设置
$("p").css({"color":"red","font-size":"100px"});;
尺寸:宽度和高度 X --> Height/Width
padding: 内边距 border:边框 margin:外边距
X()为元素实际的宽高 innerX() 算上内边距的宽高 outerX()算上内边距边框的宽高 outerX(true)算上所有的宽高
jQuery 遍历: (例子 div元素里有 ol ul 等元素-->展开元素形成树的格式 div是根节点父元素)
parent(); 返回直接父亲元素 parents([指定父元素]) 返回所有祖先元素 可以设置参数指定父元素
parentUntil("ele") 返回两个元素之间的所有指定元素 $("span").parentUntil("div"); 获取span和div元素之间的所有祖先元素
children() 获取所有直接子元素 find("childEle")获取所有指定匹配的子元素
siblings() 所有兄弟元素
next() 被选元素的下一个兄弟元素 nextAll()后面的所有兄弟元素 nextUntil("arg")返回两兄弟元素之间所有的兄弟元素
prev和next相反 prev() prevAll() prevUntil()
过滤: first() last() //被选元素中第一个/最后一个元素
eq(index)//获取被选元素中索引号指定的元素
$("div p").firt();
$("div p").last;
$("h1").eq(0);//index从0开始
filter("arg") not("arg")// 获取匹配的元素 not获取不匹配的所有元素
$("div").filter(".text");//获取div元素内所有class为text的元素
jQuery && AJAX
AJAX是异步加载的重要方法 可以不重新加载全部页面的情况下 实现对指定部位地方进行修改的技术 一般初始化网页也可以进行AJAX加载 实现高效加载
$(selector).load(url[,data[,callbackFunction]])
url指定要异步加载的url data指定要与请求一同发送的字符串key/value对的集合 fun为回调函数
load的回调函数 function(responseTxt,statusTxt,xhr)//分别为 成功调用的结果 调用的状态 XMLHttpRequest对象
AJAX的 post() 和 get() 方法
GET: 从服务器获取数据 一般可能会获取缓存的数据
POST:也是从服务器中获取数据 但是不会缓存数据 通常同请求一起发送数据
语法格式
$.get(url,callbackFunction)
$.post(url,data,callbackFunction) data为连同请求一同发送的数据
function(data,status): data为返回的数据 status为状态