摘要：第一章 jQuery获取/操作css的方法改变单个css属性:$("选择器").css('属性名','属性值')改变多个css属性:$("选择器").css({'属性名1':'属性值1','属性名2':'属性值2'})获取单个css属性值:$("选择器&
第一章 jQuery获取/操作css的方法
改变单个css属性:
$("选择器").css('属性名','属性值')
改变多个css属性:
$("选择器").css({'属性名1':'属性值1','属性名2':'属性值2'})
获取单个css属性值:
$("选择器").css('属性名')
(可用alert弹窗的形式将此单个css属性值弹出方便观察)
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery获取/改变CSS</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//1.改变单个css属性
// $("选择器").css('属性名','属性值')
$('body').css('backgroundColor','#ccc')
//2.改变多个css属性
// $("选择器").css({'属性名1':'属性值1','属性名2':'属性值2'})
$('p').css({'color':'red','fontSize':'40px','fontWeight':'bold'})
//3.获取单个css属性值
//$("选择器").css('属性名')
// alert($("div").css('background'))
alert($('div').css('width'))
alert($('div').css('background'))
})
</script>
<p>老人头扑克</p>
<div style="width: 200px;height: 100px;background: blue;"></div>
</body>
</html>第二章 jQuery操作属性的方法
jQuery的操作属性其原理还是对于DOM的操作，通过对象的关系，对节点树中的元素的属性进行操作。
常见的操作方法有以下:
①：addClass() 该方法向被选中的元素添加一个或者多个类
②：removeClass() 该方法从被选中的元素移除一个或者多个类
③：attr() 该方法设置或者返回被选中元素的属性值
④：removeAttr() 该方法从被选中的元素中移除属性
⑤：hasClass() 该方法检查被选中的元素是否包含指定class
⑥：toggleClass()该方法对被选中元素进行添加/删除类的切换操作
关于设置内容的：
①：text() 该方法返回或者设置被选中的元素的文本内容
②：html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）
③：val() 该方法返回或者设置被选元素的值
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery操作属性的方法(1)</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
/* .box{color:#583882;}
.main{font-size: 40px;font-weight: bold;}*/
.bb{color: red;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('p').addClass('box main')//多个类,用空格分开
$('p').removeClass('box')
alert($('p').attr('title'))
$('p').attr('title','James')
alert($('p').attr('title'))
$('button').click(function(){
$('img').removeAttr('src')
})
$('button').click(function(){
alert($('div').hasClass('one'))
})
$('button').click(function(){
$('span,b,p').toggleClass('bb')
})
//alert($('span').text('大家好,我是古天乐'))
//$('span').text('大家好,我是古天乐')
$('b').text('一起来玩')
//$('p').text('是兄弟就来砍我')
//alert($('p').html())
$('p').html('<h1>来到就是赚到</h1>')
alert($('input').val())
$('input').val('我是孙笑川')
})
</script>
<p title="content">洛杉矶湖人队</p>
<img src="images/1.jpg">
<button>点击删除图片</button>
<div class="one">你美死了</div>
<button>点击</button>
<span>大家好,我是渣渣辉</span><br>
<b>欢迎来到</b>
<p>贪玩蓝月</p><br>
<button>点击切换</button>
<input type="text" name="" value="我是元素的值">
</body>
</html>第三章 jQuery事件方法
jQuery的事件处理与JavaScript的事件在类型和功能上差不多，在具体的写法和表示上有所区别，相较于JavaScript更简单方便些。
在jQuery中是以调用事件函数的形式来触发事件的，简单理解就是事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的某个事件。
ready()：当DOM加载时，页面已经加载完
//语法：
// $(document).ready(function(){
// })
//*不能与<body onload="">一起使用blur() 当元素失去焦点
focus() 当元素获得焦点
change() 当元素的值发生改变的时候
click() 点击事件
dblclick() 双击事件
mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
mouseleave() 当鼠标指针离开元素时
mouseout() 当鼠标指针从元素上移开时
mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
mouseup() 当在元素上松开鼠标按键时
resize() 当调整当前浏览器窗口大小时
pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需 参数来自事件绑定函数。
pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需 参数来自事件绑定函数。
完整html代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件方法</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: greenyellow; margin-top:20px;}
</style>
</head>
<body>
<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','orange')
// })
// $('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++)
// })
// $('div').mouseover(function(){
// $('div').css('background','pink')
// })
// $('div').mouseenter(function(){
// $('div').css('color','#fff')
// })
$('div').mousemove(function(){
$('div').css('color','#bbb')
})
})
</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> -->
<!-- <div>mouseover事件</div> -->
<!-- <div>mouseenter事件</div> -->
<div>mousemove事件</div>
<div>111</div>
</body>
</html>第四章 jQuery事件切换
hover（over，out）
over：鼠标移上元素上时要触发的一个函数。
out：鼠标移出元素上时要触发的一个函数。
（在使用jQuery函数时，在hover中插入函数中第一个设置的内容是其属性中的over触发的函数，第二个是out触发的函数。）
toggle（）如果元素是可见的，就切换隐藏，否则相反。
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件切换</title>
<meta charset="utf-8">
<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>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('div').hover(
function(){
$(this).css('background','orange')
},
function(){
$(this).css('color','#fff')
}
)
$('button').click(function(){
$('p').toggle().css('background','yellowgreen')
})
})
</script>
<div>动情是容易的</div>
<p>因为不会太久</p>
<button>点击</button>
</body>
</html>
批改老师：查无此人批改时间：2019-01-14 16:41:40
老师总结：不错呀，你这章课程学习了那么多，有没有感觉自己很强大。继续加油哦。
