1.链式编程就是为了节省代码量，看起来更优雅
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 让当前元素颜色变为红色
// $(this).css("color", "red");
// 3. 让其余的姐妹元素不变色
// $(this).siblings().css("color", "");
// 链式编程
$(this).css("color", "red").siblings().css("color", "");
$(this).siblings().parent().css("color", "blue"); //button 父级就是body
});
})
</script>
2.操作CSS
<script>
// 操作样式之css方法---直接操作样式
$(function() {
console.log($("div").css("width")); //不写值--只会返回属性值
// $("div").css("width", "400px"); // 标准
// $("div").css("width", 300);
//$("div").css(height, "300px"); 属性名一定要加引号
$("div").css({
width: 400,
height: 400,
backgroundColor: "blue"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
})
</script>
3.设置CLASS的方法 *js className 会覆盖元素里面的类名
jQuery 操作只对指定的类操作 不影响原先的类名
<script>
$(function() {
// 1. 添加类 addClass()
// $("div").click(function() {
// $(this).addClass("current");
// });
// 2. 删除类 removeClass()
// $("div").click(function() {
// $(this).removeClass("current");
// });
// 3. 切换类 toggleClass()
$("div").click(function() {
$(this).toggleClass("current");
});
})
</script>
4.案例操作calss类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
.current {
background-color: red;
transform: rotate(360deg);
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$(function() {
// 1. 添加类 addClass()
// $("div").click(function() {
// // $(this).addClass("current");
// });
// 2. 删除类 removeClass()
// $("div").click(function() {
// $(this).removeClass("current");
// });
// 3. 切换类 toggleClass()
$("div").click(function() {
$(this).toggleClass("current");
});
})
</script>
</body>
</html>
6.案例 操作类目不影响原类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
transition: all .3s;
}
.two {
transform: rotate(720deg);
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="one two"></div>
<script>
// var one = document.querySelector(".one");
// one.className = "two";
// $(".one").addClass("two"); 这个addClass相当于追加类名 不影响以前的类名
$(".one").removeClass("two");
</script>
</body>
</html>
7.内容操作 获取和设置样式
html（）和text（ ）类似js innerHTML 和innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<p> 12,34 </p>
<button>修改input 属性</button>
<input type="" name="" id="" value="jack" />
<script>
$( function(){
// 使用html 获取
console.log( $("p").html() ) ;
// 使用html 设置
$("p").html("<h3>你好</h3>") ;
// 使用html 获取
console.log( $("p").html() ) ;
// 使用text
console.log( $("p").text()) ;
// val 主要对表单元素操作
console.log($("input").val() );
// 点击修改val属性
$("button").click(function(){
$("input").val("修改为rose");
} )
} )
</script>
</body>
</html>
- attr() 方法
