工作中用了jQuery,但是只用了一点点,还有好多没用到,有好多基础都忘了,现简单复习下。。
显示/隐藏
$("div").hide(1000,"linear",function(){}) //隐藏div
第一个参数,设置消失的时间(可选)
第二个参数,过渡效果,过渡效果有slow
、fast
、normal
(可选)
第三个参数,隐藏完成后执行的函数(可选)
$("div").show(1000,"linear",function(){}) //显示div
参数与hide()
一样
$("div").toggle(1000,function(){}) //切换div的显示隐藏
参数和hide()
一样
淡入/淡出
淡入淡出与显示隐藏的效果类似
$("div").fadeIn(1000,function(){}) //淡入已隐藏的div
第一个参数,淡入的时间(可选)
第二个参数,淡入完成后执行的函数(可选)
$("div").fadeOut(1000,function(){}) //淡出可见的div
参数和fadeIn()
一样
$("div").fadeToggle(1000,function(){}) //切换fadeIn()和fadeOut()
参数和fadeIn()
一样
$("div").fadeTo(1000,0.5,function(){}) //给div设置具有不透明度的渐变
第一个参数,渐变的时间(必需)
第二个参数,不透明度,介于0~1之间(必需)
第三个参数,完成渐变后执行的函数(可选)
滑动
滑动的效果和渐入渐出类似
$("div").slideDown(1000,function(){}) //向下滑动div
第一个参数,滑动的时长(可选)
第二个参数,滑动效果完成后执行的函数(可选)
$("div").slideUp(1000,function(){}) //向上滑动div
参数与slideDown()
一样
$("div").slideToggle(1000,function(){}) //切换slideDown()和slideUp()
参数与slideDown()
一样
动画
$("div").animate({xxx},1000,function(){}) //自定义动画
第一个参数,多个css属性的合集(必需)
注:一些css属性要用驼峰写法,如{paddingLeft : "10px"}
第二个参数,动画时长(可选)
第三个参数,动画完成后执行的函数(可选)
$("div").stop(false,false) //停止动画或效果,在它们完成前
第一个参数,是否清除动画队列,默认false,即停止活动的动画,允许任何排入队列的动画向后执行(可选)
第二个参数,是否立即完成当前动画,默认false(可选)
方法链
jQuery可以写成下面的形式,以滑动为例
$("div").css("color","red").slideUp(1000).slideDown(1000) //实现红色div向上向下滑动效果
优点:这样写的话,浏览器就不用多次查找相同的元素
注意: 上面所有方法中的参数1000表示毫秒数,除此之外还可以设置 "slow"和 "fast"
添加class/删除class
$("div").addClass("demo") //在div添加class的值demo
$("div").removeClass("demo") //在div删除class的值demo
$("div").toggleClass("demo") //在div上添加/删除指定的class值demo
添加元素/删除元素
$("p").append("追加文本") //在p元素内部末尾添加
$("p").prepend("在开头追加文本") //在p元素内部开头添加
$("img").after("在后面添加文本") //在img元素的后面添加
$("img").before("在前面添加文本") //在img元素前面添加
$("div").remove() //刪除div及其子元素
$("div").remove(".italic") //刪除含有class="italic"的所有div元素
$("div").empty() //刪除div中的子元素
尺寸
$("div").width() //设置或返回div的宽度(不包含内边距、边框、外边距)
$("div").height() //设置或返回div的高度(不包含内边距、边框、外边距)
$("div").innerWidth() //返回div的宽度(包含内边距)
$("div").innerHeight() //返回div的高度(包含内边距)
$("div").outerWidth() //返回div的宽度(包含内边距、边框)
$("div").outerHeight() //返回div的高度(包含内边距、边框)
祖先
$("div").parent() //返回父元素
$("div").parents() //返回所有的祖先元素
$("div").parents("ul") //返回所有祖先元素中的ul元素
$("div").parentsUntil("span") //返回div与span之间的所有元素
后代
$("div").children() //返回div中所有直接子元素
$("div").children("p") //返回div中所有p元素
$("div").find("span") //返回div后代中所有的span元素
$("div").find("*") //返回div所有的后代元素
同胞
$("div").siblings() //返回div的所有同胞元素
$("div").siblings("p") //返回div的所有同胞的p元素
$("div").next() //返回div的下一个同胞元素
$("div").nextAll() //返回div后面跟随的所有同胞元素
$("h2").nextUntil("h6") //返回h2到h6之间的所有同胞元素
同理,prev()
,prevAll()
,prevUntil()
于上面相似,返回的是被选中元素之前的同胞元素
过滤
$("xxx").first() //返回被选中的首个元素
$("xxx").last() //返回被选中的最后一个元素
$("p").eq(1) //返回索引号为1的p元素,即第二个p元素
$("p").filter(".url") //返回p标签中含有class为url的元素
$("p").not(".url") //返回除了含有class="url"之外的p标签
Ajax中的load()
load()是直接在服务器加载数据,并把返回的数据放在被选的元素中。
$("div").load("demo.txt") //将demo.txt中的内容加载到div中
$("div").load("demo.txt #p1") //将demo.txt中id="p1"的元素内容加载到div中
$(select).load(url,data,callback)
第一个参数url
,访问的地址(必需)
第二个参数data
,请求的键值对(可选)
第三个参数callback
,load()方法完成后的回调(可选)
callback
函数中有三个参数,分别是responseTxt
,包含调用成功时的结果内容。statusTxt
,包含调用的状态。xhr
,包含 XMLHttpRequest 对象。
例如:
$("div").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});