10行代码轻松快速JQuery入门

最近在长沙出差，长沙的饭菜的味道就一个字-----“辣”，个人是怕辣的，实在吃不下，每天都是靠外卖快餐苟活，突然想到我们码农在工作中也会遇到突然出现的拦路虎，它不在我的知识体系结构中，需要专门花时间去学习，那能不能也像吃快餐一样，谁提供个快速入门的方式呢？想一想，恩，很有必要，那么我来给大家分享下我的知识结构中能够让大家快速入门的知识点吧。抛砖引玉，由于是快速入门之作，大神请绕路。

 

1、 JQuery(document).ready(function(){});

这句代码是所有JQuery代码的开始，相当于在页面<body onload="function">;

可以简写为$(document).ready(function(){});

再简写$().ready(function(){});

再简写$(function(){});

2、 $("#myDiv .myClass img :not(:first)");

这句代码是整个JQuery的核心代码。JQuery相比原生的JS最大的好处就是有大开脑洞的选择器，能够按照需求得到一组页面组件。

3、 $("img").attr("alt","my image");

这句代码是通过选择器选择了页面组件后的改变组件的属性的操作

4、 $("img").css({"border-color":"red", "border-size":"2px"})

这句代码是通过选择器选择了页面组件后的改变组件样式的操作。

5、 $("#myDiv").append("Hello, world");

这句代码是页面组件的文档操作中的插入操作，当然，有了插入操作肯定也有删除等操作。

6、 $("#myButton").click(function(e){});

这句代码是页面组件的事件操作。

7、 $("#myDiv").show(1000);

这句代码是页面div组件的显示动画。

8、 $.get("url", {}, function(data){});

这句代码是JQuery里的AJAX的get方法操作。

9、 $.each(data, function(index, data){});

这句代码是JQuery库函数循环函数的使用。

10、 var myDiv = $("#myDiv")[0];

这句代码是JQuery中将JQuery对象转换成原生对象的一种方式。相反，将原生对象转换成JQuery对象只需要使用JQuery的标准表达式就行了。例如：$(document)。

 

JQuery库大体上就是以上这么多内容，除了基础语法以外，需要学习的包含选择器、属性操作、CSS操作、文档操作、事件、动画、AJAX，函数等，本文章仅是最基础的部分，希望初入门的朋友举一反三，如果觉得文章内容太浅显，可以去http://www.qfedu.com/。