jQuery
jQuery : 是一个 JavaScript 函数库, 也是一个轻量级的”写的少，做的多”的JavaScript库.
1. 导入jQuery库的方法
第一种:本地导入
<script src="js/jquery.min.js"></script>
第二种:cdn导入法(建议采用)
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>2. jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作
$(function() {
//执行代码
});3. jQuery 的$函数的用法:
(1). 如果$函数的参数是一个函数那么这个函数是文档加载完成之后要执行的回调函数.
(2). 如果$函数的参数是选择器字符串那么$函数会返回代表对应的标签的jQuery对象.
(3). 如果$函数的参数是一个原生JavaScript对象那么$函数会返回与之对应的jQuery对象.
(4). 如果$函数的参数是一个标签字符串那么$函数会创建对应的元素而且返回jQuery对象.
4. 原生的JS对象和jQuery对象如何实现转换?
$(原生JS对象) —> jQuery对象
jQuery对象.get(index) / jQuery对象[index] —> JS对象
注意: jQuery对象的本质是一个数组
5. 对元素的增删改插
实例1:对水果列表进行添加删除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
width: 350px;
height: 70px;
margin: 0 auto;
margin-top: 10px;
background-color: black;
color: white;
font: 36px/70px Arial;
}
#fruits {
width: 350px;
margin: 0 auto;
}
#fruits li {
width: 350px;
height: 75px;
background-color: darkolivegreen;
color: white;
list-style: none;
border-bottom: 1px solid lightgray;
text-align: center;
font: 32px/75px "微软雅黑";
}
#fruits li img {
float: right;
}
#fruits li a:link, #fruits li a:visited {
color: white;
}
#fruits li button {
float: right;
width: 75px;
height: 75px;
border: none;
outline: none;
background-color: coral;
color: white;
}
#fruits li input {
width: 240px;
height: 30px;
text-align: center;
font-size: 22px;
line-height: 30px;
}
#fruits li span {
color: lightgoldenrodyellow;
font-size: 14px;
}
</style>
</head>
<body>
<h1>水果列表</h1>
<ul id="fruits">
<li id="fruit1">苹果<img src="img/icon-trash.png"></li>
<li id="fruit2">香蕉<img src="img/icon-trash.png"></li>
<li id="fruit3">草莓<img src="img/icon-trash.png"></li>
<li>
<input type="text" placeholder="输入水果名称">
<button id="ok">添加</button>
</li>
</ul>
<script src="js/jquery.min.js"></script>
<script>
$(function() { //推荐使用on来绑定事件 target:事件源
function removeItem(evt) {
$(evt.target).parent() //parent() 方法返回被选元素的直接父元素。
.css('position', 'relative')
.animate(
{'left': '-350px', 'height': '0'},
360,
'linear',
function() {
$(this).remove();
}
);
}
$('#fruits li').hide().each(function(index) {
$(this).delay(600 * index).fadeIn(600);
});
$('#fruits li img').on('click', removeItem);
$('#fruits li:lt(3)').one('click', function(evt) {
var target = $(evt.target);
target.append($('<span>').text(target.attr('id')));
})
var index = 4;
$('#ok').on('click', function() { //val():无参取value属性, 有参传值
var fruit = $('#fruits li input').val().trim(); //$.trim() 函数用于去除字符串两端的空白字符。
if (fruit.length > 0) {
$('<li>').text(fruit).attr('id', 'fruit' + index) //$('<li>')创建li标签
.append(
$('<img>').attr('src', 'img/icon-trash.png') //attr() 方法设置或返回被选元素的属性和值
.on('click', removeItem)
)
.one('click', function(evt) {
var target = $(evt.target);
target.append('<span>' + target.attr('id') + '</span>');
})
.insertBefore($('#fruits li:last'))
.hide().fadeIn(600);
$('#fruits li input').val('').focus();
index += 1;
}
});
});
</script>
</body>
</html>6. 跑马灯实例: 点击添加按钮添加方块格, 点击闪烁按钮方块随机变换颜色.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
overflow: hidden;
}
#panel {
width: 800px;
margin: 10px auto;
text-align: center;
}
.piece {
width: 80px;
height: 80px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel">
<button id="addBtn">添加</button>
<button id="flaBtn">闪烁</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b +')';
}
$(function() {
$('#addBtn').on('click', function() {
$('#container').append($('<div>').attr('class', 'piece').css('background-color', randomColor()));
});
$('#flaBtn').one('click', function() {
window.setInterval(function() {
$('#container div').each(function() {
$(this).css('background-color', randomColor());
});
}, 200);
});
});
</script>
</body>
</html>