jQuery学习笔记整理---02部分

目录

jQuery操作样式

       css操作样式

     class操作样式

 jQuery操作属性

      attr操作属性

       prop操作属性

jQuery动画

 jQuery操作节点

---

 

jQuery操作样式

       css操作样式

css(name, value)
修改单个样式
name:样式名 value:样式值

$("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");

css(obj)
修改多个样式 

$("li").css({
      "backgroundColor":"pink",
      "color": "red",
      "font-size":"32px",
      "border": "1px solid black"
    });

获取样式
css(name)
name:想要获取的样式

 

     class操作样式

 addClass(name):添加类
removeClass(name):移除类
hasClass(name):判断类
toggleClass(name):切换类

 jQuery操作属性

      attr操作属性

​
//设置单个属性
    attr(name, value)
// 设置多个属性
$("img").attr({
      alt:"图破了",
      title:"图片",
      aa:"bb"
    })

​//移除某个属性
removeAttr(name)

       prop操作属性

//对于布尔类型的属性，disabled，selected，checked，不要用attr方法，应该用prop方法 prop用法跟attr方法一样。 

$(function () {
    $("input").eq(0).click(function () {
      $("#ck").prop("checked", true);
    });
  
    $("input").eq(1).click(function () {
      $("#ck").prop("checked", false);
    });
  });

 

jQuery动画

三组基础动画

show/hide   slideDown/slideUp/slideToggle  fadeIn/fadeOut/fadeToggle

自定义动画

animate(prop, [speed], [swing/linear], [callback])

停止动画

.stop();

 jQuery操作节点

创建节点:  $("<span></span>")

添加节点   append appendTo prepend prependTo after before

//添加到子元素的最后面
    $("div").append($("p"));
    $("p").appendTo($("div"));
 //添加到子元素的最前面 
    $("div").prepend($("p"));
    $("p").prependTo($("div"));
    
   $('div').after($("p"));
   $('div').before($("p"));

节点的清空、移除与克隆 

//清空内容  
$("div").empty();


//删除节点   
$("div").remove();

//克隆节点   clone
//false:不传参数也是深度复制,不会复制事件
//true:也是深复制，会复制事件
$(".des").clone(true).appendTo("div");