前言

        在JQuery第一天讲的知识非常的简单,只是介绍了一下并没有多大的实用性.第二天就不一样了.

---

开搞

1.jq操作样式

1.1css操作

//修改单个样式
$("li")
        .css("name","value")
        .css("name","value")
        .css("name","value");

//修改多个样式 传对象
$("li").css({ 
    name:"value",
    color:"red",
    fontSize:"25px"
})             

//获取样式
 $("li").css("name");

隐式迭代:

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

1.2class操作

//添加一个类
$("li").addClass(basic);

//移除一个类
$("li").removeClass(basic);

判断类
$("li").hasClass(basic);

//切换类(有就移除,没就加上)
$("li").toggleClass(basic);

/*if($("li").has(basic)){
    
    $("li").removeClass(basic);
    
}else{
    
  $("li").addClass(basic);
  
}*/

2.属性操作

//style中的是样式,用css操作
//标签里面写的是属性,用attr方法操作

//设置单个属性
$("img).attr("alt" , "突破了");

//设置多个属性
$("img).attr({
        alt:"突破了",
        title:"图",
        aa:"自定义属性"
});

//获取属性
$("img").attr("alt");

3.prop方法

对于boolean 类型的属性不要用attr,必须用prop
用法和attr方法一样

$("img").prop("checked",true);

$("img").removeAtter("checked");//移除某个属性

4.三组基本动画和自定义动画

//show 显示  hide 隐藏
$("div").show();//不传参数,没有动画效果
$("div").show(1000);
                    //可以传一个参数,
                    //参数为 1.speed:动画持续的时间  
                    //2.固定字符串:fast 200, normal 400,slow 600   

//slide 滑动
$("div").slideDown();//向下滑,不传参,默认值为normal 
$("div").slideDown(1000function(){});//传的值是速度

$("div").slideUp();//向上滑
$("div").slideToggle();//切换

//fadeOut淡出,fadeIn淡入
$("div").fadeOut(1000);
$("div").fadeIn(1000);
$("div").fadeToggle();

//animate 自定义动画 
                //参数一:距左800
$("li").animate(    {   letf:800  },8000,"swing",function(){
    
    }  );
    //第一个参数:对象,里面可以传需要动画的样式
    //第二个参数speed,动画执行的时间
    //第三个参数动画的执行效果 "swing"时快时慢 "linear"匀速
    //第四参数是一个回调函数

5.stop的使用

//停止当前正在进行的动画

$("li").stop().slideUp();
$("li").stop().slideDown();
//不能在后面加,这是用来停止前面的动画的

//两个参数:
    //clearQueue:是否清除动画队列 true  false 
    //jumpToEnd:是否跳转到当前动画的最终效果   true  false
$("li").stop(true,false);
       
$("li").stop(false,false);就是$("li").stop();    

6.插入音乐和视频

//音频标签
<audio src="路径" controls="controls"></audio>

//让对应音乐播放
var  d = $(this).index(); 
$("audio").get(d).load();
$("audio").get(d).play();
        //jq没有对音频封装不能用.eq(),只能用.get()
        //play()就是播放   .load()是重新加载

//视频标签
<video src="路径" controls="播放" autoplay="自动播放" loop"循环播放"  width"宽度" ></video>

7.节点

//创建节点与添加节点
//演示对象
$("标签名").append('<a href="" target="-blank">传智播客</a>')


//创建对象 
var k = $('<a href="" target="-blank">传智播客</a>');
 $("div").append(k);//创建成功


//创建节点
<p>创建节点</p>
//添加到子元素的最后
$("div").append($("p"));


//和append很像,插入到哪里
$("p").appendTo($("div"));

//添加到子元素的最后
$("div").prepend($("p"));
$("div").prependTo($("p"));

//作为兄弟元素插入到前面before,后面after


//清空和删除节点
$("div").html("");
//html用法和innerHtml用法一样但最好不要用,因为会发生内存泄漏


$("div").empty();//清空,清理门户,自己还留
$("div").remove();//全删了


//克隆
$("div").clone(false);
//传false或不传:都是深复制,不复制事件 
//传true:是深复制,复制事件
//深复制:把内容都复制了.不支持浅复制