jQuery基础（二）

A cold winter

于 2018-11-02 17:41:02 发布

阅读量87

点赞数

分类专栏： jQuery 文章标签：基础

本文链接：https://blog.csdn.net/qq_41611820/article/details/83624455

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery动画
jQuery animate() 方法允许您创建自定义的动画。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称.
可以操作多个属性:

$("div").animate({         
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
  也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例:
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=50px',
    width:'+=50px'
  });
});

甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle";

//使用队列功能
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery停止动画;
$(selector).stop(stopAll,goToEnd);
//stopAll,goToEnd布尔类型

jQuery支持链式写法

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

使操作变得很方便(ol:有序列表；ul:无序列表)
二：jQuery HTML
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值
attr() 方法也允许您同时设置多个属性。

在这里插入代码片

append() - 在被选元素的结尾插入内容(插入子节点)
prepend() - 在被选元素的开头插入内容(插入子节点)
after() - 在被选元素之后插入内容(插入相邻节点)
before() - 在被选元素之前插入内容(插入相邻节点)
jQuery - 删除元素
jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。
remove()方法可以带参数,允许您对被删元素进行过滤,该参数可以是任何 jQuery 选择器的语法。例：删除 class=“italic” 的所有 p 元素：
$(“p”).remove(".italic");
jQuery - 获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性