Query的DOM操作
jQuery 改变css：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>改变css</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
//改变单个css属性
// $(选择器).css('属性名','属性值')
$('body').css('backgroundColor','#25cc77');
//改变多个CSS属性
// $('选择器').css({'属性名1':'属性值1','属性名2':'属性值2','属性名3':'属性值3'})
$('p').css({'color': 'red', 'font-size': '40px', 'font-weight': 'bold'});
//获取单个CSS的属性值
// $('选择器').css('属性名')
alert($('div').css('width'));
})
</script>
</head>
<body>
<p>孤帆远影碧空尽</p>
<div style="width: 200px;height: 200px;background: #ee9e00;"></div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/1/
jquery的事件函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的事件函数</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 在jQuery中是以调用事件函数的形式来触发事件的，如js中的onclick事件，在jQuery则用click()来替代
// 简单的理解：事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的某个事件
//ready() 当我们的DOM已经加载，页面已经加载完，触发的事件==js的onload
//语法：
// $(document).ready(function(){
// })
//*不能与<body onload="">一起使用
//blur()当元素失去焦点==onblur
// focus()当元素获得焦点
// change()当元素的值发生改变的时候
// click()点击事件
//dblclick()双击事件
// mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
// mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
// mousemove() 当鼠标指针在指定的元素中移动时，就会发生该事件
// mouseleave() 当鼠标指针离开元素时
// mouseout() 当鼠标指针从元素上移开时
// mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 当在元素上松开鼠标按键时
// resize() 当调整当前浏览器窗口大小时
// pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需 参数来自事件绑定函数。
// pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需 参数来自事件绑定函数。
$(document).ready(function(){
$('input').blur(function(){
$('input').css('background','red');
});
$('input').focus(function(){
$('input').css('background','blue');
});
$('input').change(function(){
$('input').css('background','pink');
});
$('button').click(function(){
$('div').css('background','blue');
});
$('div').dblclick(function(){
$(this).css('background','pink');
});
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY);
});
a=0;
$(window).resize(function(){
$('b').text(a++);
});
})
</script>
<input type="text" name="">
<div style="width: 100px;height: 100px;background: red;margin-top: 20px;"></div>
<button>点击</button>
<div>
当前鼠标的位置：<span> </span>
</div>
<div>
页面被调整大小的次数：<b> </b>
</div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/2
jQuery操作属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作属性</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.box{color: red;}
.main{font-size: 40px;font-weight: bold;}
.aa{ list-style:none;background: pink;height: 30px;width: 400px; }*/
.bb{color: red;}
</style>
<script>
// jQuery的操作属性其原理还是对于DOM的操作
// 通过对象的关系，对节点树中的元素的属性进行操作的方法有以下：
// addClass() 该方法向被选中的元素添加一个或者多个类
// removeClass() 该方法从被选中的元素移除一个或者多个类
// attr() 该方法设置或者返回被选中元素的属性值
// removeAttr() 该方法从被选中的元素中移除属性
// hasClass() 该方法检查被选中的元素是否包含指定class
// toggleClass()该方法对被选中元素进行添加/删除类的切换操作
// 设置内容：
// text() 该方法返回或者设置被选中的元素的文本内容
//html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）
// val() 该方法返回或者设置被选元素的值
$(document).ready(function(){
$('p').addClass('box main');//d多个类，用空格隔开
$('p').removeClass('box main');
$('p').attr('title','你好');
$('button').click(function(){
$('img').removeAttr('src');
});
$('button').click(function(){
$('span,b,p').toggleClass('bb');
});
$('span').text('林花谢了春红，太匆匆。无奈朝来寒雨，晚来风。');
$('b').text('世间无限丹青手，一片伤心画不成。');
$('p').html('<h1>生当复来归，死当长相思。</h1>');
$('.q').click(function () {
$('input').attr('value','自在飞花轻似梦，无边丝雨细如愁。');
});
})
</script>
</head>
<body>
<p title="content">此情可待成追忆，只是当时已惘然</p>
<img src="http://img.php.cn/upload/course/000/000/012/5b95d60c4d048426.png">
<button>点击删除图片</button>
<div class="">日日思君不见君，共饮长江水。</div>
<button>点击</button>
<span>人面不知何处去，桃花依旧笑春风。</span><br>
<b>行到水穷处，坐看云起时。</b>
<p>夜月一帘幽梦，春风十里柔情。</p>
<button>点击切换</button>
<input type="text" name="" value="天涯地角有穷时，只有相思无尽处。">
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/2
jQuery事件切换：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery事件切换</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
div,p{width: 700px;height: 200px;border: 1px solid #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
// hover(over,out)
// over:鼠标移上元素上要触发的一个函数
// out:鼠标移出元素上要触发的一个函数
$(document).ready(function(){
$('div').hover(
function(){
$(this).css('background','#ff5600');
},
function(){
$(this).css('color','#fff');
});
// toggle() 如果元素是可见的，就切换为隐藏，否则相反
$('button').click(function(){
$('p').toggle().css('background','#78ff50')
})
})
</script>
<div>时人不识凌云木，直待凌云始道高。</div>
<p style="display: none;"></p>
<button>点击</button>
</body>
</html>