- 概述
jQuery是一个js框架, 对js代码进行了封装, 可以使程序员简化对js的操作;
jQuery提供了很多操作js的常用方法.
官网: https://jquery.com/
口号: write less, do more
jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
jQuery的版本:
1.x.x, 兼容所有浏览器, 包括老旧的浏览器(ie5, ie6), 不再扩展新功能, 只做bug更新;
2.x.x, 支持主流的浏览器, 不支持ie5, ie6, 不再扩展新功能, 制作bug更新, 很少使用;
3.x.x, 官方会添加新的功能进去, 支支持最新的浏览器.
jQuery插件库: http://www.jq22.com/ - jQuery的使用
1、页面就绪函数
jQuery中，最核心的函数就是jQuery()，被简写成$()。页面就虚函数用于在页面就绪后再执行，类似于js中的window.onlad()函数的功能。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
alert("Hello jQuery");
});
2.jQuery对象和dom对象的转换
DOM, Document Object Model, 文档对象模型.js组成的三部份之一。
function demo() {
//jQuery和js获取元素的方式不同
var font1=$("test");
var font2=document.getElementById("test");
//dom对象和jQuery对象是不同的,两者不能直接混用
//dom对象和jQuery对象是可以进行转换的
//jQuery对象-->dom对象
var demo=font1[0];
demo=font1.get(0);
//dom对象-->jQuery对象
demo=$(font2);
console.log(demo);
}
3、jQuery对html的基本操作
function demo2() {
//操作属性
console.log($('#test').attr('color'));//取属性attr
$('#test').attr('color','red');//修改属性
//操作文本
console.log($('#test').html());//相当于js中的innerHtml
console.log($('#test').text());//相当于js中的innerText
$('#test').html("<del>哈哈哈</del>");
$('#test').text('<del>嘿嘿嘿</del>');
//操作CSS样式
console.log($('#test').css('backgoundColor'));
$('#test').css('backgroundColor','#6699cc');
//移除属性
$('#test').removeAttr('color');
}
4、jQuery常用的选择器
$(function () {
//奇数选择器
$('tr:odd').css('backgroundColor','#3c6');
//偶数选择器
$('tr.even').css('backgroundColor','#36c');
// eq(第5行), lt(小于5的行), gt(大于5的所有行), 针对索引操作
$('tr:eq(4)').css('backgroundColor', '#666');
// 文本包含选择器,改变所有文本中含数字3的
$('td:contains("3")').css('color', 'red');
});
5、样式切换
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
padding: 2px;
width: 206px;
}
/*提前定义一个样式*/
.style1{
border: 1px solid orange;/*solid加粗*/
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//绑定鼠标悬浮事件
$('#box').mouseover(function () {//js绑定事件多了一个on(onmouseover)
$(this).addClass("style1");//类选择器,选择样式.style1
});
//绑定鼠标移出事件
$('#box').mouseout(function () {
$(this).removeClass('style1');//$(this)将dom对象转化成jQuery对象
})
})
</script>
</head>
<body>
<div id="box">
<img src="images/adidas.jpg" alt="" width="200">
</div>
</body>
</html>
6、操作表单
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
iframe {
width: 49%;
height: 450px;
/*隐藏*/
display: none;
}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 给搜索按钮绑定点击事件
$('#btn').click(function() {
// 获取用户输入的值
var v = $('#content').val();
// 为两个表单的隐藏表单域赋值
$('#wd').val(v);
$('#q').val(v);
// 提交两个表单
$('form').submit();
// 将两个iframe显示
$('iframe').css('display', 'inline-block');
});
});
</script>
</head>
<body>
<form action="https://www.baidu.com/s" target="baidu">
<input type="hidden" name="wd" id="wd">
</form>
<form action="https://www.so.com/s" target="qihu">
<input type="hidden" name="q" id="q">
</form>
<center>
<img src="images/jiasou.jpg" alt="" width="500px" height="300px"><br>
<input type="text" id="content" style="width: 300px; height: 30px">
<input id="btn" type="button" value="搜索" style="width: 70px; height: 35px">
<br><br>
<iframe name="baidu" frameborder="0"></iframe>
<iframe name="qihu" frameborder="0"></iframe>
</center>
</body>
</html>
7、弹球小游戏
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/ball.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ball.js"></script>
</head>
<body>
<div id="box">
<img src="images/ball.jpg" alt="" id="ball">
<input type="button" id="board">
</div>
<br>
<center>
<button id="btn">Start</button>
</center>
</body>
</html>
ball.js
// 小球移动的步长
ballStep = 1;
// 挡板移动的步长
boardStep = 10;
// 标记小球的移动方向
isLeft = false; // 小球是否左移, 默认false
isTop = false; // 小球是否上移, 默认false
$(function() {
// 面板的宽度
boxWidth = parseInt($('#box').css('width'));
boxHeight = parseInt($('#box').css('height'));
// 小球的大小
ballSize = parseInt($('#ball').css('width'));
// 挡板的尺寸
boardWidth = parseInt($('#board').css('width'));
boardHeight = parseInt($('#board').css('height'));
/*开始游戏按钮*/
$('#btn').click(function() {
// 启动游戏
startGame();
// 按钮不可用
$(this).attr('disabled', true);
// 释放按钮上的焦点
$(this).blur();
});
/*键盘事件, 移动挡板*/
window.onkeydown = function(e) {
// 获取挡板的位置
var boardLeft = parseInt($('#board').css('left'));
if(e.keyCode === 37 && boardLeft > 0) {
$('#board').css('left', boardLeft - boardStep + 'px');
} else if (e.keyCode === 39 && boardLeft < boxWidth - boardWidth) {
$('#board').css('left', boardLeft + boardStep + 'px');
}
};
});
function startGame() {
// 间隔执行, 小球移动
timer = setInterval(function() {
// 获取小球当前的位置
var ballLeft = parseInt($('#ball').css('left'));
var ballTop = parseInt($('#ball').css('top'));
// 挡板的位置
var boardLeft = parseInt($('#board').css('left'));
// 小球移动, 修改left和top值, 注意需要加单位px
// 判断小球水平移动的方向
if(ballLeft === boxWidth - ballSize) {
// 到达右边界, 需要左移
isLeft = true;
} else if (ballLeft === 0) {
isLeft = false;
}
// 判断小球垂直移动的方向
if(ballTop === boxHeight - boardHeight - ballSize && (ballLeft >= boardLeft && ballLeft <= boardLeft + boardWidth)) {
// 到达下边界, 需要上移
isTop = true;
} else if(ballTop === 0) {
isTop = false;
}
// 判断游戏是否结束
if(ballTop > boxHeight - boardHeight - ballSize) {
// 清除间隔执行
clearInterval(timer);
// 提示用户
alert('Game Over!');
// 结束程序
return;
}
// 水平方向移动
if(isLeft) {
$('#ball').css('left', ballLeft - ballStep + 'px');
} else {
$('#ball').css('left', ballLeft + ballStep + 'px');
}
// 垂直方向移动
if(isTop) {
$('#ball').css('top', ballTop - ballStep + 'px');
} else {
$('#ball').css('top', ballTop + ballStep + 'px');
}
}, 5);
}
