jquery实践

最新推荐文章于 2021-04-01 13:14:34 发布

theabab

最新推荐文章于 2021-04-01 13:14:34 发布

阅读量36

点赞数

分类专栏：知识累积文章标签： jQuery HTML CSS ViewUI

知识累积专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<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>

theabab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实践

Jquery体验 $(function(){$('a').click(function(){ //alert("aaaa"+$(this).min(1,2));//调用jquery自定义fn函数 alert("aaaa"+jQuery.min(1,2));//调用jquery自定义函数 $('#btn').attr('disabled',f...
复制链接

扫一扫