摘要：========================== jQuery 操作 属性 =====================jQuery的操作属性，其原理是对于DOM的操作通过对象的关系，对节点树中的元素的属性进行操作的方法如下第一步、获取标签连接上函数函数括号内部为类/属性名一、对属性和类操作1. addClass( ) —— 添加类 $ (‘p’) . addClass(‘box main’)
========================== jQuery 操作 属性 =====================
jQuery的操作属性，其原理是对于DOM的操作
通过对象的关系，对节点树中的元素的属性进行操作的方法如下
第一步、获取标签
连接上函数
函数括号内部为类/属性名
一、对属性和类操作
1. addClass( ) —— 添加类
$ (‘p’) . addClass(‘box main’) ;
2.removeClass ( ) —— 移除类
3.attr( ) ——获取属性值
$ (‘p’ ) .attr (‘title’);
4.removeAttr（） ——移除属性
5.hasClass（） ——检查是否包含某类
6.toggleClass（ 调用类 ） ——添加删除类的切换操作 //点一次添加，再点一次删除
二、内容设置
1.text（） //返回文本内容
如果括号中添加内容，则可以改变文本内容
2.html（） //返回元素内容
在text的基础上可以在括号中添加html标签，可以识别
3.val（） //返回值
========================== jQuery 事件函数 =====================
jQ的事件处理和JS的事件在类型和功能上差不多，只是在具体时间的表示和写法上有区别，总体来说JQ更简单方便。
一、jQuery的事件方法。
在JQ中是以调用事件函数的形式来触发事件的。
事件方法会出发匹配元素的事件，或者将函数绑定到所有匹配元素的某个时间。
1. ready（）—— 当DOM完全加载
$(document) . ready( function () { } )
不可以和body内部的onload一起使用。
2.blur（）——当元素失去焦点 == onblur（）
$(‘ input’) . blur ( function ( ) { } )
3.focus（） ——当元素获得焦点 == onfocus
4.change（）——当元素的值发生改变时
5.click（）——单击 ==onclick
6.dbclick（）——双击
7.mouseover（）——鼠标浮上
8.mouseenter（）——鼠标穿过
9.mousemove —— 鼠标在元素中移动
10.mouseleave ——鼠标离开
11.mouseout ——鼠标移开
12.mousedown——鼠标按下
13.mouseup——鼠标松开
14.resize——调整当前浏览器窗口大小时 触发
15.pageX ——相对于左边缘
pageY——相对于上边缘
——用于获得鼠标的位置
========================== jQuery 事件切换 =====================
1.hover（over，out）
over：鼠标移到元素上要触发的函数
out：鼠标移出元素上要触发的函数
两个函数之间用，隔开
2.toggle()
如果元素是可见的，就切换为隐藏。
如果元素是隐藏的，就切换为可见。
=====================
下面为进行的测试内容，完成了事件切换的两个重要函数的使用验证和测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ基础语法</title>
<script type="text/javascript" src="jquery-3.3.1.min.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', 'red');
},
function(){
$(this) . css('color','#fff');
}
)
$('button').click(function(){
$('p').toggle().css('background','red');
})
})
</script>
<div>我是内容 </div>
<p style="display:none"></p>
<button>点击</button>
</body>
</html>
批改老师：查无此人批改时间：2019-04-03 17:40:36
老师总结：完成的不错。jq比js简单很多，好好学习，继续加油。
