jQuery事件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件切换</title>
<!-- 引入线上jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
.c2{
color:blue;
}
.c2_2{
background-color:burlywood;
}
.div2{
width:200px;
height:100px;
line-height:100px;
text-align:center;
background-color:coral;
color:darkblue;
}
</style>
<script type='text/javascript'>
//文档完全加载完成后执行
$(document).ready(function(){
//改变单个css属性 font-size 也可以使用驼峰写法 fontSize
$('.c1').css('fontSize','30px');
//改变多个css样式 用 属性名和属性值用 ' : ' 分开 多个属性用 ' , ' 分开，最后一个属性不需要加 ' , '
$('.c1').css({'color':'#f00','backgroundColor':'#ff0'});
//获取单个css属性值 这里返回的是rgb(255, 0, 0);
console.log($('.c1').css('color'));
// addClass() 添加一个或多个类样式 样式不需要加 ' . ' 多个样式用空格区分开
$('span').addClass('c2 c2_2');
// removeClass() 移除一个或多个类样式 样式不需要加 ' . ' 多个样式用空格区分开
$('span').removeClass('c2 c2_2');
// attr() 返回指定属性的属性值 这里返回的是 title_test
console.log($('span').attr('title'));
// 修改指定属性的属性值 修改过后返回的是 test
$('span').attr('title','test');
console.log($('span').attr('title'));
// removeAttr() 移除指定属性
$('#but1').click(function(){
$('img').removeAttr('src');
});
// hasClass() 样式不需要加 ' . ' 检测指定样式是否存在(布尔值) 这里返回的是 false
console.log($('.div1').hasClass('c1'));
// toggleClass 添加或移除类的切换操作
$('#but2').click(function(){
$('.div1').toggleClass('c2');
});
// text() 返回或设置文本内容 这里返回的是 php中文网
console.log($('.div1').text());
// 修改内容 修改过后的内容是 学习中
$('.div1').text('学习中');
console.log($('.div1').text());
// html() 返回或设置元素内容 这里返回的是 php中文网
console.log($('span').html());
//修改添加标签内容 这个可以解析标签 php变成斜体 中文网变成粗体
$('span').html('<i>php</i><strong>中文网</strong>')
// val() 返回或这只元素的值 一般为input 这里返回的是 username
console.log($('#ipt1').val());
// 修改val的值 修改过后的内容是 name
$('#ipt1').val('name');
console.log($('#ipt1').val());
// blur() 失去焦点后触发事件
$('#ipt2').blur(function(){
$(this).css('backgroundColor','#f00');
});
// focus() 获得焦点后触发事件
$('#ipt2').focus(function(){
$(this).css('backgroundColor','#ff0');
});
// change() 值发生改变后触发事件
$('#ipt3').change(function(){
$(this).css('backgroundColor','#f0f');
});
// click() 点击后触发事件
$("#but3").click(function(){
$(this).css({'width':'100px','height':'40px'});
});
// dblclick() 双击后触发事件
$("#but3").dblclick(function(){
$(this).css({'width':'150px','height':'40px'});
});
// mouseover() 位于元素上方的时候触发事件
// 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
$('.div2').mouseover(function(){
$(this).html('位于元素上方');
});
// mouseenter() 穿过元素的时候触发事件
// 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
$('.div2').mouseenter(function(){
$(this).css('fontSize','25px');
});
// mousemove() 移动到元素时触发事件
$('.div2').mousemove(function(){
$(this).css({'color':'#ff0','backgroundColor':'#000'});
});
// mouseleave() 离开元素时触发事件
// 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
$('.div2').mouseleave(function(){
$(this).css('color','darkblue');
});
// mouseout() 离开元素时触发事件
// 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
$('.div2').mouseout(function(){
$(this).css('backgroundColor','coral');
});
// mousedown() 元素上方并按下鼠标
$('.div2').mousedown(function(){
$(this).html('按下');
});
// mouseup() 元素上方并松开鼠标
$('.div2').mouseup(function(){
$(this).html('松开');
});
// resize() 调整当前浏览器窗口大小时触发
var num = 0;
$(window).resize(function(){
num++;
$('.num').text('窗口调整的次数是： ' + num);
});
$(document).mousemove(function(event){
// event参数是必须要的
$('.x').text( '鼠标指针位于文档左边缘的值是： ' + event.pageX);
$('.y').text( '鼠标指针位于文档上边缘的值是： ' + event.pageY);
});
// hover(over,out) over 鼠标移动到元素触发的函数 out 鼠标移出元素后触发的函数
$('.div3').hover(function(){
$(this).css({'backgroundColor':'#f00','color':'#fff'});
},function(){
$(this).css({'backgroundColor':'#fff','color':'#000'});
});
// toggle() 如果元素可见 则隐藏改元素 如果隐藏 则显示
$('#but4').click(function(){
$('.div3').toggle();
if($('.div3').css('display') == 'none'){
$(this).text('显示');
}else{
$(this).text('隐藏');
}
});
});
</script>
</head>
<body>
<p class='c1' >php中文网</p>
<span title='title_test'>php中文网</span><br>
<img src='http://www.php.cn/static/images/logo.png' alt='php中文网'>
<p><button id='but1'>移除图片</button></p>
<div class='div1'>php中文网</div>
<p><button id='but2'>添加删除类样式切换</button></p>
<form>
<p><input id='ipt1' type="text" value='username'></p>
<p><input id='ipt2' type="text"></p>
<p><input id='ipt3' type="text"></p>
</form>
<p><button id='but3'>点击-双击</button></p>
<div class='div2'></div>
<p class='num'></p>
<p class='x'></p>
<p class='y'></p>
<div class='div3'>php中文网</div>
<p><button id='but4'>隐藏</button></p>
</body>
</html>