1.概述
元素选择
样式操作
兼容问题
批量控制
节点操作
整体感知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background: orange;
position: absolute;
}
p{
width: 100px;
height: 100px;
border-radius: 50%;
background: orange;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<!--<div class="box">
<p>
pppp
<span>span</span>
</p>
</div>-->
<!--<div class="box"></div>-->
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
console.log($('.box p span'));
// $是jQuery的简写
console.log(jQuery('.box p span'));
// 样式
$('.box p span').css('background', 'red');
// 多个样式使用json
$('.box p').css({
'width': 200,
'height': 200,
'background': 'pink',
'opacity': 0.5
});
// 动画
$('.box').animate({'left': 300, 'height': 300, 'opacity': 0.3}, 1000, function() {
console.log('运动完成');
});
// 批量监听
$('p').mouseenter(function (event) {
// 当前元素变红,兄弟元素变橘
$(this).css('background', 'red').siblings().css('background', 'orange');
})
</script>
</body>
</html>
2.选择元素
// 修改背景色
// $('.box').css('background', 'blue');
// 不能直接赋值
// $('.box').style.background = 'blue';
// var box = document.getElementsByTagName('div')[0];
// $(box).css('background', 'orange');
// $('.box')[0].style.background = 'blue';
// 以下不加引号
// $(this) $(document) $(window)
// 选择器
// $('.haha p span').css('background', 'red');
// 后继元素
// $('.haha+span').css('background', 'red');
// id选择器
// 筛选器
// $('p').css('background', 'red');
// $('p:first').css('background', 'red');
// $('p:last').css('background', 'red');
// $('p:lt(3)').css('background', 'red');
// $('p:eq(3)').css('background', 'red');
// 奇数
// $('p:even').css('background', 'red');
// 偶数
// $('p:odd').css('background', 'blue');
// 表格隔行变色
// $('tr:even').css('background', 'red');
// eq提出来可以使用变量
// $('tr').eq(3).css('background', 'red');
3. CSS函数
// var box = document.getElementsByTagName('div')[0];
// window.getComputedStyle(box).getPropertyValue('width');
// console.log($('.box').css('width'));
// alert($('.box').css('width'));
// $('.box').css('width', '300px');
// $('.box').css('width', '+=200px');
// 驼峰与中划线等价
// console.log($('.box').css('font-size'));
// 多个属性
$('.box').css({
'width': 500,
'height': 500,
'background': 'gray'
});
4.animate
// var box = document.getElementsByTagName('div')[0];
// animate(box, {'left': 500}, 2000, function () {
// this.style.background = 'red';
// animate(box, {'top': 500}, 2000);
// });
// 两个动画会交错执行
// $('.box').animate({'left': 500}, 2000);
// jquery对于同一元素的运动排队
// $('.box').animate({'top': 500}, 2000);
// 斜着走
// $('.box').animate({'left': 500, 'top': 500}, 2000);
// 不同元素不排队
$('.box').animate({'left': 500}, 2000);
$('.box2').animate({'left': 500}, 2000);
5.事件监听
// var box = document.getElementById('idbox');
// box.onclick = function () {
// console.log('onclick');
// }
// jq事件都不加on
$('#idbox').click(function () {
console.log('click');
});
$('#idbox').mouseenter(function () {
console.log('mouseenter');
});
$('#idbox').mouseleave(function () {
console.log('mouseleave');
});
2.轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.m_unit{
width: 10000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul {
overflow: hidden;
}
.m_unit ul li {
list-style: none;
width: 560px;
height: 300px;
float: left;
}
.btn span{
width: 55px;
height: 55px;
background: url("images/dog/btnL.png");
position: absolute;
border-radius: 10px;
top: 50%;
margin-top: -28px;
}
.btn span.rightBtn{
background: url("images/dog/btnR.png");
right: 0;
}
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}
.circle ul {
overflow: hidden;
}
.circle {
position: absolute;
bottom: 10px;
left: 50%;
}
.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id="idbox">
<div class="m_unit" id="m_unit">
<ul>
<li><a href=""><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href=""><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href=""><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href=""><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href=""><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>
<div class="btn">
<span class="leftBtn" id="leftBtn"></span>
<span class="rightBtn" id="rightBtn"></span>
</div>
<div class="circle" id="circle">
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// TODO
// 获取图片长度
var imgLength = $('#m_unit ul li').length;
// 拼接假0
$('.m_unit ul').append($('#m_unit ul li').eq(0).clone());
// 信号量
var idx = 0;
// 右按钮点击事件
$('#rightBtn').click(rightBtnHandler);
function rightBtnHandler() {
idx++;
$('#m_unit').animate({'left': -560 * idx}, 1000, function () {
if(idx > imgLength-1) {
idx = 0;
$('#m_unit').css('left', '0px');
}
});
circleChange();
}
// 左按钮点击事件
$('#leftBtn').click(function () {
idx--;
if(idx < 0) {
idx = imgLength - 1;
$('#m_unit').css('left', -560*imgLength);
}
$('#m_unit').animate({'left': -560 * idx}, 1000);
circleChange();
});
function circleChange() {
var idxx = idx;
if(idxx > imgLength-1) {
idxx = 0;
}
$('#circle ul li').eq(idx).css('background', 'red').siblings()
.css('background', 'orange');
}
var timer = setInterval(function () {
rightBtnHandler
}, 1000);
$('#box').mouseenter(function () {
clearInterval(timer);
});
$('#box').mouseleave(function () {
imer = setInterval(function () {
rightBtnHandler
}, 1000);
});
</script>
</body>
</html>
3.序与迭代
// 返回亲兄弟中的排名
/* console.log($('#haha').index());
console.log($('#xixi').index());*/
// 对应模型
/* $('#box1 p').click(function () {
$('#box2 p').eq($(this).index()).css('background', 'red');
});*/
$('p').each(function (i) {
// console.log(i);
$(this).animate({'width': 50*(i+1)}, 1000);
});
4.显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background: skyblue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<!--
<button>show()</button>
<button>hide()</button>
<button>toggle()</button>
<button>slideDown()</button>
<button>slideUp()</button>
<button>slideToggle()</button>
<button>fadeIn()</button>
<button>fadeOut()</button>
<button>fadeTo()</button>
<button>fadeToggle()</button>-->
<button id="delay">delay</button>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
/*// 显示,
$('button').eq(0).click(function () {
// $('.box').show();
$('.box').show(1000);
});
// 隐藏
$('button').eq(1).click(function () {
// $('.box').hide();
// 过渡时间
$('.box').hide(1000);
});
// 显示隐藏切换
$('button').eq(2).click(function () {
$('.box').toggle();
});
$('button').eq(3).click(function () {
$('.box').slideDown(1000);
});
$('button').eq(4).click(function () {
$('.box').slideUp(1000);
});
$('button').eq(5).click(function () {
$('.box').slideToggle(1000);
});
// 淡入
$('button').eq(6).click(function () {
$('.box').fadeIn(1000);
});
// 淡出
$('button').eq(7).click(function () {
$('.box').fadeOut(1000);
});
$('button').eq(8).click(function () {
$('.box').fadeTo(1000, 0.5);
});
$('button').eq(9).click(function () {
$('.box').fadeToggle(1000);
});*/
$('#delay').click(function () {
// 延迟
// $('.box').delay(1000).animate({'left': 500}, 2000);
// $('.box').delay(1000).slideUp(1000);
// $('.box').delay(1000).fadeOut(1000);
// 不是动画,没有延迟
// $('.box').delay(1000).hide();
// 延迟后瞬间隐藏
$('.box').delay(1000).hide(1);
});
</script>
</body>
</html>
5.节点关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<div class="box" id="box">haha<!– haha –></div>-->
<!--<div id="box">
<p>ppp</p>
</div>-->
<div id="box">
<p>ppp1</p>
<p>ppp2</p>
<p>ppp3</p>
<p>ppp4</p>
<p>ppp5</p>
<p>ppp6</p>
</div>
<script>
/* var box = document.getElementById('box');
// 1
console.log(box.nodeType);
// 节点名字
console.log(box.nodeName);
// 9
console.log(document.nodeType);
// 3 文本节点 也有nodeName
console.log(box.childNodes[0].nodeType)
// 8 注释节点 也有nodeName
console.log(box.childNodes[1].nodeType)*/
/* var haha = {
'left': 500,
'top': 500
};
console.log(haha.nodeType);*/
// 子节点
var box = document.getElementById('box');
// chrome标签换行也作为了节点(兼容问题)
// alert(box.childNodes.length);
// box.childNodes[0].style.background = 'red';
var arr = [];
for (var i = 0; i < box.childNodes.length; i++) {
if(box.childNodes[i].nodeType == 1) {
arr.push(box.childNodes[i]);
}
}
// arr[0].style.background = 'red';
// 父节点
// arr[1].parentNode.style.background = 'red';
// body
// arr[1].parentNode.parentNode.style.background = 'red';
</script>
</body>
</html>
6.父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cur {
background: red;
}
</style>
</head>
<body>
<ul>
<li><input type="checkbox" checked="checked"> 吃饭</li>
<li><input type="checkbox"> 睡觉</li>
<li><input type="checkbox"> 撸代码</li>
</ul>
<script>
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].onclick = function () {
this.parentNode.className = this.checked ? 'cur' : '';
/* if(this.checked) {
this.parentNode.className = 'cur';
} else {
this.parentNode.className = '';
}*/
} ;
}
</script>
</body>
</html>
7.previoussiblings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<p>0</p>
<p>1</p>
<p id="haha">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
<script>
var haha = document.getElementById("haha");
// chrome兼容问题
// haha.previousSibling.style.background = 'red';
var box = document.getElementById('box');
/* var arr = [];
for (var i = 0; i < box.childNodes.length; i++) {
if(box.childNodes[i].nodeType == 1) {
arr.push(box.childNodes[i]);
}
}*/
/* console.log(arr.length);
for (var i = 0; i < 3; i++) {
arr[i].style.background = 'red';
}*/
// haha之前的所有元素
var hahaPrev = haha;
while(hahaPrev = hahaPrev.previousSibling) {
if(hahaPrev.nodeType == 1) {
hahaPrev.style.background = 'red';
}
}
var hahaNext = haha;
while(hahaNext = hahaNext.nextSibling) {
if(hahaNext.nodeType == 1) {
hahaNext.style.background = 'orange';
}
}
</script>
</body>
</html>
8.jquery节点关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 100px;
height: 100px;
background: skyblue;
border-radius: 50%;
float: left;
margin-right: 10px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
/* var ps = document.getElementsByTagName('p');
for (var i = 0; i < ps.length; i++) {
ps[i].onclick = function() {
for (var j = 0; j < ps.length; j++) {
ps[j].style.background = 'skyblue';
}
this.style.background = 'red';
}
}*/
// 排他模型
$('p').click(function () {
// $('p').css('background', 'skyblue');
// $(this).css('background', 'red');
// 剩余元素
// $(this).siblings().css('background', 'skyblue');
// $(this).css('background', 'red')
// .siblings().css('background', 'skyblue');
// 筛选
$(this).css('background', 'red')
.siblings(':first').css('background', 'pink');
});
// $('.haha').prev().css('background', 'red');
// $('.haha').next().css('background', 'orange');
//
// $('.haha').prevAll(':even').css('background', 'red');
// $('.haha').nextAll(':odd').css('background', 'orange');
</script>
</body>
</html>
9.原声js节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>楚楚</li>
<li>瑞瑞</li>
<li>纯纯</li>
</ul>
<div id="box"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// 创建元素
/* var newLi = document.createElement('li');
newLi.innerHTML = '小郝';
var list = document.getElementById('list');
// 拼接元素
list.appendChild(newLi);
// 不要拼接已经存在于dom树上的节点*/
// var box = document.getElementById('box');
// box.innerHTML = '<p>hahaha</p>';
// 插入在元素之前
// var newLi = document.createElement('li');
// newLi.innerHTML = '小豪';
// var list = document.getElementById('list');
// var lis = document.getElementsByTagName('li');
// list.insertBefore(newLi, lis[1])
// 删除节点(父节点删除子节点)
// var lis = document.getElementsByTagName('li');
// var list = document.getElementById('list');
// list.removeChild(lis[0]);
// lis[0].parentNode.removeChild(lis[0]);
// 替换节点
// var list = document.getElementById('list');
// var newLi = document.createElement('li');
// newLi.innerHTML = '小郝';
// 文本节点兼容问题
// console.log(list.childNodes);
// list.replaceChild(newLi, list.childNodes[1]);
// 复制节点
var lis = document.getElementsByTagName('li');
var list = document.getElementById('list');
// true节点内容也复制
list.appendChild(lis[0].cloneNode(true));
</script>
</body>
</html>
网友评论