jQuery方法摘录
来源：互联网 发布：儿童涂色软件 编辑：程序博客网 时间：2024/06/06 07:15
1.jQuery 滑动函数 - slideDown, slideUp, slideToggle（最后一个我喜欢，之前认为很神秘的东西，原来就是它）
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
2.jQuery 自定义动画
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
3.
4.
5.设置控件的css
一个特色的例子：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$("#result").html($(this).css("background-color"));
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;
background:#ff0000"></div>
<p id="result">Click in the box</p>
</body>
</html>
6.jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
$.ajax(options) 是低层级 AJAX 函数的语法。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
- jQuery方法摘录
- jQuery方法摘录2
- 软件方法摘录
- ARM加密方法摘录
- Hibernate中的查询方法摘录
- iphone数组排序方法摘录
- [摘录]跨域访问方法
- 摘录
- 摘录
- >摘录
- 摘录
- 摘录
- 摘录
- 摘录
- 摘录
- 摘录
- 摘录
- 摘录
- 如何获得桌面上任意一个位置的颜色的 rgb 或者16进制值了
- Android内核和驱动篇-Android内核介绍
- php.ini 参数解释
- 我要记住的
- oracle 启动 could not open parameter file oracle10g startup database
- jQuery方法摘录
- 每天学习一算法系列（1）(定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部)
- QinQ原理及技术（QinQ白皮书）
- 数据库访问类
- assert functions in C/C++/C#
- 如何与EFL开源社区进行沟通！
- volatile和synchronized的区别
- Android用代码实现EditText不可编辑
- xfire+spring2.0整合出现[java.lang.IllegalStateException: Could not find valid implementation for: 2.0]
