abstract:总结:大部分总结都在代码注释里,这里我再补充一点老师没讲到的。mouseout 与 mouseleave 的区别:不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。mouseover与mouseenter不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才
总结:
大部分总结都在代码注释里,这里我再补充一点老师没讲到的。
mouseout 与 mouseleave 的区别:
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
代码:
.box, div{
height:100px;width:100px; border:1px solid #ffe411;
}
.ft{
font-weight: bold; font-size: 40px; color: red;
}
.f_color{
color: red;
}
// jQuery获取/改变CSS
// $(document).ready(function(){
// //改变单个属性
// // $('选择器').css('属性名','属性值');
// $('body').css('backgroundColor', '#ffe411');
// //改变多个属性
// // $('选择器').css({'属性名1':'属性值1', '属性名2':'属性值2', '属性名3':'属性值3'});
// $('p').css({'color':'red', 'font-size':'40px', 'font-weight':'bold'});
// //获取单个CSS的属性值
// alert($('div').css('background-color'));
// alert($('div').css('height'));
// alert($('body').css('background'));
// })
// jQuery操作属性的方法
// jQuery操作属性的原理还是对于DOM的操作
// 通过对象的关系,对节点树中的元素的属性进行操作的方法如下;
// addClass() 该方法向被选中的元素添加一个或多个类
// removeClass() 从选中的元素移除一个或多个类
// attr() 设置或返回选中元素的属性值
// removerAttr() 从被选中的元素中移除属性
// hasClass() 检查被选中的元素是否包含指定class
// toggleClass() 对被选中元素进行添加删除类的切换操作
// 设置内容
// text() 该方法返回或设置被选中的元素的文本内容
// html() 返回或设置被选中元素的内容
// val() 返回或设置被选中元素的值
// $(document).ready(function(){
// $('p').addClass('box ft');
// $('p').removeClass('box ft');
// alert($('p').attr('title'));
// $('p').attr('title', '你好');
// alert($('p').attr('title'));
// $('.bt').click(function(){
// $('img').removeAttr('src');
// })
// $('.btn').click(function(){
// alert($('div').hasClass('one'));
// })
// $('button').click(function(){
// $('p,b,span').toggleClass('f_color');
// })
// alert($('p').text());
// $('p').text('xxoo本x');
// $('b').html('
123
');// $('input').val('改变之后');
// })
// jQuery事件
// ready() 不能与
一起使用// blur() 元素失去焦点
// focus() 元素获得焦点
// change() 元素内容改变
// click() 元素上鼠标单击
// dblclick() 元素上鼠标双击
// mouseover() 鼠标位于元素上方时
// mouseout() 鼠标指针离开元素时 常与mouseover连用
// mouseenter() 鼠标指针穿过元素时
// mouseleave() 鼠标指针离开元素时,会触发moueleave事件,经常与mouseenter一起连用
// mousedown() 鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 在元素上松开鼠标按键时
// resize() 调整当前浏览器窗口大小时
// pageX() 属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必需 参数来自事件绑定函数
// pageY() 属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event:必需 参数来自事件绑定函数
// mouseover与mouseout的区别:
// 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
// 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
// $(document).ready(function(){
// $('input').blur(function(){
// $('input').css('background-color','#eee');
// })
// $('input').focus(function(){
// $('input').css('background-color','#ffe411');
// });
// $('input').change(function(){
// $('input').css('background-color', 'blue');
// })
// $('button').click(function(){
// $('div').css('background-color', 'red');
// })
// $('button').dblclick(function(){
// $('div').css('background-color', 'blue');
// })
// $(document).mousemove(function(aa){
// $('span').text( '当前鼠标的位置 ' + 'x: '+aa.pageX+' y: '+aa.pageY);
// })
// a=0;
// $(window).resize(function(){
// $('b').html('窗口缩放' + (a++) + '次');
// })
// $('.box').mouseenter(function(){
// $('.box').css('width', '100px');
// })
// $('.box').mouseleave(function(){
// $('.box').css('width', '500px');
// })
// $('.box').mouseout(function(){
// $('.box').css('width', '300px');
// })
// })
// jQuery切换
// hover(over, out)
// over: 鼠标移上元素触发的一个函数
// out: 鼠标移除元素促发的一个函数
// toggle() 如果元素是可见的,就切换为隐藏,反之,相反。
$(document).ready(function(){
$('.dv').hover(
function(){
$(this).css('background-color', 'red');
},
function(){
$(this).css('background-color', 'blue');
}
)
$('button').click(function(){
$('.d').toggle().css('background-color', '#ffe411');
})
})
Correcting teacher:天蓬老师Correction time:2019-02-14 17:21:49
Teacher's summary:jQuery 的重点在以下三块: selector, dom, ajax , 把这三个掌握就够用了