jQuery改变css，改变属性，事件方法，事件切换
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery中css属性事件</title>
<link rel="icon" type="image/x-icon" href="images/time.png">
<link rel="stylesheet" type="text/css" href="">
<script src="js/jquery-3.3.1.min.js"></script>
<style>
.box1,.box2,.box3{width: 200px;height: 100px;background:red;}
.box4{border-radius: 35px;}
.p2{background: #ccc;font-size: 20px;}
</style>
</head>
<body>
<script>
//jQuery获取、改变CSS
//获取CSS样式：$("选择器").css("属性名")
$(document).ready(function(){
var a;
a=$(".box1").css("height");
alert(a);
})
//改变css单个属性：$("选择器").css("属性名","属性值")
$(document).ready(function(){
$(".bt").click(function(){
$(".box1").css("background","green");
})
})
//改变多个css属性:
//$("选择器").css({"属性名1":"属性值1","属性名2":"属性值2","属性名3":"属性值3",})
$(document).ready(function(){
$(".bt1").click(function(){
$(".box1").css({"background":"blue","width":"150px"});
})
})
//操作属性其原理还是对DOM的操作
//addClass()该方法向被选中元素添加一个或多个类
//removeClass()该方法从被选中元素移除一个或多个类
//attr()该方法设置或者返回选中元素的属性
//removeAttr()该方法从被选中元素移除属性
//hasClass()该方法检查被选中元素是否包含指定的class
//toggleClass()该方法对被选中的元素进行添加删除类的操作
//设置内容：
//text()该方法返回或者设置被选中元素的文本内容
//html()该方法返回或者设置被选中元素的内容（类似innerHTML，可包括html标签本身）
//val()该方法返回或者设置被选中元素的值
//添加移除类
$(document).ready(function(){
//添加类
$(".p1").addClass("p2");
$(".bt2").click(function(){
$(".p1").removeClass("p2");
})
})
//设置返回属性
$(document).ready(function(){
$(".box2").click(function(){
$(".box2").attr("title","你好！");//设置属性
alert($(".box2").attr("title"));//返回属性
})
//$(".box2").removeAttr("title")
})
//hasClass()
$(document).ready(function(){
alert($(".box2").hasClass("title"));
})
// toggleClass()添加删除类
$(document).ready(function(){
$(".box3").click(function(){
$(".box3").toggleClass("box4");
})
})
//设置内容：
//text()
$(document).ready(function(){
$(".box5").click(function(){
$(".box5").text("添加了text文本");
$(".box5").css("color","white");
})
})
// html()返回或者设置被选中元素的内容
$(document).ready(function(){
$(".p3").click(function(){
$(".p3").html("<h2>php中文网，一个学校的好网址。</h2>");
$(".p3").css("background","red");
})
})
// val()返回或者设置被选中元素的值
$(document).ready(function(){
$(".in").val("我是被修改后的值。");
})
//事件方法：
//blue()当元素失去焦点，相当于js中的onblue
//focus()当元素获得焦点时，相当于js中的onfocus
//change()元素值改变
$(document).ready(function(){
// $(".in1").blur(function(){
// $(".in1").css("background","blue");
// });
$(".in1").focus(function(){
$(".in1").css("background","green");
});
$(".in1").change(function(){
$(".in1").css("background","pink");
});
})
//click()单击事件，dblclick()双击事件
$(document).ready(function(){
$(".box6").click(function(){
$(".box6").css("background","red");
});
$(".box6").dblclick(function(){
$(".box6").css("background","pink");
});
})
//鼠标事件
//mouseover() 当鼠标指针位于元素上方时
//mouseenter() 当鼠标指针穿过元素上方时
//mousemove() 当鼠标指针在指定元素上移动时
//mouseleave() 当鼠标指针离开元素时
//mouseout() 当鼠标指针从元素上移开时
//mousedown() 当鼠标指针按下时
//mouseup() 当鼠标指针在元素上松开时
//resize() 当调整当前浏览器窗口大小时
//pageX() 属性是鼠标指针位置，相对于文档左边缘 event.pageX event:必须 参数来自事件绑定函数。
//pageY() 属性是鼠标指针位置，相对于文档上边缘 event.pageY event:必须 参数来自事件绑定函数。
//mouseover() 当鼠标指针位于元素上方时
$(document).ready(function(){
$(".box7").mouseover(function(){
$(".box7").css("border-radius","40px");
});
})
//获取鼠标位置
$(document).ready(function(){
$(document).mousemove(function(aa){
$("span").text("x: "+aa.pageX +"y: "+aa.pageY);
});
})
//事件切换:
//hover(over,out),内部本身是两个函数，
//over是鼠标移上元素要出发的函数；
//out是鼠标移出元素要出发的函数；
$(document).ready(function(){
$(".box9").hover(
function(){
$(this).css("background","red");
},
function(){
$(this).css("color","#fff");
}
)
})
//toggle() 如果元素可见，就切换为隐藏，否则反之
$(document).ready(function(){
$(".bt6").click(function(){
$(".p6").toggle();
})
})
</script>
<!-- 获取、改变CSS样式 -->
<div></div>
<button>点击换底色</button><br>
<button>点击改变多个css属性</button><br>
<!-- 操作属性的方法： -->
<!-- 添加类 \移除类-->
<p>php中文网！</p>
<button>点击移除类</button>
<!-- 设置或者返回选中元素属性 -->
<!-- hasClass()检查被选中元素是否包含指定的class -->
<div title="cont" ></div><br>
<!-- toggleClass()添加删除类的操作 -->
<div></div><br>
<!-- 设置内容: -->
<div style="width: 100px;height: 100px;background: blue"></div><br>
<!-- html()返回或者设置被选中元素的内容 -->
<p>php中文网，一个学校的好网址。</p>
<!-- val()返回或者设置被选中元素的值 -->
<input type="text" value="我是元素的值"><br>
<!-- 事件方法： -->
<!-- 当元素获得、失去焦点时、内容改变时 -->
失去、获得焦点，内容改变<input type="text">
<!-- 单击或双击事件 -->
<div style="width: 100px;height: 60px;background: #ccc;"></div>
<!-- 鼠标指针位于元素上方时mouseover() -->
<div style="width: 100px;height: 60px;background: green;margin-top: 10px;"></div>
<!-- 获取鼠标位置 -->
<div >
当前鼠标位置：<span></span>
</div>
<!-- 事件切换 -->
<div style="width: 100px;height: 60px;background: green;margin-top: 10px;">我是内容</div>
<p style="width: 100px;height: 60px;background: blue;margin-top: 10px;"></p>
<button>点击</button>
</body>
</html>