（一）jQuery操作样式
css操作:
设置单个样式：css(属性，属性值)；----js通过style属性来设置样式
$("li")
.css("backgroundColor", "pink")
.css("fontWeight", "700")
.css("fontStyle", "italic");//设置多个样式：css({属性:属性值，属性2：属性值2})
$("li").css({
fontSize: "22px",
color: "red"
});//获取样式：css(属性名)$("li").eq(0).css("fontSize","33px");
$("li").eq(1).css("fontSize","40px");
$("li").eq(2).css("fontSize","50px");
$("li").eq(3).css("fontSize","63px");// 33px 40px 50px 63px 22px [ 33px 40px 50px 63px] 16px
//隐式迭代：
//设置操作的时候，会给jq内部的所有对象都设置相同的值
//获取的时候，只会返回第一个元素的值
console.log($("li").css("fontSize"));class操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.basic {
background-color: pink;
font-size: 32px;
color: red;
}
.bigger {
font-size: 66px;
}
</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="切换bigger类">
<ul>
<li class="a b c">杨幂</li>
<li class="a b c">唐嫣</li>
<li class="a b c">刘诗诗</li>
<li class="a b c">郑爽</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
// document.getElementsByTagName("input")[0].onclick = function () {
// var list = document.getElementsByTagName("li");
// for (var i = 0; i < list.length; i++) {
// list[i].className = "a b c basic";
// }
// }
//添加类名：addClass("类名")
//移出类名：removeClass("类名")
//判断是否存在这个类名：hasClass("类名")
//切换类：toggleClass("类名")
//添加basic类
$("input").eq(0).click(function () {
$("li").addClass("basic");
});
//添加bigger类
$("input").eq(1).click(function () {
$("li").addClass("bigger");
});
//移出bigger类
$("input").eq(2).click(function () {
$("li").removeClass("bigger");
})
//判断有没有bigger类
$("input").eq(3).click(function () {
console.log($("li").hasClass("bigger"));//如果有：返回true，反之，false
});
//切换bigger类
$("input").eq(4).click(function () {
//toggle:先判断有没有这个类，如果有就删除，如果没有就添加
$("li").toggleClass("bigger");
});
属性操作:
prop方法
对于布尔类型的属性，在jQuery1.6版本以后用attr方法就没有效果了，应该用prop方法 prop用法跟attr方法一样。
attr方法
功能：设置或修改样式，操作的是style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="images/1.jpg" alt="小姐姐" title="真好看" width="200">
<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1. attr(标签属性)------用法和css(样式属性)一样
//1.1 设置单个属性 attr("属性名","属性值")
// $("img").attr("alt","今天你认真听讲了吗");
//1.2 设置多个属性 attr({"属性1,":"属性值1","属性2,":"属性值2"})
$("img").attr({
alt: "燃烧我的卡路里",
title: "拜拜甜甜圈",
score: "100分"
});
//1.3 获取属性 attr("属性名"),返回字符串
console.log($("img").attr("title"));
//prop()---------对于bool类型的属性，不要用attr方法，用prop，
// 因为：在jQuery1.6版本以后用attr方法就没有效果了，prop方法用法同attr（）
//bool类型的属性： checked selected
$("input").eq(0).click(function () {
$("#ck").prop("checked", true);
});
$("input").eq(1).click(function () {
// $("#ck").prop("checked",false);
console.log($("#ck").prop("checked"));;
});
});
</script>
</body>
</html>
prop方法
对于布尔类型的属性，在jQuery1.6版本以后用attr方法就没有效果了，应该用prop方法 prop用法跟attr方法一样。
设置属性
$("#ck").prop("checked", true);
获取属性
$("#ck").prop("checked");
jQuery动画
jQuery提供了三组基本动画，这些动画都是标准的，有规律的效果，jQuery还提供了自定义动画的功能
（1）三组基本动画
显示（show）与隐藏（hide）是一组动画，
滑入（slideDown）和滑出（slideUp）与切换（slideToggle），效果与卷帘门类似
淡入（fadeIn）和淡出（fadeOut）与切换（fadeToggle），
三组方法效果类似，以show为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换显示与隐藏">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
// //第一组：show()和hide():从左上角到右下角的一个过程
// //1. 不传入参数：没有动画效果
// //2. 传入一个参数：show(speed)
// // speed:动画持续的时间，可以毫秒值，也可以是固定字符串
// // fast:200ms normal:400ms slow:600ms
// //3. 传入两个参数： show（[speed]，[callback]）
// // callback:动画成功后的回调函数
// $("input").eq(0).click(function () {
//
// // $("div").show();//没有动画效果
//
// // $("div").show("hello");//如果乱写了一个字符串，也可以执行动画效果：效果同normal
//
// $("div").show(1000, function () {
// console.log("生活就像一个甜甜圈");
// })
// })
// $("input").eq(1).click(function () {
// $("div").hide(1000);
// })
// // 第二组：slideUp()和slideDown()和slideToggle------滑入滑出，类似卷帘门：从上往下的一个过程
// // 1. 不传入参数：也有动画的效果，有一个默认的normal
// //2. 传入一个参数：slideDown(speed)
// // speed:动画持续的时间，可以毫秒值，也可以是固定字符串
// // fast:200ms normal:400ms slow:600ms
// //3. 传入两个参数： slideDown（[speed]，[callback]）
// // callback:动画成功后的回调函数
// $("input").eq(0).click(function () {
// // $("div").slideDown();
// // $("div").slideDown(2000);
// // $("div").slideDown("fast");
//
// $("div").slideDown(1000, function () {
// console.log("生活就像一个甜甜圈");
// })
// });
// $("input").eq(1).click(function () {
// $("div").slideUp();
// });
// //切换
// $("input").eq(2).click(function () {
// $("div").slideToggle(2000);
// });
//第三组：fadeIn()和fadeOut()和fadeToggle():淡入淡出
$("input").eq(0).click(function () {
$("div").fadeIn(1000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(1000);
});
$("input").eq(2).click(function () {
// $("div").fadeToggle(1000);
$("div").fadeTo(1000,0.2,function(){
console.log("成功了")
});
})
</script>
</body>
</html>show不传参数，没有动画效果
$("div").show();
show(speed)
speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
fast:200ms normal:400ms slow:600
$("div").show(1000);
show([speed], [callback])
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
hide()同show()
自定义动画:animate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#box2 {
background-color: greenyellow;
margin-top: 120px;
}
#box3 {
margin-top: 240px;
background-color: lightblue;
}
</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>
/*
* animate();
* 第一个参数： 对象，里面放的是需要的动画的样式
* 第二个参数： speed，动画执行的时间
* 第三个参数：动画执行的效果， linear swing
* 第四个参数：回调函数
* */
$(function () {
$("input").eq(0).click(function () {
$("#box1").animate({left: 800}, 4000);
$("#box2").animate({left: 800}, 4000, "linear");
$("#box3").animate({left: 800}, 4000, "swing", function () {
console.log("燃烧我的卡路里");
})
});
})
</script>
</body>
</html>动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放在动画队列中，等前面的动画完成了才会执行
stop方法：停止动画效果
stop(clearQueue,jumptoEnd);
//第一个参数：是否清楚队列
stop():停止当前正在执行的动画
stop()有两个参数：
第一个参数：clearQueue:是否清除动画队列
true:直接停止动画 false:当前的动画停止，执行动画队列中的下一个动画
第二个参数：jumpToEnd：是否跳转到最终的动画效果
true:直接跳转到最终的动画效果 false:不跳转到最终效果
$("div").stop(true,false);
jQuery节点操作
（1）创建节点
<script src="jquery-1.12.4.js"></script>
<script>
js创建元素的三种方式：
1. document.write("标签+内容") 缺陷：会把页面中所有的内容覆盖掉
2. 父容器.innerHTML="标签+内容"
3. 父容器.appendChild( document.createElement("标签名") );
var box = document.querySelector("#box");
1. 创建元素
var aObj = document.createElement("a");
2. 将元素追加到父容器中
box.appendChild(aObj);
3. 设置元素的属性和文本和样式
aObj.innerHTML = "这是a标签";
aObj.href = "#";
aObj.setAttribute("target", "_blank");
aObj.setAttribute("score", "100");
jquery创建元素：
1. 创建jquery对象 $("标签+内容")
2. 将jquery对象追加到父元素中去 append
var $a = $('<a href="#">这是一个a标签</a>');
</script>
（2）添加节点
append appendTo
perpend perpendTo
before
after
2.1 向父容器中往后追加子元素 append
$("#box").append($a);
2.2 将子元素往后追加到父容器中 appendTo
$a.appendTo($("#box"));
2.3 向父容器前添加子元素 prepend
$("#box").prepend($a);
2.4 将子元素从前面添加到父容器中 prependTo
$a.prependTo($("#box"));
在box后面添加一个a标签
$("#box").after($a);
在box前面添加一个a标签
$("#box").before($a);
885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
