jQuery方法摘录

最新推荐文章于 2024-09-16 13:10:48 发布

qiaoyanma0217

最新推荐文章于 2024-09-16 13:10:48 发布

阅读量338

点赞数

分类专栏： jQuery笔记文章标签： jquery function ajax button class css

本文链接：https://blog.csdn.net/qiaoyanma0217/article/details/6336391

版权

jQuery笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.jQuery 滑动函数 - slideDown, slideUp, slideToggle（最后一个我喜欢，之前认为很神秘的东西，原来就是它）

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

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>

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