jquery元素节点操作
创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 通过html的字符串的方式添加节点性能最高
//$('#div1').html($('#div1').html()+'<a href="#">链接</a>')
// 新建一个带有属性的a元素，把它赋值给$a
$a = $('<a href="#">链接</a>');
// 新建一个空的a元素
$a2 = $('<a>');
$p = $('<p>这是一个p元素</p>');
$h2 = $('<h2>这是一个h2</h2>');
$h3 = $('<h3>这是一个h3</h3>');
// 父元素内的后面放入子元素
//$('#div1').append($a);
//子元素放入到父元素内部的后面
$a.appendTo($('#div1'));
$('#div1').append($a2);
// 父元素内的前面放入子元素
//$('#div1').prepend($p);
//子元素放入到父元素内部的前面
$p.prependTo($('#div1'));
//$('#div1').after($h2);
$h2.insertAfter($('#div1'));
//$('#div1').before($h3);
$h3.insertBefore($('#div1'));
})
</script>
</head>
<body>
<div id="div1">
<h1>这是一个H1元素</h1>
</div>
</body>
</html>
插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
$('#div1').remove();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//$('#p1').insertBefore($('#title01'));
$('#title01').before($('#p1'));
$('#span01').appendTo($('#p1'));
$('#link01').prependTo($('#p1'));
$('#title01').remove();
})
</script>
</head>
<body>
<h1 id="title01">这是一个H1元素</h1>
<p id="p1">这是一个p元素</p>
<span id="span01">这是一个span元素</span>
<a href="#" id='link01'>链接</a>
</body>
</html>
a链接的href属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>页面文字内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>页面文字内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>页面文字内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>页面文字内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!-- # 默认会链接到页面顶部 -->
<!-- <a href="#">链接</a> -->
<!-- <a href="javascript:alert('ok!');">链接</a> -->
<!-- 让链接的默认行为是 执行javascript的空语句，也就是什么都不做 -->
<a href="javascript:;">链接</a>
</body>
</html>
todolist 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $inputtxt = $('#txt1');
var $btn = $('#btn1');
var $ul = $('#list');
$btn.click(function(){
// 获取input输入框的内容
var $val = $inputtxt.val();
if($val=="")
{
alert('请输入内容');
return;
}
var $li = $('<li><span>'+ $val +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
/* var $a = $li.find('.del');
$a.click(function(){
$(this).parent().remove();
})*/
$ul.append($li);
$inputtxt.val("");
})
/*
$('.del').click(function(){
$(this).parent().remove();
})*/
$ul.delegate('a','click',function(){
var $handler = $(this).prop('class');
if($handler=='del')
{
$(this).parent().remove();
}
if($handler=='up')
{
if($(this).parent().prev().length==0)
{
alert('到顶了！');
return;
}
$(this).parent().insertBefore( $(this).parent().prev() );
}
if($handler=='down')
{
if($(this).parent().next().length==0)
{
alert('到底了！');
return;
}
$(this).parent().insertAfter( $(this).parent().next() );
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
//var i = 0;
$(window).mousewheel(function(event,dat){
alert(dat);
//i++;
//console.log(i);
})
</script>
</head>
<body>
</body>
</html>
js制作CSS3动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('.box').addClass('moving');
})
})
</script>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
margin:50px auto 0;
transition:all 1s ease;
}
.moving{
transform:rotate(135deg);
}
</style>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div>
</body>
</html>
函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
整屏滚动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整页滚动</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var $screen = $('.pages_con');
var $pages = $('.pages');
var $len = $pages.length;
var $h = $(window).height();
var $points = $('.points li');
var timer = null;
var $nowscreen = 0;
$pages.css({'height':$h});
$pages.eq(0).addClass('moving');
$points.click(function(){
$nowscreen = $(this).index();
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
$screen.animate({'top':-$h*$nowscreen},300);
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
})
$(window).mousewheel(function(event,dat){
clearTimeout(timer);
timer = setTimeout(function(){
if(dat==-1)
{
$nowscreen++;
}
else
{
$nowscreen--;
}
if($nowscreen<0)
{
$nowscreen=0;
}
if($nowscreen>$len-1)
{
$nowscreen=$len-1;
}
$screen.animate({'top':-$h*$nowscreen},300);
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
},200)
})
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
幻灯片案例
$(function(){
var $slide = $('.slide');
//选取所有的幻灯片
var $li = $('.slide_list li');
//获取幻灯片的个数
var $len = $li.length;
//选择小圆点的容器
var $points_con = $('.points');
// 要运动过来的幻灯片的索引值
var nowli = 0;
// 要离开的幻灯片的索引值
var prevli = 0;
var $prev = $('.prev');
var $next = $('.next');
var timer = null;
var ismove = false;
// 根据幻灯片的个数，动态创建小圆点
for(var i=0;i<$len;i++)
{
var $newli = $('<li>');
//第一个小圆点含有'active'的样式
if(i==0)
{
$newli.addClass('active');
}
$newli.appendTo($points_con);
}
//第一个幻灯片不动，将其他的幻灯片放到右边去
$li.not(':first').css({'left':760});
// 获取小圆点
var $points = $('.points li');
//小圆点点击切换幻灯片
$points.click(function(){
nowli = $(this).index();
// 修复重复点击的bug
if(nowli==prevli)
{
return;
}
$(this).addClass('active').siblings().removeClass('active');
move();
})
//向前的按钮点击切换幻灯片
$prev.click(function(){
if(ismove)
{
return;
}
ismove = true;
nowli--;
move();
$points.eq(nowli).addClass('active').siblings().removeClass('active');
})
//向后的按钮点击切换幻灯片
$next.click(function(){
if(ismove)
{
return;
}
ismove = true;
nowli++;
move();
$points.eq(nowli).addClass('active').siblings().removeClass('active');
})
timer = setInterval(autoplay,5000);
$slide.mouseenter(function(){
clearInterval(timer);
});
$slide.mouseleave(function(){
timer = setInterval(autoplay,3000);
});
function autoplay(){
nowli++;
move();
$points.eq(nowli).addClass('active').siblings().removeClass('active');
}
// 幻灯片运动函数，通过判断nowli和prevli的值来移动对应的幻灯片
function move(){
// 第一张幻灯片往前的时候
if(nowli<0)
{
nowli = $len-1;
prevli = 0;
$li.eq(nowli).css({'left':-760});
$li.eq(nowli).animate({'left':0});
$li.eq(prevli).animate({'left':760},function(){
ismove = false;
});
prevli = nowli;
return;
}
//最后一张幻灯片再往后的时候
if(nowli>$len-1)
{
nowli = 0;
prevli = $len-1;
$li.eq(nowli).css({'left':760});
$li.eq(nowli).animate({'left':0});
$li.eq(prevli).animate({'left':-760},function(){
ismove = false;
});
prevli = nowli;
return;
}
// 幻灯片从右边过来
if(nowli>prevli)
{
// 把要过来的幻灯片先放到右边去
$li.eq(nowli).css({'left':760});
$li.eq(prevli).animate({'left':-760});
}
else //幻灯片从左边过来
{
// 把要过来的幻灯片先放到左边去
$li.eq(nowli).css({'left':-760});
$li.eq(prevli).animate({'left':760});
}
$li.eq(nowli).animate({'left':0},function(){
ismove = false;
});
prevli = nowli;
}
})
2676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
