abstract：笔记:10:获取/改变CSS10-1:单个css属性$('body').css('backgroundColor','#ccc')10-2:多个css属性$('body').css({'属性名':'属性值','属性名':'属性值'})10-3:获取单个css的属性值$(选
笔记:
10:获取/改变CSS
10-1:单个css属性
$('body').css('backgroundColor','#ccc')
10-2:多个css属性
$('body').css({'属性名':'属性值','属性名':'属性值'})
10-3:获取单个css的属性值
$(选择器).css('属性名')
11:操作属性的方法
11-1:addClass():向被选中的元素添加一个或多个类
.box{}.main{}设置css属性
$('p').addClass('box main') p标签就回去了这两个属性
11-2:removeClass():移除一个或多个类
$('p').removeClass('box main')
11-3:attr():设置或者返回被选中元素的属性值
$('p').attr('title','你好')
11-4:removeAttr():移除一个属性
$('p').removeAttr('title')
11-5:hasClass():该方法检查被选中元素是否包含指定class
11-6:toggleClass():对被选中元素进行添加/删除类的切换操作
$('span,b,p').toggleClass('bb')
11-7:text();该方法返回或者设置被选中的元素的文本内容
$('b').text('hello world')
11-8:html();同text(),但是可以设置html标签
$('p').html('<h1>hello world</h1>')
11-9:val();返回或者设置被选中元素的值
$('input').val('我是被修改的值')
12:jQuery事件函数
12-1:事件方法会触发匹配元素的事件,或者将函数绑定到所有匹配元素的某个事件
12-1:ready();当DOM已经加载,页面已经加载完,触发事件==js的onload
$(document).ready(function(){});不可以与onload同时使用
12-2:blur();当元素失去焦点==onblue
$('input').blur(function(){})
12-3:focus();当元素获得焦点==onfocus
$('input').focus(function(){})
12-4:cheange();当元素的值发生改变的时候
$('input').change(function(){})
12-5:click();点击事件
12-6:dblclick();双击事件
13:方法
13-1:获取鼠标当前位置 pageX() pageY()
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY)})
13-2:mouseover();鼠标指针位于元素上方时发生该事件
13-3:mouseenter();鼠标指针穿过元素时
13-4:mousemove();鼠标指针在指定的元素中移动时
13-5:mouseout();鼠标指针从元素上移开时
13-6:mousedown();鼠标指针移动到元素上方并按下鼠标按键时
13-7:mouseup();鼠标在元素上松开鼠标按键时
13-8:resize();调整当前浏览器窗口大小时
14:事件切换
14-1:hover(over,out)
1:over:鼠标移上元素上要触发的一个函数
2:out:鼠标移出元素上要触发的一个函数
例:$('div').hover(function(){
$(this).css('background','red') 移入
},
function(){
$(this).css('background','pink') 移出
}
) 完整程序 自己判定....
14-2:toggle();如果元素是可见的,就切换为隐藏,否则相反
$('p').togle();后面还可以跟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">
<script type="text/javascript"src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.Size{width: 100px;height: 100px;}
.Color{background-color: #ccc;}
.Size1{width: 150px;height: 150px;background-color: red;}
.Size2{width: 200px;height: 200px;background-color: #ccc;border: 2px solid pink;}
</style>
<title>我的作业</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(move){
$('#p3').text('x: '+move.pageX+'y: '+move.pageY)
})
$('.bt1').click(function(){
// 向被选中的元素添加多个类addClass();
$('#div1').addClass('Size Color')
})
$('#bt2').click(function(){
// 向被选中的元素移除多个类removeClass();
$('#div1').removeClass('Size Color')
})
$('#bt3').click(function(){
// 设置或者返回被选中元素的属性值attr();
$('#bt2').attr('disabled','disabled')
})
$('#bt4').click(function(){
// 移除一个属性 removeAttr();
$('#text1').removeAttr('value')
})
$('#bt5').click(function(){
// div1是否包含指定class hasClass();
alert($('#div1').hasClass('Size'))
})
$('#bt6').click(function(){
// div1是否包含指定class hasClass();
$('#div1').toggleClass('Size1')
})
$('#bt7').click(function(){
// 修改文本内容 text();
$('#bt7').text('我把我自己修改了')
})
$('#bt8').click(function(){
// 修改文本内容 html();
$('#bt8').html('<li>我把我自己修改了,还添加了标签</li>')
})
$('#bt9').click(function(){
// 修改文本内容 val();
$('#text1').val('姓名-----张三')
})
$('#p1').dblclick(function(){
//双击开启div2及内容
$('#div2').removeAttr('hidden')
$('.p1').removeAttr('hidden')
$('#div2').addClass('Size2')
$('#text2').removeAttr('hidden')
})
$('#text2').focus(function(){
//获取焦点
$('#div2').css('backgroundColor','red')
})
$('#text2').blur(function(){
//失去焦点
$('#div2').css('backgroundColor','blue')
})
$('#text2').change(function(){
//值发生改变时
$(this).css('backgroundColor','yellow')
})
$('#p2').hover(
//hover事件切换
function(){
$('#div3').addClass('Size2')
},
function(){
$('#div3').removeClass('Size2')
}
)
$('#bt10').click(function(){
// toggle事件切换
$('button,div,.input1,p').toggle()
})
})
</script>
<p id="p3"> </p>
<p>为保持良好的体验感,请从左向右依次进行点击</p>
<div id="div1"></div>
<button>01-addClass</button>
<button id="bt2">02-removeClass</button>
<button id="bt3">03-attr把移除禁用</button>
<button>04-addClass</button>
<button id="bt5">05-是否包含指定class</button>
<button id="bt6">06-切换操作</button><br>
<input type="text" name="" value="xxxxxxxxxxxxxxxx" id="text1">
<button id="bt4">07-移除文本框内容</button>
<button id="bt9">08-修改文本框内容</button><br>
<button id="bt7">09-修改文本内容</button>
<button id="bt8">10-修改文本内容</button>
<p id="p1">11-双击开启事件函数操作</p>
<div id="div2" hidden>
<p hidden>可测试:</p>
<p hidden>1:获得焦点</p>
<p hidden>2:失去焦点</p>
<p hidden>3:值发生改变情况</p>
<input type="text" name="" value="请改变内容试一试"id="text2"hidden>
</div>
<p id="p2">事件的切换</p>
<div id="div3"></div>
<input type="button" name="" value="隐藏/显示"id="bt10">
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-03-08 09:36:56
Teacher's summary：关于事件的总结, 很全面,你可以把这些打印出来, 不断的提示自己,以加深记忆