css样式操作：
1、设置单个样式: css(name, value)
2、设置多个样式:css(obj)
3、获取样式:css(name)
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title></head><body><ul><li>高圆圆</li><li>周二珂</li><li>冯提莫</li><li>郑爽</li></ul><script src="jquery-1.12.4.js"></script><script>$(function () {//css(name, value)//修改单个样式//name:样式名 value:样式值/*$("li").css("backgroundColor", "pink").css("color", "red").css("fontSize", "32px");*///css(obj)//修改多个样式/*$("li").css({backgroundColor:"pink",color: "red",fontSize:"32px",border: "1px solid black"});*///获取样式//css(name)//name:想要获取的样式 $("li").eq(0).css("fontSize", "20px");$("li").eq(1).css("fontSize", "21px");$("li").eq(2).css("fontSize", "22px");$("li").eq(3).css("fontSize", "23px");//A:20 b:21 c:22 d:23 e:16 f:[20, 21, 22, 23]//隐式迭代：// 设置操作的时候：会给jq内部的所有对象都设置上相同的值。// 获取的时候：只会返回第一个元素对应的值。 console.log($("li").css("fontSize"));//16px });</script></body></html>
class样式操作：
1、添加类
addClass（name）
2、移除类
removeClass(name)
3、判断类
hasClass(name)
4、切换
toggleClass(name)
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>li.basic {background-color: pink;font-size: 32px;color: red;}.bigger {font-size: 40px;}</style></head><body><input type="button" value="添加basic类" ><input type="button" value="添加bigger类"><input type="button" value="移除bigger类"><input type="button" value="判断bigger类"><input type="button" value="切换类"><ul><li class="aa bb cc dd">1</li><li class="aa bb cc dd">2</li><li class="aa bb cc dd">3</li><li class="aa bb cc dd">4</li></ul><script src="jquery-1.12.4.js"></script><script>$(function () {$("input").eq(0).click(function () {// 添加一个类$("li").addClass("basic");});$("input").eq(1).click(function () {$("li").addClass("bigger");});$("input").eq(2).click(function () {//移除一个类$("li").removeClass("bigger");});//判断类 $("input").eq(3).click(function () {//移除一个类console.log($("li").hasClass("bigger"));;});$("input").eq(4).click(function () {//判断li有没有basic类，如果有，就移除他，如果没有，添加他//toggle$("li").toggleClass("basic");});});</script></body></html>
操作属性
1、attr
设置单个属性
设置多个属性
获取属性
2、prop
对于布尔类型的属性：disabled，selected，checked，只能用prop
3、移除某个属性
removeAttr(name)
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title></head><body><!--样式：在style里面写的，用css来操作。--><!--属性：在里面里面写的，用attr方法操作。--><img src="04.gif" alt="突破了" title="对对对"><script src="jquery-1.12.4.js"></script><script>$(function () {//用法和css一样//设置单个属性//attr(name, value)//$("img").attr("alt", "图破了");//$("img").attr("title", "错错错错");//设置多个属性/*$("img").attr({alt:"图破了",title:"错错错",aa:"bb"})*/console.log($("img").attr("alt"));});</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="button" value="选中"><input type="button" value="不选中"><input type="checkbox" id="ck"><script src="jquery-1.12.4.js"></script><script>//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。 $(function () {$("input").eq(0).click(function () {$("#ck").prop("checked", true);});$("input").eq(1).click(function () {$("#ck").prop("checked", false);});});</script></body></html>
动画
1、三组基本动画
show/hideslideDown/slideUp/slideTogglefadeIn/fadeOut/fadeToggle
2、自定义动画
animate(prop, [speed], [swing/linear], [callback])
3、停止动画
stop
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 400px;height: 400px;background-color: pink;display: none;}</style></head><body><input type="button" value="显示"><input type="button" value="隐藏"><div></div><script src="jquery-1.12.4.js"></script><script>$(function () {$("input").eq(0).click(function () {//show不传参数，没有动画效果//$("div").show();//show(speed)//speed:动画的持续时间 可以是毫秒值 还可以是固定字符串//fast:200ms normal:400ms slow:600//$("div").show("ddd");// show([speed], [callback])$("div").show(1000, function () {console.log("哈哈，动画执行完成啦");})});$("input").eq(1).click(function () {$("div").hide();})});</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: pink;position: absolute;}#box2 {background-color: blue;margin-top: 150px;}#box3 {background-color: yellowgreen;margin-top: 300px;}</style></head><body><input type="button" value="开始"><input type="button" value="结束"><div id="box1"></div><div id="box2"></div><div id="box3"></div><script src="jquery-1.12.4.js"></script><script>$(function () {$("input").eq(0).click(function () {//第一个参数：对象，里面可以传需要动画的样式//第二个参数：speed 动画的执行时间//第三个参数：动画的执行效果//第四个参数：回调函数$("#box1").animate({left:800}, 8000);//swing:秋千 摇摆$("#box2").animate({left:800}, 8000, "swing");//linear:线性 匀速$("#box3").animate({left:800}, 8000, "linear", function () {console.log("hahaha");});})});</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: pink;position: absolute;}</style></head><body><input type="button" value="按钮" id="btn"><div></div><script src="jquery-1.12.4.js"></script><script>$(function () {$("#btn").click(function () {//把这些动画存储到一个动画队列里面$("div").animate({left:800}).animate({top:400}).animate({width:300,height:300}).animate({top:0}).animate({left:0}).animate({width:100,height:100})})});</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 400px;height: 400px;background-color: pink;display: none;}</style></head><body><input type="button" value="开始"><input type="button" value="结束"><div></div><script src="jquery-1.12.4.js"></script><script>$(function () {$("input").eq(0).click(function () {$("div").slideDown(4000).slideUp(4000);});$("input").eq(1).click(function () {//stop:停止当前正在执行的动画//clearQueue:是否清除动画队列 true false//jumpToEnd:是否跳转到当前动画的最终效果 true false//.stop().animate();$("div").stop(true, true);})});</script></body></html>
操作节点：
1、创建节点：$("<span></span>")
2、添加节点: appendappendToprependprependToafterbefore
3、清空内容: empty
4、删除节点: remove
5、克隆节点: clone
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 400px;height: 400px;background-color: pink;}</style></head><body><!--<a href="" target="_blank">传智大前端</a>--><div id="box"></div><script src="jquery-1.12.4.js"></script><script>$(function () {// var box = document.getElementById("box");//// var a = document.createElement("a");// box.appendChild(a);// a.setAttribute("href", "");// a.setAttribute("target", "_blank");// a.innerHTML = "传智大前端"; $("#box").append('<a href="" target="_blank">传智大前端</a>');});</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 400px;height: 400px;background-color: pink;}</style></head><body><div id="box">我是内容</div><p>我是外面的p元素</p><script src="jquery-1.12.4.js"></script><script>$(function () {// //创建jq对象// var $li = $('<a href="" target="_blank">传智大前端</a>');// console.log($li);////// $("div").append('<a href="" target="_blank">传智大前端</a>');//添加到子元素的最后面//$("div").append($("p"));//$("p").appendTo($("div"));//$("div").prepend($("p"));//$("p").prependTo($("div"));// $('div').after($("p"));// $('div').before($("p")); });</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 400px;height: 400px;background-color: pink;}</style></head><body><div><p>1111</p><p>2222</p></div><p class='des'>我是外面的p元素</p><script src="jquery-1.12.4.js"></script><script>$(function () {$(".des").click(function () {alert("hehe");})//可以清空一个元素的内容//内存泄露：//$("div").html("");//清理门户（）//$("div").empty();// //$("div").remove();//false:不传参数也是深度复制,不会复制事件//true:也是深复制，会复制事件 $(".des").clone(true).appendTo("div");});</script></body></html>
