jQuery口号是：write less,do more.
jQuery是javascript库 即会了javascript之后就行了，如果想轻松点就再学学jQuery。jQuery就好比把一些js的效果事先做好了，然后直接调用就行了。 你用javascript实现一个效果说不定写很长的一段代码，然而jQuery开发者事先写好了，你只需要用他的函数直接调用就可以了。简单来说，无非就是jQuery更简单。
下面就直接用实例说明了，分别给出了jQuery和javascript的实现，希望大家能够对比着学习~~
一．动态添加事件
1 jacascript给a标签动态添加onclick事件
示例代码：
| <script type="text/javascript"> window.onload = function() { var myLinks = document.getElementsByTagName("a");
for (var i = 0; i < myLinks.length; i++) { myLinks[i].onclick = function() { alert("Hello World"); //给每一个超链接对象附加onclick属性 } } } </script> </head> <body> <a href="#">test1</a> <br> <a href="#">test2</a> <br> <a href="#">test3</a> <br> <a href="#">test4</a> <br> <a href="#">test5</a> <br> <a href="#">test6</a> <br> </body> |
2 jquery给a标签动态添加onclick事件
示例代码：
| <script type="text/javascript" src="jQuery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a").click(function() { alert("Hello World"); }); }); </script> </head> <body> <a href="#">test1</a> <br> <a href="#">test2</a> <br> <a href="#">test3</a> <br> <a href="#">test4</a> <br> <a href="#">test5</a> <br> <a href="#">test6</a> <br> </body> |
小总：
2.1 通过jQuery对象动态添加方法
2.2 $("a")将一个元素转换为jQuery对象
2.3 .click方法 将属性（onClick）转变为方法
二．jQuery，javascript实现各行换色效果
1.jQuery实现各行换色效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击B1触发双色事件
$("#b1").click(function(){
$("p:odd").css("background","green");
$("p:even").css("background","pink");
});
$("#b2").click(function(){
var colors=[];
colors.push("Chartreuse ");
colors.push("Coral ");
colors.push("Cyan ");
colors.push("DarkMagenta ");
colors.push("Darkorange ");
colors.push("DeepPink ");
colors.push("Gold ");
colors.push("HotPink ");
colors.push("Khaki ");
colors.push("Lime ");
//alert(colors.pop());
var ps=$("p");
for(var i=0;i<ps.length;i++){
//ps[i]是DOM对象，不能用css.()方法
ps[i].style.background=colors.pop();
//ps[i].css("background",colors.pop());
}
});
});
</script>
<body>
<input type="button" id="b1" value="double color（双色）">
<input type="button" id="b2" value="multi color（多色）">
<p id="p1">cqupt</p>
<p id="p2">cqupt</p>
<p id="p3">cqupt</p>
<p id="p4">cqupt</p>
<p id="p5">cqupt</p>
<p id="p6">cqupt</p>
<p id="p7">cqupt</p>
<p id="p8">cqupt</p>
<p id="p9">cqupt</p>
<p id="p10">cqupt</p>
</body>
</html>
2.javascript实现各行换色效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function t1(){
var ps1=document.getElementsByTagName("p");
for( var i=0;i<ps1.length;i++){
if(i%2==0)
ps1[i].style.background="green";
else
ps1[i].style.background="pink";
}
}
function t2(){
var ps2=document.getElementsByTagName("p");
var colors=[];
colors.push("Chartreuse ");
colors.push("Coral ");
colors.push("Cyan ");
colors.push("DarkMagenta ");
colors.push("Darkorange ");
colors.push("DeepPink ");
colors.push("Gold ");
colors.push("HotPink ");
colors.push("Khaki ");
colors.push("Lime ");
for( var i=0;i<ps2.length;i++){
ps2[i].style.background=colors.pop();
}
}
</script>
<body>
<input type="button" id="b1" value="double color（双色）" οnclick="t1();">
<input type="button" id="b2" value="multi color（多色）" οnclick="t2();">
<p id="p1">cqupt</p>
<p id="p2">cqupt</p>
<p id="p3">cqupt</p>
<p id="p4">cqupt</p>
<p id="p5">cqupt</p>
<p id="p6">cqupt</p>
<p id="p7">cqupt</p>
<p id="p8">cqupt</p>
<p id="p9">cqupt</p>
<p id="p10">cqupt</p>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
