jQuery 基本实现功能模板

浏览数：45 / 时间：2015年06月09日

下面是列出了基本功能的实现

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){

<!--选择器-->
  $("p").click(function(){
    $(this).hide();
  });
<!--事件-->  
  $("#button1").click(function(){
   window.alert("单击事件");
  })
  $("#button2").dblclick(function(){
   window.alert("双击事件");
  })
  $("#button3").mouseenter(function(){
   window.alert("鼠标移动事件");
  })
  <!--隐藏和显示--> 
  $("#hide").click(function(){
    $(".showtext").hide();
  });
  $("#show").click(function(){
    $(".showtext").show();
  });
  $("#toggle").click(function(){
    $(".showtext").toggle();
  });
  <!--动画--> 
    $("#animate").click(function(){
		$(".animate").animate({
		  left:‘250px‘,
		  opacity:‘0.5‘,
		  height:‘150px‘,
		  width:‘150px‘
		});
	});
  
    <!--操作DOM对象--> 
	  $("#btn1").click(function(){
		alert("Text: " + $("#test").text());
	  });
	  $("#btn2").click(function(){
		alert("HTML: " + $("#test").html());
	  });
	  
	  $("#btn3").click(function(){
		alert("Value: " + $("#testvalue").val());
	  });
	  
	  $("#btn4").click(function(){
		alert("id->"+ $("#w3s").attr("id") + "href->" + $("#w3s").attr("href"));
	  });
	  
	  $("#btn5").click(function(){
		alert($("#btn5text").text("<B>你好啊</B>"));
	  });

  <!--添加元素--> 
  $("#btnadd1").click(function(){
    $(".btnadd1").append("<p>添加的一个元素</p>");
  });
  
  <!--操作 CSS-->   
    $("#btnaddcss").click(function(){
    $(".btncss").addClass("important");
  });
  
    $("#btndelcss").click(function(){
    $(".btncss").removeClass("important");
  });
  
  $("#btntoggleClass").click(function(){
    $(".btncss").toggleClass("important");
  });
  
  $("#btntsetClass").click(function(){
    $(".btncss").css({"background-color":"yellow","font-size":"200%"});
  });
  
  
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
<title>Jquery用法速用表</title>
</head>
<body>
<div style="background:#abcdef">  
选择器
</div><hr>
<p>如果你点我，我就会消失</p>
<p>如果你点我，我就会消失</p>
<p>如果你点我，我就会消失</p>

<div style="background:#abcdef">  
事件
</div><hr>
<input type="button" id="button1" value="单击事件"/>
<input type="button" id="button2" value="双击事件"/>
<input type="button" id="button3" value="鼠标移动事件"/>

<div style="background:#abcdef">  
隐藏和显示
</div><hr>
<p class="showtext">如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">显示或者隐藏</button>

<div style="background:#abcdef">  
动画
</div><hr>
<div class="animate"style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

<button id="animate">开始动画</button><br>
<br><br><br><br><br><br><br><br><br>


<div style="background:#abcdef">  
操作DOM对象
</div><hr>
显示文本：<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button><br><hr>
显示value：<p>Name: <input type="text" id="testvalue" value="my name is sun"></p>
<button id="btn3">显示value</button><br>
获得任意属性的值：<p><a href="http://www.yinghy.com" id="w3s">樱花雨</a></p>
<button id="btn4">获得任意属性的值</button><br><hr>


设置文本的属性：<p id="btn5text">This is a paragraph.</p>
<button id="btn5">设置文本属性</button><br><hr>

<div style="background:#abcdef">  
添加元素
</div><hr>

<p class="btnadd1">This is a paragraph.</p>
<button id="btnadd1">添加文本</button>



<div style="background:#abcdef">  
操作 CSS
</div><hr>

<p class="btncss">This is a paragraph.</p>
<button id="btnaddcss">添加 CSS样式</button>
<button id="btndelcss">删除 CSS样式</button>
<button id="btntoggleClass">自动添加和删除 CSS样式</button>
<button id="btntsetClass">具体设置单个 CSS样式</button>


</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery 基本实现功能模板