jQuery杂记

最新推荐文章于 2020-09-21 19:50:14 发布

原创最新推荐文章于 2020-09-21 19:50:14 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

显示和隐藏

$(selector).hide();//默认效果
$(selector).hide(1000,callback);//selector选择器$(selector).show(1000,callback);//callback执行完后的回调函数
$(selector).hide("flip-rx");//flip-rx动画效果
$("p").toggle();//显示隐藏的元素并隐藏显示的元素，其可用参数和hide一样


fadeIn();//淡入
fadeOut();//淡出
fadeToggle();淡入淡出交换
fadeTo();参数可以指定一个透明度

滑动

slideDown();
slideUp();
slideToggle();//以上的三种slide和hide的可用参数类似


animate()，默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
$("div").animate({left:'100px'});//滑动到距离左侧100px为止，这个div需要开启position
//同时操作多个值
$("div").animate({
    left:'100px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });

//使用相对值
$("div").animate({
    left:'100px',
    opacity:'-=0.5',
    height:'+=150px',
    width:'+=150px'
  });

//也可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("div").animate({
    width:'toggle'//控制宽的打开关闭，高和其它元素状态不变
  });

//队列，也就是挨着写多个animate，代码在执行时，会一个一个执行，第一个动画效果走完后，会再执行下一个动画效果，直到走完所有为止
var div=$("div")
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");

...
//动画停止
$("div").stop();//停止
$("div").stop(true);//停止队列中当前的动画
$("div").stop(true,true);//停止所有动画，并执行到最后

$("div").stop(stopAll,goToEnd);//参数1：是否停止所有的，参数2：直接跳到最后。默认false可选 

获取内容和属性

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

attr() - 方法用于获取属性值

设置内容和属性

text("需要设置的内容")//html,val,attr 都是上边一样

$("p").text(function(i,texta){//这个是带参数的设置内容，参数1：被选元素在当前列表中的下标，参数2：被选元素的文本内容
   return i+texta;
});

$("a").attr("href",function(i,texta){//参数1：要设置的属性，参数2：回调同上
   return texta+i;
})

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

添加样式

.blue{
	color: blue;
}
.pp{
	font-size: 50px;
}
$("p").addClass("blue pp")
$("div").addClass("pp")

获取、设置样式

var a=$("p").css("color")//获取样式
$("p").css("color","#0000FF")//设置样式
$("p").css({"color":"#0000FF","fontSize":"100px"})//设置多个样式

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
例：

$("#d1").remove();//删除id为d1的所有元素及其子元素

$("p").remove(".d2");//删除id为d2的所有p元素

遍历

parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

$("span").parents("ul");//在父元素中搜索ul的元素

$("span").parentsUntil("div");//返回自身和最近的div父元素之间的所有元素

children() 方法返回被选元素的所有直接子元素。

$("div").children("p.1");//返回div的子元素中类为1的p元素

$("div").find("span");//返回被选元素的后代元素，一路向下直到最后一个后代元素

$("div").find("*");//返回所有子元素

过滤

$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素
          .last();//选择最后一个 <div> 元素中的最后一个 <p> 元素 
          .eq(1);//返回被选元素中带有指定索引号的元素，参数是下标索引从0开始的

$("p").filter(".intro");//返回所有类名为intro的p元素

$("p").not(".intro");//反向的，这是返回所有类名不为intro的p元素

一个不错的文档手册 jQuery在线手册

---