Vixual

如果想学 jQuery 的话，可以从下列的教学资源开始，读者应具有 HTML、JavaScript、CSS 的基础。

网站

上官林杰 - ericsk (2007)

1. jQuery 学习心得笔记 (1) – 前言
2. jQuery 学习心得笔记 (2) – 怎么使用 jQuery 来写 JavaScript
3. jQuery 学习心得笔记 (3) – jQuery 的事件(Event)处理
4. jQuery 学习心得笔记 (4) – Ajax (上)
5. jQuery 学习心得笔记 (5) – Ajax (下)
6. jQuery 学习笔记 (6) - 操作 DOM 物件
7. jQuery 学习笔记 (7) - 扩充 jQuery

以上这几篇是我的 jQuery 启蒙文章。
Read more

Firefox 虽然有提供搜寻列，也有套件让你整合多种搜寻引挚，但是由于搜寻列要以下拉清单的方式切换寻引挚，用完了还要手动切换回来。于是我制作了一个网页，整合了 22 个我常用的搜寻引挚，可以直接加在 Firefox 的侧边栏。

整合搜寻

• 网址: http://www.vixual.net/sidebar/search/

Read more

2017/03/21 更新:

可能是之前为了要相容旧版 IE (v9.0 之前) 的缘故，所以没发现到 JavaScript 还有 querySelector() 与 querySelectorAll() 这两个函式，它们的功能分别为:

• querySelector(): 回传第一个符合选择器规则的元素
• querySelectorAll(): 回传全部符合选择器规则的元素

从范例中可以得知，这两个函式遵循 CSS 语法，可以实现复杂的 CSS 选择器的层级、属性、分组、串联、伪元素...等判断，功能已不是 getElementById()、getElementsByClassName()、getElementsByTagName() 可以比拟!

当然复杂的 CSS 层级可改由 querySelector() 或 querySelectorAll() 来取得元素，不过若是目标明确，考量效率我还是用 getElementById() 来处理可能会比较好。

自订函式 $$() 改写如下:

function $$(element, isFirst){
    if(isFirst === 1){
        // 强制回传第一笔符合的元素
        return(document.querySelector(element));
    }
    else if(/^\#[\w\-]+/.test(element)){
        // 以 $$("#id") 回传元素
        return(document.getElementById(element.slice(1)));
    }
    else{
        // 回传元素阵列
        return(document.querySelectorAll(element));
    }
}

($$() 增加了第二个参数: isFirst，若设为 1 则强制回传第一笔符合 CSS 选择器的元素，而非元素阵列)

之前的内容:

自订函式

JQuery 强大、方便的选择器 (Selector) 是 jQuery 不可或缺的功能之一。不过如果我们不想加载 jQuery 而只想使用类似 jQuery 选择器的功能，那可以用自订函式的方式做到:

function $$(element){
    switch(element.charAt(0)){
    case("#"):
        // 以 $$("#id") 回传元素
        return(document.getElementById(element.slice(1)));
    case("."):
        // 以 $$(".class") 回传元素阵列，IE 要 v9.0 之后才支援
        return(document.getElementsByClassName(element.slice(1)));
    default:
        // 以 $$("tag") 回传元素阵列
        return(document.getElementsByTagName(element));
    }
}

或是单纯一点，仅传回指定 id 的元素就好:

function $$(element){
    return(document.getElementById(element));
}

我把这个自订的函式命名为 $$()，用以与 jQuery 的工厂函式 $() 做区隔。

但是要注意，以上自订函式回传的都是 DOM 元素，与 jQuery 在其它操作上并不相同。

换掉 jQuery 的工厂函式

如有需要也可以用 jQuery.noConflict() 换掉 jQuery 的工厂函式 $()，ex:

var jq = jQuery.noConflict();

这样就能改用 jq() 来做为 jQuery 操作，而原本的 $() 只要再次重新定义为自订函式即可使用，不会与 jQuery 冲突。

帮大家试过用 € 与 ¥ 做为自订函式的名称，不过都失败，大家可以不用试了!

参考网页

• [jQuery]中文的 jQuery 教学资源 | Vixual
• [jQuery]《网页设计-爱上jQuery》读书心得及评论 | Vixual

使用 JavaScrip 的程式库来开发网页的程式可以加快开发的速度，其中 jQuery 也是颇受欢迎的一员。

不过目前可以买得到的 jQuery 中文书籍实在寥寥可数，以下是最近阅读《网页设计-爱上jQuery》这本书的心得及评论 (作者是罗子洋)。 Read more