second jq

css操作 css(“name”,“vlaue”)

修改多个样式

css({

“name”,“vlaue”,

“name”,“vlaue”

}) 以对象的方式传入

获取样式

#####隐式迭代：

​ // 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
// 获取的时候：只会返回第一个元素对应的值。

$(“li”).css(“fontSize”) 传入一个值就可以了

####class操作

addClass

removeClass

hasClass 是否拥有某个类

 //判断li有没有basic类，如果有，就移除他，如果没有，添加他

      //toggle

      $("li").toggleClass("basic");

toggle 有切换直接消失了

属性操作 attr 设置 或者获取某个属性

单个值 获取某个属性

操作标签里面的属性

attr(“name”,“value”)

也可以对象的形式 多个参数

美女相册案例

$(function () {
//1. 给所有的a注册点击事件

​

  $("#imagegallery a").click(function () {
    var href = $(this).attr("href");
    $("#image").attr("src", href);
    
    var title = $(this).attr("title");
    $("#des").text(title);
    
    return false;
  });
});

prop增加属性

对于布尔类型的属性，不要使用attr 应该使用prop

prop的方法根attr方法一样

布尔类型的有 checked selected disabled等

input:checked 获取表单被选中的

三组基本动画‘

两个参数 speed 和 callback

show hide

“fast” 200ms “normal” 400ms “slow” 600ms

slideUp sildeDown slideToggle()

滑动方式隐藏 滑动的方式显示

slideToggle() //如果是滑入状态，就执行滑出的动画，

fadeIn fadeOut fadeToggle

淡入 淡出

//如果是滑入状态，就执行滑出的动画，
$(‘div’).fadeToggle();

自定义动画 animate

//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数

$("#box3").animate({left: 800}, 800, "linear", function() {
                console.log("hah1");
   });

设置多个动画

$("div").animate({left: 500})
.animate({top: 400})
.animate({width: 600});

停止动画 stop

 //stop:停止当前正在执行的动画
 //clearQueue:是否清除动画队列 true  false
//jumpToEnd:是否跳转到当前动画的最终效果 true false

$("div").stop(true, false);

手风琴案例 使用animate

 $("li").mouseenter(function() {
            $(this).animate({
                width: 800
            }).siblings().animate({
                width: 100
            });
  })

防止一直动个不停

在执行动画前 先做一下停止

leg $(this).stop().animate();

音乐案例

audio标签 controls去掉就是隐藏

$("audio").get(index).play(); 音乐播放

创建节点

$("#box").append("<p>哈哈，牛逼了</p>");

####创建jq对象与添加节点

先创建jq对象
var $li = $('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
//    console.log($li);
//
插入到div种
$("div").append($li);

//添加到子元素的最后面 把已有的元素添加到div的最后面

 $("div").append($("p"));
 $("p").appendTo($("div"));

//添加到子元素的最前面

$("div").prepend($("p"));
$("p").prependTo($("div"));

插入到div的前面 或者后面

$('div').after($("p"));
$('div').before($("p"));

微博发布案例

var span = $("<span></span>").text(val);
console.log(span);
$("#ul").append(span);

或
$("#ul").append($("<span></span>").text(val));

####清空节点与删除

$("div").html("");
缺点  会导致内存泄漏

$("div").empty();
建议使用这种  

#####删除元素

$("div").remove();

复制

clone false 不传参数也是深度复制，但是不会复制事件

​ true 也是深度复制 会复制事件

$(".des").clone(true).appendTo("div");

弹幕效果

.css(“left”, “2000px”)这边加入px 不然没效果

想要操作位置 需要 css 一步一步设计

$("<span></span>")
            .text($("#text").val())
            .css("color", colors[randomColor])
            .css("left", "2000px")
            .css("top", randomY)
            .animate({
                left: -500
            }, 10000, "linear", function() {
                $(this).remove();
            }).appendTo("#boxDom");
$("#text").val("");

设置琼安茹回车键 13 发表并清空内容

思路就是 为这个文本框注册 鼠标抬起事件 需要传入参数e

判断 当e.keyCode==13 调用 点击事件 就可以了

移除某个属性

removeAttr(name) 移除某个属性

轮播图 做一下