今天上午闲来无事,就想着把 前端相关资源汇总 这篇文章中收集的链接整理一下,看到 《jQuery === 面条式代码?》 这篇文章的时候,感觉里面的代码挺有意思 ,于是就一边读文章,一边照着敲代码。
敲到文章第一节中一段 JS 代码的时候,自己就有些迷糊了,因为看到了以前从来没见到过的用法。
第一行 JS 代码完全能看懂,就是用 jQuery 选择指定的 DOM 元素,代码最后加了 [0]
,是因为用 $()
选择器得到的结果是数组。
可第二行的 $(form.texMsg)
究竟是怎么定位到 textarea
元素上的?
最开始以为是 $("div.className")
这种语法,于是把第一行 JS 代码注释掉,发现代码就不能用了,看来猜测不正确。而且!如果是 $("div.className")
这种语法的话,括号里面的双引号可是不能省略的!
另外,自己还查了 jQuery 的 API 文档,$()
这种语法的参数好像只接收字符串啊,可 form.textMsg
怎么看都不像是字符串,莫非 jQuery 源码中对非字符串类型的参数做了处理?
下面的 HTML 与上面的 JS 相对应。
那就用代码试试吧。于是重新写了 HTML 和 JS 进行测试。
结果发现,如果变量 dd1
是一个具体的 DOM 元素的话,$(dd1)
这样的语法是可以成功选择该元素的。
但是,不管子元素是什么类型,$(dd1.d2)
这样的语法都无法选择子元素。这个时候,父元素是 div
类型。
那么如果我参照前面的代码,把父元素改成 form
类型的呢?经过测试,发现父元素必须是 form
类型,子元素必须是有效的表单元素:input
、textarea
和 button
,$(dd1.d2)
这样的语法才能选中子元素。也就是文章中的第二张图。
这个时候,自己又看了看第一张图中的第三行代码:form.tweet
,这就完全是原生 JS 的用法了,既然这种语法也是有效的,那么是不是就意味着:在原生 JS 中,如果变量 dd1
是 form
类型的 DOM 元素,其子元素是有效的表单元素,并且子元素指定 name
属性值为 d2
的话,就能用 dd1.d2
这种语法选择子元素?测试了一下,果然如此!
再拓展一下,如果多个子元素具有相同的 name
属性值,那么用上面的代码,应该会选中所有这些元素吧?嗯,果然是这样。
好了,短短的两行代码,花了自己一上午才研究清楚,也是蛮有意思的,哈哈。