1.为什么要使用jQuery?
jQuery最近比较流性，由于其优秀的设计和架构，使得开发更容易和快捷了。以下可以认为是jQuery的有点有参考价值：
1.jQuery代码的独特写法
2.jQuery可以和JavaScript共存融合
3.强大的网页元素操作效率
4.对浏览器兼容性非常友好和大量的工具集
2.取值和赋值和遍历操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>取值和遍历</title>
<script src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//val()没有参数表示获取值，有参数表示设置值
alert($(‘input‘).val());
$(‘input‘).val(‘Hello jQuery!!!‘);
//第一个参数表示元素索引值，第二个参数表示元素对象本身
$(‘li‘).each(function(index,elem){
$(elem).html(index + 1);
});
});
</script>
</head>
<body>
<input type="button" value="按钮">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>3.属性操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>5_jQuery中的属性操作</title>
<script src="../jquery-1.8.3.js"></script>
<style type="text/css">
div{width: 50px;height: 50px;background: yellowgreen;padding: 60px;border: 70px solid red;}
.box1{background: yellow;}
.box2{background: blue;}
</style>
<script type="text/javascript">
$(function(){
//$(‘div‘).addClass(‘.box1 .box2‘);//打开浏览器调试工具才能看到
alert($(‘.box‘).width());//width 50
alert($(‘.box‘).innerWidth());//width + padding 50+60+60=170
alert($(‘.box‘).outerWidth());//width + padding + border 50+60+60+70+70=310
});
</script>
</head>
<body>
<div class="box">jQuery</div>
</body>
</html>4.DOM操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>6_jQuery DOM操作</title>
<script src="../jquery-1.8.3.js"></script>
<style type="text/css">
body{height: 2000px;}
div{width: 100px;height: 100px;background: greenyellow;}
p{background: gray;}
span{background: seagreen;}
</style>
<script type="text/javascript">
$(function(){
$(‘span‘).insertBefore($(‘div‘));//对dom节点的剪切移动并非复制
$(‘span‘).remove();//移除span
//on方法里面还可以调用自定义方法非常方便使用
$(‘div‘).on({
‘click‘:function() {
alert(‘jQuery‘);
},
‘mouseover‘:function(){
alert(‘Bootstrap‘);
}
});
//off方法是阻止某个方法的执行
$(‘div‘).on(‘click mouseover‘,function(){
alert(‘jQuery‘);
$(‘div‘).off(‘click‘);
});
$(document).click(function(){
alert( $(window).scrollTop() );//滚动的高度
});
});
</script>
</head>
<body>
<div>jQuery</div>
<p>Bootstrap</p>
<span>HTML5</span>
</body>
</html>5.事件细节
<script type="text/javascript">
$(function(){
$(‘#box‘).click(function(ev){
//ev：event对象，已经处理过的兼容事件对象 这里的ev相当于JavaScript中的var ev = ev || window.event ;
//alert(ev.pageX);
//ev.pageX是相对于文档的
//clientX是JavaScript原生方法相对于可视区
//ev.whick:keyCode 键盘事件
//ev.preventDefault();//阻止默认事件
//ev.stopPropagation();//阻止冒泡事件
return false ;//阻止默认事件和冒泡事件
});
});
</script>6.动画（案例）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
body,ul,li,div,a{margin: 0;padding: 0;}
#menu{margin: 0 auto;}
#box{width: 120px;height: 36px;background: #ECE8E7;line-height: 36px;text-align: center;}
#win{width: 120px;height: 100px;}
a{text-decoration: none;}
a:hover{background: pink;display: block;}
ul{width: 120px;background: #F8F8F8;}
li{list-style: none;height: 36px;line-height: 36px;font-size: 18px;text-align: center;
border: 1px solid #ECE8E7;color: #888888;}
</style>
<script src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$(‘#box‘).hover(function(){
//$(this).css(‘background‘,‘blue‘);
//$(‘#win‘).hide();
//$(‘#win‘).fadeOut(1000);
$(‘#win‘).slideDown(1000);
},function(){
//$(this).css(‘background‘,‘pink‘);
//$(‘#win‘).show();
//$(‘#win‘).fadeIn(1000);
$(‘#win‘).slideUp(1000);
});
});
</script>
</head>
<body>
<div id="menu">
<div id="box">WEB前端开发</div>
<div id="win">
<ul>
<li>
<a href="#">jQuery</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">Bootstrap</a>
</li>
<li>
<a href="#">AngularJS</a>
</li>
<li>
<a href="#">Node JS</a>
</li>
</ul>
</div>
</div>
</body>
</html>
7.案例：固定的导航栏
思路：当滚动条滚动的时候动态设置导航栏的位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
body,div{padding: 0;margin: 0;}
#box{width: 100%;height: 150px;background: gainsboro;position: absolute;}
</style>
<script src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
/*
当滚动滚动条的时候顶部导航栏不变
思路：当触发滚动事件的时候重新计算div的top值
*/
$(function(){
$(window).on(‘resize scroll‘,function(){
$(‘#box‘).css(‘left‘,0);
$(‘#box‘).css(‘top‘, $(window).scrollTop());
});
});
</script>
</head>
<body style="height: 2000px;">
<div id="box"></div>
</body>
</html>
时间： 2024-08-11 11:58:54