JQuery 첫 경험(jquery를 배우시는 걸 추천)_jquery

在JQuery的网站上发现，这个东东提供两种版本下载。一种是原版，接近120K，另一种是把水分压缩掉的，近60K。太久没做应用技术了，没想到居然出来了这么多新鲜玩意儿，JavaScript还可以压缩水分，所以顺便又去了解了一下JavaScript的Packer（这是在线链接），如果有兴趣，这里可以下载它的.NET、Perl、Wsh和PHP等几个版本。

　　不扯远了，说回正题。压缩版的JQuery的确合适网络传输提速，但压缩后的JQuery只有一行，不怎么适合VCS（版本控制系统）管理。所以还是先用非压缩版的，以后发布产品的时候再压缩就好。

　　在SVN上创建好项目之后，写了个Readme上去，因为涉及到配置之类的东西，用纯文本写的不方便阅读，所以用HTML写。之所以不用WPS（或Word）写，同样是因为VCS的原因，还是非二进制的文本好控制些。不过HTML里面的Header没得Word的自动编号功能，如果哪天在一堆Header中间插入一个，就要把后面的编号全部打乱，改起来痛苦。所以就想起了JQuery，用它来编号，顺便小试下牛刀。

01 $(함수() {
02     var 색인= [0, 0, 0];
03     $(":header").각(함수() {
04         var 내용 = $(이것).html();
05         if ($(이것).is("h1")) {
06             색인[0] ;
07             색인[1] = 0 ;
08             콘텐츠 = "" 색인[0] ". " 내용;
09         } else if ($(this).is("h2")) {
10             indexs[1]++;
11             indexs[2] = 0;
12             content = "" + indexs[0] + "." + indexs[1] + ". " + content;
13         } else if ($(this).is("h3")) {
14             indexs[2]++;
15             content = "" + indexs[0] + "." + indexs[1] + "."
16                 + indexs[2] + ". " + content;
17         }
18         $(this).html(content);
19     });
20 }); 

ㅎㅎ 효과는 나쁘지 않네요. 그런데 사실 이 코드는 2차 버전이라 처음에는 h1, h2, h3으로 검색을 해서 처리하기가 더 까다로웠어요. 특히, h3은 클래스 콘텐츠가 있는 div 내에 배치됩니다. JQuery 옵션을 사용할 때 다음과 같이 :first 필터도 사용됩니다.

var h3 = $(이것). nextAll(".content:first").어린이("h3");

나중에 설명에 나오는 많은 경로가 $(PHP_HOME)과 같은 변수로 대체되는 것 같아서 색상 표시를 추가하는 것이 더 낫다고 생각하여 $(function() {... }) 가운데.

20
21 $(".path").각 (함수() {
22     var content = $(이것).html();
23 콘텐츠 = 콘텐츠.바꾸기(/($(.*?))/, "$1")
24 $(이것 ).html(콘텐츠);
25 });

다행히 모든 경로가 래핑되어 있습니다. 모든 .path 객체를 찾고 정규식을 사용하여 $(...)를 로 바꾸면 됩니다.

일반적으로 CSS에 익숙한 사람들은 JQuery를 매우 빠르게 작성할 수 있습니다. 간단한 튜토리얼을 시청하고 JQuery 문서를 탐색한 후 몇 시간 안에 JQuery를 배울 수 있으며 사용도 쉽습니다. 많은 사람들이 좋아하는 것도 당연합니다!