jquery实践
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Jquery体验</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
//alert("aaaa"+$(this).min(1,2));//调用jquery自定义fn函数
alert("aaaa"+jQuery.min(1,2));//调用jquery自定义函数
$('#btn').attr('disabled',false);
$('div').show('slow',function(){alert('显示隐藏的元素');});//显示某个被隐藏的元素
});
//$("<div><p>第一个子节点</p></div>").appendTo($('body'));
//$("<div><p>第一个子节点</p></div>").appendTo("body");
})
//jquery自定义函数
jQuery.fn.extend({
min:function(num1,num2){return num1>num2?num2:num1;},
max:function(num1,num2){return num1>num2?num1:num2;}
});
jQuery.extend({
min:function(num1,num2){return num1>num2?num2:num1;},
max:function(num1,num2){return num1>num2?num1:num2;}
});
/*============================================*/
$(function(){
$('#btn').click(function(){
$(this).attr("disabled",true);//document和Jquery对象的不同
// this.value="document!";
// alert('aaa');
// $(this).val("jquery");
//注意和val的差别
alert($('a').html());//获取innerhtml值
$('a').html('改变值');//改变innerhtml值
$('div').hide('slow',function(){alert("隐藏DIV");});//隐藏匹配的元素
});
//setInterval('jQuery.fadeTest()',2000);
//setInterval('jQuery.slideTest()',2000);
})
jQuery.extend(
{
fadeTest:function(){
//淡入淡出操作
$('#myP').fadeOut('slow');
$('#myP').fadeIn('slow');
$('#myP').fadeTo('slow',0.14);
},
//滑动效果
slideTest:function(){
//$('.my').slideUp('slow');
//$('.my').slideDown('slow');
$('.my').slideToggle('slow');
}
});
/*==================动画效果===================*/
$(function(){
$('#btn1').click(function(){
alert(1);
$("#black").animate(
{ width: "20%",fontColor:"red"}, { queue: false, duration: 5000 }).animate( {fontSize: '10em' } , 1000 ).animate( { borderWidth: 5 }, 1000);
});
$("#btn2").click(function(){
alert(2);
$("#black1").animate( { width: "90%",fontColor:"green"}, 1000 ).animate( { fontSize: '10em' } , 1000 ).animate( { borderWidth: 5 }, 1000);
});
});
/*===============子元素操作==================*/
$(function(){
/*
$('.myClass').html('get myClass node!!');
alert($('ul li:first-child').html());
alert($('ul li').html());//匹配到第一个元素
$('ul li').each(function(){
alert($(this).html());
});
$('ul li:first-child').each(function(){
alert($(this).html());
});
*/
$('#tab tr:nth-child(2n+1)').each(function(){
$(this).remove();
});
$('#tab tr:nth-child(2n)').each(function(){
//$(this).attr("bgColor","red");
$(this).css("background-color","red");
// $(this).attr("style","backgroundColor:red");//这里没有效果
});
$('td').width(70);
$('#prepend').prepend($('b'));
$('b').empty();
});
</script>
</head>
<body>
<a href="#">aaa</a>
<input value='确定' type="button" id="btn" >
<div > 吃食去吧!!</div>
<P id="myP">
淡入淡出效果!<br/>
淡入淡出效果!<br/>
淡入淡出效果!<br/>
淡入淡出效果!<br/>
淡入淡出效果!<br/>
</p>
<p class="my" >
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
</p>
<br/>
自定义的动画显示
<input type="button" value="no quence" id="btn1">
<input type="button" value="quence" id="btn2"><br/>
<div id="black">black!!</div><div id="black1">black1!!</div>
<br/>
<p class="myClass">myClass</p>
<p class="myClass">myClass</p>
<br/>
<ul>
<li>first child</li>
<li>second child</li>
<li>third child</li>
<li>fourth child</li>
</ul>
<ul>
<li>another first child</li>
</ul>
<table id="tab" border="1" cellspacing='0' cellpading='0'>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
</tr>
</table>
<br/>
<p id="prepend">my babay!</p><b>oh yeah!</b>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Jquery体验</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
//alert("aaaa"+$(this).min(1,2));//调用jquery自定义fn函数
alert("aaaa"+jQuery.min(1,2));//调用jquery自定义函数
$('#btn').attr('disabled',false);
$('div').show('slow',function(){alert('显示隐藏的元素');});//显示某个被隐藏的元素
});
//$("<div><p>第一个子节点</p></div>").appendTo($('body'));
//$("<div><p>第一个子节点</p></div>").appendTo("body");
})
//jquery自定义函数
jQuery.fn.extend({
min:function(num1,num2){return num1>num2?num2:num1;},
max:function(num1,num2){return num1>num2?num1:num2;}
});
jQuery.extend({
min:function(num1,num2){return num1>num2?num2:num1;},
max:function(num1,num2){return num1>num2?num1:num2;}
});
/*============================================*/
$(function(){
$('#btn').click(function(){
$(this).attr("disabled",true);//document和Jquery对象的不同
// this.value="document!";
// alert('aaa');
// $(this).val("jquery");
//注意和val的差别
alert($('a').html());//获取innerhtml值
$('a').html('改变值');//改变innerhtml值
$('div').hide('slow',function(){alert("隐藏DIV");});//隐藏匹配的元素
});
//setInterval('jQuery.fadeTest()',2000);
//setInterval('jQuery.slideTest()',2000);
})
jQuery.extend(
{
fadeTest:function(){
//淡入淡出操作
$('#myP').fadeOut('slow');
$('#myP').fadeIn('slow');
$('#myP').fadeTo('slow',0.14);
},
//滑动效果
slideTest:function(){
//$('.my').slideUp('slow');
//$('.my').slideDown('slow');
$('.my').slideToggle('slow');
}
});
/*==================动画效果===================*/
$(function(){
$('#btn1').click(function(){
alert(1);
$("#black").animate(
{ width: "20%",fontColor:"red"}, { queue: false, duration: 5000 }).animate( {fontSize: '10em' } , 1000 ).animate( { borderWidth: 5 }, 1000);
});
$("#btn2").click(function(){
alert(2);
$("#black1").animate( { width: "90%",fontColor:"green"}, 1000 ).animate( { fontSize: '10em' } , 1000 ).animate( { borderWidth: 5 }, 1000);
});
});
/*===============子元素操作==================*/
$(function(){
/*
$('.myClass').html('get myClass node!!');
alert($('ul li:first-child').html());
alert($('ul li').html());//匹配到第一个元素
$('ul li').each(function(){
alert($(this).html());
});
$('ul li:first-child').each(function(){
alert($(this).html());
});
*/
$('#tab tr:nth-child(2n+1)').each(function(){
$(this).remove();
});
$('#tab tr:nth-child(2n)').each(function(){
//$(this).attr("bgColor","red");
$(this).css("background-color","red");
// $(this).attr("style","backgroundColor:red");//这里没有效果
});
$('td').width(70);
$('#prepend').prepend($('b'));
$('b').empty();
});
</script>
</head>
<body>
<a href="#">aaa</a>
<input value='确定' type="button" id="btn" >
<div > 吃食去吧!!</div>
<P id="myP">
淡入淡出效果!<br/>
淡入淡出效果!<br/>
淡入淡出效果!<br/>
淡入淡出效果!<br/>
淡入淡出效果!<br/>
</p>
<p class="my" >
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
滑动效果显示!<br/>
</p>
<br/>
自定义的动画显示
<input type="button" value="no quence" id="btn1">
<input type="button" value="quence" id="btn2"><br/>
<div id="black">black!!</div><div id="black1">black1!!</div>
<br/>
<p class="myClass">myClass</p>
<p class="myClass">myClass</p>
<br/>
<ul>
<li>first child</li>
<li>second child</li>
<li>third child</li>
<li>fourth child</li>
</ul>
<ul>
<li>another first child</li>
</ul>
<table id="tab" border="1" cellspacing='0' cellpading='0'>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>40</td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td>50</td>
<td>51</td>
<td>52</td>
</tr>
</table>
<br/>
<p id="prepend">my babay!</p><b>oh yeah!</b>
</body>
</html>