摘要：1、jQuery获取改变CSS<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q
1、jQuery获取改变CSS
<!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>jQuery</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//改变单个CSS属性
$('body').css('backgroundColor', '#ccc');
//$('选择器').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'))
})
</script>
<script>
</script>
</head>
<body>
<p>php中文网</p>
<div style="width:100px;height:100px;background:blue;">
</body>
</html>
2、jQuery事件方法
<!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">
<script type="text/javascript" src='jquery-3.3.1.js'></script>
<title>jquery的事件函数</title>
</head>
<body>
<!-- 在jQuery中是以调用事件函数的形式来触发事件的，如js中的onclick事件，在jQuery则用click()来代替
简单的解释：事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的某个事件 -->
<!-- ready()当我们的DOM已经加载，页面已经加载完，触发的事件==js的onload
语法：
$(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:必需 参数来自事件绑定函数
-->
<script type="text/javascript">
$(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() {
// $('div').css('background', 'pink')
// })
// $(document).mousemove(function(aa) { //event.pageY
// $('span').text('x:'+aa.pageX+'y:'+aa.pageY)
// })
// $(window).resize(function(){
// alert('窗口被调整大小')
// })
a=0
$(window).resize(function(){
$('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>
</body>
</html>
3、jQuery操作属性的方法
<!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>Document</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.box {
color: red;
}
.main {
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('p').addClass('box main') //多个类，用空格隔开
$('p').removeClass('box') //多个类，用空格隔开
// alert($('p').attr('title'))
// $('p').attr('title','你好')
//alert($('p').attr('title'))
// $('button').click(function() {
// $('img').removeAttr('src')
// })
$('button').click(function() {
alert($('div').hasClass('one'))
})
})
</script>
<p title="content">PHP中文网</p>
<!--
//addClass()该方法向北选中的元素添加一个活多个类
//removeClass()该方法从北选中的元素一个或多个类
//attr()该方法设置或者返回被选中元素的属性值
//removeAttr()该方法从北选中的元素中移除属性
//hasClass()该方法检查北选中的元素是否包含指定class
//
-->
<img src="haha.jpeg" alt="">
<button>点击删除图片</button>
<div>你好</div>
<button>点击</button>
</body>
</html>
4、jQuery事件切换
<!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>jQuery事件切换</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div,
p {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
<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>
</head>
<body>
<div>
我是内容
</div>
<p style="display:none">
</p>
<button>
点击
</button>
</body>
</html>
