1、不常用的切换函数$("p").toggle();当点击切换按钮时,隐藏元素为P行和显示P行;
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
2、append() 函数向所匹配的 HTML 元素内部追加内容$(selector).append(content);
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>W3School</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>
</html>
类似的还有:
$(selector).html(content) 改变被选元素的(内部)HTML
$(selector).append(content) 向被选元素的(内部)HTML 追加内容
$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML
3、css操作:函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值:
$(selector).css({properties})
$("p").css({"background-color":"red","font-size":"200%"});
jQuery 拥有两种用于尺寸操作的重要函数:
- $(selector).height(value)
- $(selector).width(value)
总结如:
$(selector).css(name,value) 为匹配元素设置样式属性的值
$(selector).css({properties}) 为匹配元素设置多个样式属性
$(selector).css(name) 获得第一个匹配元素的样式属性值
$(selector).height(value) 设置匹配元素的高度
$(selector).width(value) 设置匹配元素的宽度
4、AJAX:
jQuery AJAX 请求
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
略。。。