初次接触jQuery，实现一些简单的功能
2010-12-29 20:44
691 查看
用来学习jQuery
1.标题和网页加载完成后执行以下代码。$(document).ready(function() {
$('body').css({'font-size': '14px','margin-left':'130px','margin-bottom':'50px'});
$('h1').css({'color':'red','text-align':'left','font-size': '22px'});
});2.用jQuery来控制CSS样式，通过id来选择对象,点击按钮查看效果。
function example1() {
$('#example1').css({'color':'blue','font-size': '14px'});
};3.用jQuery来控制CSS样式，通过标签名来选择对象,点击按钮查看效果。
function example2() {
$('p').css({'color':'white','background-color': 'blue'});
};4.通过id选择某个标签，分别显示另一个标签中的text或者html,点击按钮查看效果。
function example3() {
$('#text').html($('#cs').text());
$('#html').html($('#cs').html());
}我只是用来测试的
在此显示标签里面的TEXT内容：
在此显示标签里面的HTML内容：
5.一些动作事件,鼠标经过、移出等,鼠标放到表格上看效果。
| 网名 | QQ号 | 幸运数字 | 守护星座 | 幸运数字 |
|---|---|---|---|---|
| 网名 | QQ号 | 幸运数字 | 守护星座 | 幸运数字 |
| 网名 | QQ号 | 幸运数字 | 守护星座 | 幸运数字 |
| 网名 | QQ号 | 幸运数字 | 守护星座 | 幸运数字 |
| 网名 | QQ号 | 幸运数字 | 守护星座 | 幸运数字 |
$(document).ready(function(){
$("table tr").mouseover(function(){
$(this).addClass("over");
});
$("table tr").mouseout(function(){
$(this).removeClass("over");
});
$("table tr:even").addClass("double");
});6.在文字的前后加一些内容,点击按钮查看效果。
HelloWord
function example6(){
$("I love ").insertBefore("#ex6");
$("#ex6").after(",HelloWord is my first program.");
};7.在文本中输入RGB颜色值，获取该值后设置网页的背景色。
function example7() {
var val = "#" + $("#txt")[0].value;
$(document.body).css( "background", val);
};8.关于attr比较乱，我还没弄懂。
9.jQuery实现的一些特效。
function example9(){
$("#img").hide(2000,function(){
alert("图片神奇的消失了!");
});
};实现以上效果的代码如下（jQuery.js文件要自己下载）：
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试jQuery的使用</title>
<script type="text/javascript" language="javascript" src="script/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('body').css({'font-size': '14px','margin-left':'130px','margin-bottom':'50px'});
$('h1').css({'color':'red','text-align':'left','font-size': '22px'});
});
function example2() {
$('#example1').css({'color':'red','font-size': '14px'});
};
function example3() {
$('p').css({'color':'white','background-color': 'blue'});
};
function example4() {
$('#text').html($('#cs').text());
$('#html').html($('#cs').html());
}
$(document).ready(function(){
$("table tr").mouseover(function(){
$(this).addClass("over");
});
$("table tr").mouseout(function(){
$(this).removeClass("over");
});
$("table tr:even").addClass("double");
});
function example6(){
$("<b>I love </b>").insertBefore("#ex6");
$("#ex6").after("<b>,HelloWord is my first program.</b>");
};
function example7() {
var val = "#" + $("#txt")[0].value;
$(document.body).css( "background", val);
}
function example9(){
$("#img").hide(2000,function(){
alert("图片神奇的消失了!");
});
};
</script>
<style type="text/css">
.code {
background:#EEE9E9;
width:690px;
color:#228B22;
border:solid thin red;
font-family:"Courier New";
padding:0px;
}
th{
background: gray;
color: white;
}
table {
border:solid thin blue;
}
tr {
border:solid thin blue;
padding:0px;
}
td {
text-align:center;
border-bottom:solid thin blue;
padding:0px;
margin:0px;
}
tr.over td{
font-weight: bold;
color:#00FF33;
}
tr.double td{
background: #DAF3F1;
}
.bt {
color:blue;
}
</style>
</head>
<body>
<div>
<h1>用来学习jQuery</h1>
<span class="bt">1.标题和网页加载完成后执行以下代码。</span><br/>
<pre class="code">
$(document).ready(function() {
$('body').css({'font-size': '14px','margin-left':'130px','margin-bottom':'50px'});
$('h1').css({'color':'red','text-align':'left','font-size': '22px'});
});</pre>
</div>
<div>
<span id="example1" class="bt">2.用jQuery来控制CSS样式，通过id来选择对象,点击按钮查看效果。</span>
<pre class="code">
function example1() {
$('#example1').css({'color':'blue','font-size': '14px'});
};</pre>
<input type="button" value="查看效果" onclick="example2()"/>
</div>
<div>
<p style="width:500px" class="bt">3.用jQuery来控制CSS样式，通过标签名来选择对象,点击按钮查看效果。</p>
<pre class="code">
function example2() {
$('p').css({'color':'white','background-color': 'blue'});
};</pre>
<input type="button" value="查看效果" onclick="example3()"/><br/>
</div>
<div>
<span class="bt">4.通过id选择某个标签，分别显示另一个标签中的text或者html,点击按钮查看效果。</span>
<pre class="code">
function example3() {
$('#text').html($('#cs').text());
$('#html').html($('#cs').html());
}</pre>
<span id="cs"><font color="red" size="2">我只是用来测试的</font></span><br/>
在此显示标签里面的TEXT内容：<span id="text"></span><br/>
在此显示标签里面的HTML内容：<span id="html"></span><br/>
<input type="button" value="查看效果" onclick="example4()"/><br/>
</div>
<div>
<span class="bt">5.一些动作事件,鼠标经过、移出等,鼠标放到表格上看效果。</span>
<table style="margin-left:80px" cellspacing="0px">
<tr>
<th>网名</th> <th>QQ号</th> <th>幸运数字</th> <th>守护星座</th> <th>幸运数字</th>
</tr>
<tr>
<td>网名</td> <td>QQ号</td> <td>幸运数字</td> <td>守护星座</td> <td>幸运数字</td>
</tr>
<tr>
<td>网名</td> <td>QQ号</td> <td>幸运数字</td> <td>守护星座</td> <td>幸运数字</td>
</tr>
<tr>
<td>网名</td> <td>QQ号</td> <td>幸运数字</td> <td>守护星座</td> <td>幸运数字</td>
</tr>
<tr>
<td>网名</td> <td>QQ号</td> <td>幸运数字</td> <td>守护星座</td> <td>幸运数字</td>
</tr>
</table>
<pre class="code">
$(document).ready(function(){
$("table tr").mouseover(function(){
$(this).addClass("over");
});
$("table tr").mouseout(function(){
$(this).removeClass("over");
});
$("table tr:even").addClass("double");
});</pre>
</div>
<div>
<span class="bt">6.在文字的前后加一些内容,点击按钮查看效果。</span><br/>
<span id="ex6">HelloWord</span>
<pre class="code">
function example6(){
$("<b>I love </b>").insertBefore("#ex6");
$("#ex6").after("<b>,HelloWord is my first program.</b>");
};
</pre>
<input type="button" value="查看效果" onclick="example6()"/>
</div>
<div>
<span class="bt">7.在文本中输入RGB颜色值，获取该值后设置网页的背景色。</span>
<input type="text" value="输入RGB颜色值，如123456" id="txt" onclick="this.value=''"/>
<pre class="code">
function example7() {
var val = "#" + $("#txt")[0].value;
$(document.body).css( "background", val);
};</pre>
<input type="button" value="查看效果" onclick="example7()"/>
</div>
<div>
<span class="bt">8.关于attr比较乱，我还没弄懂。</span><br/><br/><br/><br/>
</div>
<div>
<span class="bt">9.jQuery实现的一些特效。</span><br/>
<img id="img" src="images/xm.jpg" width="256px" height="231px"/>
<pre class="code">
function example9(){
$("#img").hide(2000,function(){
alert("图片神奇的消失了!");
});
};</pre>
<input type="button" value="查看效果" onclick="example9()"/>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 初次接触kinect简单的实现了一些手势的捕捉和识别功能
- c# 的实现的一些简单功能
- jQuery实现简单倒计时功能的方法
- 使用jQuery简单实现产品展示的图片左右滚动功能
- html表单配合php实现一些简单功能的例子
- JQuery实现简单的自动补全功能，so easy！
- jQuery实现的简单无刷新评论功能示例
- thinkphp使用ajax、jquery、Mysql实现了简单的客户端通信功能
- 用jQuery实现简单的加入收藏页面的功能
- 使用jquery简单实现腾讯地图的地址搜索定位功能
- 原生JS取代一些JQuery方法的简单实现
- 用jQuery实现简单的加入收藏页面的功能
- 用css和jQuery实现简单的购物车功能
- jquery 实现的一款超简单的图片切换功能
- ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能
- jquery+css实现简单的评分功能
- jQuery实现简单日期格式化功能示例
- jquery实现简单的图像传送带功能
- jQuery数据缓存功能的解析及简单实现