jQuery
jQuery 入口函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.7.1.min.js" charset="UTF-8" ></script>
<script type="text/javascript">
// 第一种入口函数
// $(document).ready(function(){
// alert('jquery的第一个程序效果实现');
// });
// 第二种入口函数
// jQuery(document).ready(function(){
// alert('jquery的第一个程序效果实现');
// });
// 第三种入口函数
$(function(){
alert('jquery的第一个程序效果实现');
});
</script>
</head>
<body>
</body>
</html>
jQuery 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.7.1.min.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
// 通过length可以获取元素的个数
// alert($(document).length);
// 选择id为li-01的元素
// alert($('#li-01').length);
// 选择类名为li-02的元素
// alert($('.li-02').length);
// 选择li标签中id为li-01的元素
// alert($('li[id=li-01]').length);
// 选择ul的所有后代li的元素
// alert($('ul li').length);
// 选择第一个div元素并为其设置样式
// alert($('div:first').css('background-color','red'));
// 选择li标签中所有奇数行并为其设置样式
// alert($('li:odd').css('background-color','yellow'));
// 选择div标签所有偶数行并为其设置样式
// alert($('div:even').css('background-color','gray'));
// 选择 id 为 ul-01元素下的第 1个 li
// alert($('#ul-01 li:eq(1)').css('background-color','yellowgreen'));
// 选择 id 为 ul-01 元素下的前3个之后的 li
// alert($('#ul-01 li:gt(2)').css('background-color','tan'));
// 选择 id 为 ul-01 元素下的前4个的 li
// alert($('#ul-01 li:lt(4)').css('background-color','hotpink'));
// 选择表单中的 input 元素
alert($('#myform :input').length);
})
</script>
</head>
<body>
<div id="div1">
<form id="myform">
<input type="text" name="username"/>
<input type="password" name="psw" />
</form>
</div>
<div>2</div>
<div>3</div>
<ul id="ul-01">
<li id="li-01">1</li>
<li class="li-02">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
对选择集进行函数过滤及转移
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divClass_01{
width: 300px;
height: 300px;
background: red;
}
.divClass_02{
width: 500px;
height:500px;
background: red;
border-radius: 50%;
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//has(): 选择包含该元素的 元素 ，返回对象类型
//alert($('#div1').has('p').css('background-color','aquamarine')); //[object Object] 返回对象类型
// not(元素): 选择除了该元素以外的其他元素
// $('#div1 p').not('.p1').css('background-color','red');
// 选择 class 等于 div1的 div 元素
// alert($('div').filter('#div1').css('background-color','palevioletred'));
// 选择在id名称的任意位置有iv 的 div 元素
//alert($('div').filter('[id*=iv]').css('background-color','palevioletred'));
// 选择在id名称的结束位置有iv 的 div 元素
//alert($('div').filter('[id$=1]').css('background-color','palevioletred'));
// /选择id名为div2元素前面的第一个 p 元素
//alert($('#div2').prev('p').css('background-color','red'));
// 选择id名为 div2元素后面的第一个 p元素
// $('#div2').next('p').css('background-color','palegreen');
// 选择离 div 最近的那个 form 父元素
//$('div').closest('form').css('background-color','red');
// /选择id为 div2的父元素
// $('#div2').parent().css('background-color','red');
// 选择 div的所有子元素
// $('div').children().css('background-color','yellow');
// 选择id为ul-01的同级元素
//$('#ul_01').siblings().css('background-color','red');
// 选择id为ul-01内的 ul的元素
//$('#ul_01').find('ul').css('background-color','goldenrod');
// $('#a_01').parent().parent().siblings().css(
// {
// backgroundColor:'red',
// fontSize:'24px',
// color:'yellow'
// }
//
// );
// 添加多个样式
// $('div:eq(1)').addClass('divClass_01 divClass_02');
// 重复切换divClass_02样式
$('div:eq(1)').toggleClass('divClass_02');
});
</script>
</head>
<body>
<div id="div1">
<p class="p1">段落1</p>
<p class="p2">段落2</p>
</div>
<p class="p2">段落2</p>
<p class="p3">段落3</p>
<p class="p4">段落4</p>
<div>
<div id='div2'>div2</div>
div元素
<form>
<label>账户;</label>
<input type="text" />
</form>
</div>
<ul id="ul_01">
<li><a href="#">首页</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">商城购物</a></li>
<li>
<a href="#">其他</a>
<ul>
<li><a href="#">童装</a></li>
<li><a href="#">男装</a></li>
<li><a href="#" id="a_01">女装</a></li>
</ul>
</li>
</ul>
</body>
</html>
jQuery 属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// alert($('#div1').html());
//alert($('#div1').text());
//$('#div1').html('<h1>通过属性设置标签之间的内容</h1>');
//$('#div1').text('<h1>通过属性设置标签之间的内容</h1>');
//alert($('img').attr('src'));
//设置元素属性src的值
$('img').attr({src:'img/1.jpg'});
})
</script>
</head>
<body>
<div id="div1"><p>通过属性获取标签元素之间的内容</p></div>
<img src="img/3.jpg" />
</body>
</html>
jQuery 的特效效果及链式调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 100px;
display: none;
background-color: yellow;
margin-bottom: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
var inp1=$(':input[name=UserName]');
var divs=$('div');
inp1.click(function(){
// 淡入
divs.fadeIn(1000);
// 淡出
// divs.fadeOut(1000);
// 切换淡入和淡出
// divs.fadeToggle(1000);
// 显示
// divs.show(1000);
// 隐藏
// divs.hide(1000);
// 依次显示或隐藏
// divs.toggle(1000);
// 向下展开
// divs.slideDown(1000);
// 向上卷起
// divs.slideUp(1000);
// 依次展开或卷起某元素
// divs.slideToggle(1000);
})
})
</script>
</head>
<body>
<input type="button" value="点击" name="UserName" />
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
jQuery 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#div1').animate({
width:300,
height: 500,
borderRadius:50+"%"
},1000,function(){
alert('动画执行完了');
})
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>