$('div').addClass("样式");
$('div').css('属性名','属性值');
$('div').append($('<span>new item</span>'));
$(function(){alert('welcome to jQuery');});
$('#element');// 相当于document.getElementById("element")
$('.element');//Class
$('p');//html标签
$("img").attr({ src: "2.jpg", alt: "Test Image" });//改变对象文本
$("form > input");//子对象
$("div,span,p.myClass");//同时选择多种对象
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
$(":input");//表单对象
$("input[name='newsletter']");//特定的表单对象
$("p").text("Some new text.");//改变对象文本
$("p").add("span");//给对象增加标签
$("p").find("span");//查找对象内部的对应元素
$("p").parent();//对象的父级元素
$("p").append("<b>Hello</b>");//给对象添加内容
$("#feeds").load("feeds.html");//相应区域导入静态页内容
$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//导入动态内容
$("img").hide();
$("img").show();
$("img").fadeOut();
$("img").fadeIn();
$("img").slideUp();
$("img").slideDown();
$.browser.msie
$.browser.mozilla
$.browser.safari
$.browser.opera
$.browser.version //浏览器版本
$.boxModel //是否是W3C盒子模型
$.each(object, function(index, value){}) //遍历
对事件的支持:
$("p").hover(function () {
$(this).addClass("hilite");//鼠标放上去时
}, function () {
$(this).removeClass("hilite");//移开鼠标
});//鼠标放上去和移开的不同效果(自动循环所有p对象)
动画:
<!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>无标题文档</title>
<script src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(
function(){
$('#song').toggle(
function(){
$('.panel').hide('slow');
},function(){
$('.panel').show('slow');
});
}
)
</script>
<style type="text/css">
.panel
{
width:auto;
height:auto;
}
</style>
</head>
<body>
<div class="panel"><img src="1.jpg" /></div>
<input type="button" value="ClickMe" id="song" />
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DL Demo</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
<style>
dl { width: 150px; }
dl,dd { margin: 0; }
dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000;font-size: 12px; }
ul { list-style: none; padding: 2px; }
</style>
</head>
<body>
<dl>
<dt><a href="#">导航1</a></dt>
<dd>
<ul>
<li><a href="#">111111</a></li>
<li><a href="#">222222</a></li>
<li><a href="#">333333</a></li>
</ul>
</dd>
<dt><a href="#">导航2</a></dt>
<dd>
<ul>
<li><a href="#">4444</a></li>
<li><a href="#">55555</a></li>
<li><a href="#">666666</a></li>
<li><a href="#">77777</a></li>
</ul>
</dd>
<dt><a href="#">导航3</a></dt>
<dd>
<ul>
<li><a href="#">888888</a></li>
<li><a href="#">999999</a></li>
<li><a href="#">111111</a></li>
</ul>
</dd>
</dl>
</body>
</html>