<!DOCTYPE html>
<html>
<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></title>
<script type="text/javascript" src="http://www.php.cn/static/js/jquery.min.js"></script>
</head>
<body>
<script>
// $(document).ready(function() {
// //改变单个css属性
// // $(选择器).css('属性名','属性值')
// $('body').css('backgroundColor', '#ccc')
// //改变多个CSS属性
// // $('选择器').css({'属性名1':'属性值1','属性名2':'属性值2','属性名3':'属性值3'})
// $('p').css({
// 'color': 'red',
// 'font-size': '40px',
// 'font-weight': 'bold'
// })
// //获取单个CSS的属性值
// // $('选择器').css('属性名')
// // alert($('div').css('background'))
// alert($('div').css('width'))
//
// })
//事件
//语法：
// $(document).ready(function(){
// })
//*不能与<body onload="">一起使用
//blur()当元素失去焦点==onblur
// focus()当元素获得焦点
// change()当元素的值发生改变的时候
// click()点击事件
//dblclick()双击事件
// mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
// mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
// mousemove() 当鼠标指针在指定的元素中移动时， 就会发生该事件
// mouseleave() 当鼠标指针离开元素时
// mouseout() 当鼠标指针从元素上移开时
// mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 当在元素上松开鼠标按键时
// resize() 当调整当前浏览器窗口大小时
// pageX() 属性是鼠标指针的位置， 相对于文档的左边缘 event.pageX event： 必需 参数来自事件绑定函数。
// pageY() 属性是鼠标指针的位置， 相对于文档的上边缘 event.pageY event： 必需 参数来自事件绑定函数。
// $(document).ready(function() {
// // $('input').blur(function(){
// // $('input').css('background','red')
// // })
// // $('input').focus(function(){
// // $('input').css('background','blue')
// // })
// // $('input').change(function(){
// // $('input').css('background','pink')
//
// // })
// // $('button').click(function(){
// // $('div').css('background','blue')
// // })
// $('div').dblclick(function() {
// $(this).css('background', 'pink')
//
// })
// // $(document).mousemove(function(aa){
// // $('span').text('x: '+aa.pageX+'y: '+aa.pageY)
// // })
// a = 0
// $(window).resize(function() {
// // alert('窗口被调整大小')
// $('b').text(a++)
// })
//
// })
</script>
<!-- <input type="text" name="">
<div style="width: 100px;height: 100px;background: red;margin-top: 20px;"></div>
<button>点击</button> -->
<!-- <div>
当前鼠标的位置：<span> </span>
</div>
<div>
页面被调整大小的次数：<b> </b>
</div> -->
<!-- 事件切换 -->
<script type="text/javascript">
// hover(over,out)
// over:鼠标移上元素上要触发的一个函数
// out:鼠标移出元素上要触发的一个函数
$(document).ready(function() {
// $('div').hover(
// function(){
// $(this).css('background','red')
// },
// function(){
// $(this).css('color','#fff')
// }
// )
// toggle() 如果元素是可见的，就切换为隐藏，否则相反
$('button').click(function() {
$('p').toggle().css('background', 'red')
})
})
</script>
<div>我是内容</div>
<p style="display: none;"></p>
<button>点击</button>
</body>
</html>
