Home  >  Article  >  Web Front-end  >  JQuery first experience (recommended to learn jquery)_jquery

JQuery first experience (recommended to learn jquery)_jquery

WBOY
WBOYOriginal
2016-05-16 18:53:391067browse

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 $(function() {
02     var indexs= [0, 0, 0];
03     $(":header").each(function() {
04         var content = $(this).html();
05         if ($(this).is("h1")) {
06             indexs[0] ;
07             indexs[1] = 0;
08             content = "" indexs[0] ". " content;
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 }); 

Haha, the effect is not bad. But in fact, this code is the second version. At the beginning, it was searched by h1, h2, and h3, which was more troublesome to process. In particular, h3 is placed inside a div with class content. When using the JQuery option, the :first filter is also used, like this:

var h3 = $(this). nextAll(".content:first").children("h3");

Later I thought that many paths in the description are replaced by variables, such as $(PHP_HOME). It is better to add a color mark, so I added this piece of code in $(function() {...}) middle.

20
21 $(".path").each (function() {
22     var content = $(this).html();
23 content = content.replace(/($(.*?))/, "$1")
24 $(this ).html(content);
25 });

Fortunately, all my paths are wrapped. I just need to find all the .path objects and use regular expressions to replace $(...) with .

Generally speaking, people who are familiar with CSS can write JQuery very quickly. After watching a simple tutorial and browsing the JQuery documentation, you can learn JQuery in a few hours, and it's easy to use. No wonder so many people like it!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn