code_jquery 예제를 통해 jQuery 학습 소개

程序代码
window.onload = function(){ ... } .
访问HTML文档的元素，必须先载入文档对象模型(DOM)。当window.onload函数执行的时候，说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。
对于此，jquery提供了一个"ready"事件,你可以使用以下的代码片段：
程序代码
$(document).ready(function(){//获取文档对象就绪的时候，不需要等待图片等下载完成。
// 你的代码
});
$(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。
上面这段代码的意思是检查文档对象直到它能够允许被操作（译者注：这样做比window.onload()函数要快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成）---这是我们想要的。好了 ，其他的也不多说了，我们开始来用jQ写几个简单的例子。

1，demo1: --鼠标点击时的触发
首先，我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码：
程序代码
$("p").click(function(){//获取所有段落p的对象，为其加上点击事件，需要加在readey中
// 你的代码
});

2,demo2:--增加 CSS Class
另外一个事情就是，一个共同的任务：增加或移除元素的css class，例如:
程序代码
$("a").addClass("test");
$("a").removeClass("test"); //样式的切换可以通过 $("p").toggleClass("selected");

3,demo3:--show( )和html()的使用
$("a").addClass("test").show().html("foo");//jquery方法可以连写
// how( ):显示隐藏的匹配元素。
//html("info"):设置每一个匹配元素的html内容。

4，demo4:--特效hide（）
$("a").click(function(){
$(this).hide("slow");//对象慢慢的消失、隐藏
return false; //表示不会跳转，等同js
});



5，demo5:---收缩展开功能
$(document).ready(function(){
$("#head").click(function(){
$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );
});// slideToggle(speed, callback)高度变化切换可见性，完成后可触发一个回调函数
});// speed "slow", "normal", or "fast" 也可以指定一数值

6,demo6:--appendTo的用法
{$("#head2").click(function()
{$("
").appendTo("#ccc");});}

看这里的变化

//appendTo(): ​​​​일치하는 모든 요소를 ​​지정된 다른 요소 세트에 추가합니다. 즉, 하위 노드를 추가합니다.
//append(): 요소에 하위 노드를 추가합니다.


7, 데모7:--테이블은 행마다 색상이 변경되고, 색상 위로 마우스를 이동하면 클릭 시 색상이 변경됩니다.
코드 설명:
이미 설명을 넣었습니다. 예를 들어 여기에 댓글을 게시하지 않겠습니다.
사용된 예는 mouseover(), addClass(), mouseout(), RemoveClass(), click(),
toggleClass(), tr:even 및 기타 메서드입니다.
추가로 토글()과 토글클래스()의 차이점도 설명합니다.
또한 이번 예시에서는 체인연산을 사용하였습니다. 설명은 체인연산.txt에서 보실 수 있습니다.

8, 데모8:--toggle() 사용법:
$("p").toggle()//요소의 표시 상태를 전환합니다. 그러나 이는 모든 p에 영향을 미친다는 점에 유의하세요. 두 가지 토글 방법(짝수 함수, 홀수 함수) 사이를 전환할 수도 있습니다.

9, 데모9: --hover() 사용법:
Hover(function over, function out)//hover 이벤트 모방
$("#orderedlist tr").hover(function over , function out ) //테이블의 모든 행에

10,demo10:-- $를 추가합니다.
$(document).ready(function(){// 대신 jQuery를 사용할 수도 있습니다. Code});//$
jQuery(document).ready(function(){
jQuery(".").click(function(){jQuery(this).toggleClass 대신 jQuery를 사용할 수도 있습니다. ("")})
});//$를 사용하는 다른 js 라이브러리를 사용할 수 있다는 장점이 있으며, 이는 충돌할 수 있습니다. $ 대신 jQuery가 더 안전한 작성 방법입니다.

또한:
$(document).ready(function(){//귀하의 코드});//약어: $(function() {//귀하의 코드} )



11, 데모11:--each—find 사용
$("#orderedlist").find("li").each(function(i) { })
/ /find("li")는 모든 li 요소를 찾고,each()는 컬렉션의 각 개체에 대해 메서드를 실행합니다
//each(Function function fn)는 각각 일치합니다. 요소는 함수를 실행하기 위한 컨텍스트로 사용됩니다.

12, 데모12:--parents() 사용법:
$(this).parents("p").addClass("highlight");// 가장 가까운 라벨
this.parent ()//객체의 상위 노드를 참조합니다

13, 데모13:--load() 사용법:
$("#feeds") .load("FAQ1.html",function () { Alert("load is done");}

//원격 파일에서 HTML을 로드하고 DOM

14, 데모14: --next 사용법:
.next()//객체의 다음 형제 노드 가져오기

패키지 다운로드 주소jQuery 초보자 학습 예제 코드 설정