摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/xuexi/static/jQuery/jquery-3.3.1.min.js">&l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/xuexi/static/jQuery/jquery-3.3.1.min.js"></script>
<title>jQuery事件总结</title>
<style>
.div_a{width: 100px; height:100px;}
.div_b{ border: 1px solid red;}
</style>
</head>
<body>
<script>
//ready() 当我们的DOM已经加载，页面已经加载完，触发的事件
$(document).ready(function(){ // 文档就绪函数 注意的是不能与js中body的onload事件一起使用
$('div,p').css('color','red') //给div和p标签添加CSS 字体红色样式
$('div').css({'font-size':'20px','font-weight':'bold'}) //同时给div设置两个CSS样式
// alert($('div').css('color')) //获取div元素字体颜色CSS属性值
$('div').addClass('div_a div_b') //向div元素添加两个class类 不用带. 多个用空格分开间隔
$('div').removeClass('div_b') //删除div中名为div_b的class类
// alert($('a').attr('href')) //返回a元素的href属性值
$('a').attr('href','http://www.baidu.com') //修改a元素的href属性值
$('a').removeAttr('href') //从a元素中移除href属性
// alert($('div').hasClass('xn2019')) //检查div元素class名是否是xn2019
$('.xn2019').click(function(){ //为类名为xn2019的类添加单击事件
$(this).toggleClass('div_b') //当前div元素进行添加/删除类名为div_b的切换操作
})
// alert($('div').text()) //返回div元素的文本内容
$('div').text('wwww.php.cn') //修改或添加div元素的文本内容 从PHP中文网改成了www.php.cn
// alert($('div').html()) //返回div元素的文本内容
$('p').html('<h2>php中文网</h2>') //修改内容 并修改了标签元素 p标签修改成了h2标签
// alert($('input').val()) //返回input框 value属性值
$('input').val('修改的内容') //修改input框 value属性值
$('input').blur(function(){ // blur()当元素失去焦点触发事件,适用于input框
$('input').css('background','red') //失去焦点input框变成红色
})
$('input').focus(function(){ //focus()当元素获得焦点,适用于input框
$('input').css('background','#ccc') //获得焦点input框变成灰色
})
$('input').change(function(){ //change()当元素的值发生改变的时候,适用于input框
$('input').css('background','burlywood') //值改变时变成粉色
})
$('.burron_a').click(function(){ //点击事件 改变所有div的背景色
$('div').css('background','pink')
})
$('.burron_a').dblclick(function(){ //双击击事件 改变第一个div的背景色
$('.xn2019').css('background','pink')
})
$('div').mouseover(function(){ //当鼠标指针位于当前div元素上方时 添加div_b 类class属性
$(this).addClass('div_b')
})
$('div').mouseenter(function(){ //当鼠标指针穿过元素时修改当前div中的内容
$(this).text('新年好')
})
$('div').mousemove(function(){ //当鼠标指针在指定的元素中移动时当前div中文字缩小
$(this).css('font-size','10px')
})
$('div').mouseleave(function(){ //当鼠标指针离开元素时当前div变成粉色
$(this).css('background','pink')
})
$('div').mouseout(function(){ //当鼠标指针从元素上移开时当然div字体大小变成25PX
$(this).css('fontSize','25px')
})
$('div').mousedown(function(){ //当鼠标指针移动到元素上方并按下鼠标按键时 当然div背景色变灰色
$(this).css('background','#ccc')
})
$('div').mouseup(function(){ //当在元素上松开鼠标按键时背景色变成红色
$(this).css('background','red')
})
$(a=0); //声明变量
$(window).resize(function(){ //因为窗口事件所以调用window窗口 窗口变动一次 在b标签显示变量a的次数
$('b').text(++a)
})
$(document).mousemove(function(aa){ //因为调取整个文档所以使用document 同时使用了鼠标移动事件 并传参数aa
$('#b_a').text('x: '+aa.pageX+'y: '+aa.pageY) //在b标签输出 x和 y的的实时位置
})
$('p').hover( //语法：hover(移动上触发函数,移开触发的函数)
function(){ //移动上触发函数
$(this).css('background','#ccc')
}, function(){ //移开触发的函数 使用，分开
$(this).css('color','blue')
}
)
$('.burron_b').click(function(){ //按钮点击事件函数
$('p').toggle() //隐藏或显示p 标签 如果p 标签本身隐藏点击测显示
})
})
</script>
<div class="xn2019">php中文网</div>
<div>您好</div>
<button class="burron_a">按钮</button>
<p title="xinnian">新年好</p>
<button class="burron_b">隐藏/显示</button>
<a href="http://www.php.cn">中文网</a>
<br>
<input type="text" value="请输入文字" >
<b> </b>
<br>
鼠标的当前位置是：<b id="b_a"> </b>
<!-- 总结
元素添加class类
addClass() 该方法向被选中的元素添加一个或者多个类
语法：$('选择元素').addClass('CSS类选择器名称1 名称2') 不用带. 用空格分开
案例：$('p').addClass('box box_a') //给P标签添加class类属性box和box_a
-----------------
元素移除class类
removeClass() 该方法从被选中的元素移除一个或者多个类
语法：$('选择元素').removeClass('选择器名称1 名称2')
案例：$('p').removeClass('box box_a')//移除P标签的class属性box和box_a
========================================================================
元素修改返回属性值
attr() 该方法设置或者返回被选中元素的属性值
返回语法: $('元素名').attr('元素属性名')
案例：alert($('p').attr('title'))//返回获取title的属性值
修改属性值语法： $('元素名').attr('元素属性名','新修改的属性值')
案例：$('p').attr('title','李涛')//修改P标签 title属性的属性值为李涛
------------------------------------------------------------------------------
元素中移除属性
removeAttr() 该方法从被选中的元素中移除属性
语法$('元素名').removeAttr('元素属性名')
$('button').click(function(){
$('img').removeAttr('src') //img里的src属性移除
})
========================================================================
检测元素是否是指定class名
hasClass() 该方法检查被选中的元素是否是指定class名
语法：alert($('div').hasClass('litao')) //检测div的CLASS名是否为litao
-------------------------------------------
元素进行添加/删除类的切换操作
toggleClass()该方法对被选中元素进行添加/删除类的切换操作
语法：$('button').click(function(){
$('p,b,span').toggleClass('box')//给p,b,span标签添加和切换.box属性
})
=============================================================================
设置html内容：
返回修改元素的文本内容
text() 该方法返回或者设置被选中的元素的文本内容
返回语法：返回文本内容语法$('元素').text()
案例：alert($('span').text())
修改语法：修改文本语法内容$('元素').text('修改的元素内容')
案例：$('b').text('成成')
-----------------------------------------------------------------
返回修改元素的文本内容（可以修改html标签）
html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）
返回被选中元素内容语法 $('元素').html()
案例：alert($('span').html())
修改内容或替换元素标签 $('原元素').html('<修改元素>内容</修改元素>')
案例：$('p').html('<h1>修改内容</h1>')
------------------------------------------------------------------------
input框的value值的返回和修改
val() 该方法返回或者设置被选元素的值(适用于input框)
语法：返回value值语法 $('input').val()
案例：alert($('input').val())
语法：修改value值语法 $('input').val('修改的val的内容')
案例：$('input').val('修改的value内容')
==========================================================================
jQuery事件
在jQuery中是以调用事件函数的形式来触发事件的，如js中的onclick事件，在jQuery则用click()来替代
简单的理解：事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的某个事件
--------------------------------------------------------------------
ready() 当我们的DOM已经加载，页面已经加载完，触发的事件==js的onload
语法如：
$(document).ready(function(){
})
*不能与<body onload="">一起使用
----------------------------------------------------------------------
blur()当元素失去焦点==onblur
案例：$('input').blur(function(){ //获取input框失去焦点
$('input').css('background','red') //当失去焦点后设置颜色
})
--------------------------
focus()当元素获得焦点
案例$('input').focus(function(){ //input框获取焦点
$('input').css('background','blue') //设置input框样式
})
-------------------------------
change()当元素的值发生改变的时候
案例：$('input').change(function(){ //input框元素值改变
$('input').css('background','pink') //设置改变后input框样式
})
-----------------------------------------------------------------------
click()点击事件
案例：$('button').click(function(){ //button是按钮的意思，点击按钮
$('div').css('background','blue') //获取改变元素的CSS样式
})
-------------------------------------------
dblclick()双击事件
案例： $('div').dblclick(function(){ //获取div元素 双击
$(this).css('background','pink') //this当前 css设置样式
})
-------------------------------------------------------------------------
mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
案例： $('div').mouseover(function(){ //获取div 鼠标位于上方时
$('div').text('成成') //修改div 内容
})
------------------------------------
mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
案例：$('div').mouseenter(function(){ //获取div 当鼠标指针穿过元素时
$('div').text('成成') //修改div 内容
})
-------------------------------------------------------------------------
mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
案例：$('div').mouseenter(function(){ //获取div 当鼠标指针在指定的元素中移动
$('div').text('成成') //修改div 内容
})
-------------------------------------------------------------------
mouseleave() 当鼠标指针离开元素时
案例：$('div').mouseleave(function(){ //获取div 当鼠标指针离开元素时
$('div').text('成成') //修改div 内容
})
---------------------------------------------------------------------
mouseout() 当鼠标指针从元素上移开时
案例：$('div').mouseout(function(){ //获取div 当鼠标指针从元素上移开时
$('div').text('成成') //修改div 内容
})
------------------------------------------------------------------------
mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
案例：$('div').mousedown(function(){ //当鼠标指针移动到元素上方并按下鼠标按键时
$('div').text('成成') //修改div 内容
})
-------------------------------------------------------------------------
mouseup() 当在元素上松开鼠标按键时
案例：$('div').mouseup(function(){ //当在元素上松开鼠标按键时
$('div').text('成成') //修改div 内容
})
---------------------------------------------------------------------------
resize() 当调整当前浏览器窗口大小时
案例： $(window).resize(function(){ //窗口使用window函数
$(a=1);
$('b').text(a++) //调整一次窗口就再b标签输出次数
--------------------------------------------------------------------------
pageX()属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需 参数来自事件绑定函数。
pageY()属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需 参数来自事件绑定函数。
案例： $(document).mousemove(function(aa){ //因为调取整个文档所以使用document
$('b').text('x: '+aa.pageX+'y: '+aa.pageY) //在b标签输出 x和 y的位置
})
-----------------------------------------------------------------------------------
事件切换：
------------------
hover(over,out)
over:鼠标移上元素上要触发的一个函数
out:鼠标移出元素上要触发的一个函数
案例： $('div').hover( //在元素div下设置切换函数
function(){ //鼠标以上元素触发的函数
$(this).css('background','red') //鼠标移上修改div背景
},
function(){ //鼠标移开触发的函数
$(this).css('color','#fff') //鼠标一款修改div字体颜色
}
)
----------------------------------------------------------------
toggle() 如果元素是可见的，就切换为隐藏，否则相反
$('button').click(function(){ //按钮 点击函数
$('p').toggle().css('background','red') //p 标签隐藏显示切换
-->
</body>
</html>
批改老师：查无此人批改时间：2019-02-11 09:54:48
老师总结：完成的不错。笔记记录有很多方式。你也可以试试用表格，一行一个事件，记录会简短，比较容易找到。
