个人笔记:没怎么用过的jQuery基础

177 阅读2分钟

工作中用了jQuery,但是只用了一点点,还有好多没用到,有好多基础都忘了,现简单复习下。。

显示/隐藏

$("div").hide(1000,"linear",function(){}) //隐藏div

第一个参数,设置消失的时间(可选)
第二个参数,过渡效果,过渡效果有slowfastnormal(可选)
第三个参数,隐藏完成后执行的函数(可选)

$("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);
});