肉渣教程

jQuery 语法

上一节 下一节

通过jQuery可以选择指定元素以及对它们做一些事情。

jQuery 语法

jQuery语法天生就是为了选择(select)指定元素并对其做一些事情(action)。

基础语法是$(selector).action()

  • $是jQuery的简称
  • 选择器(selector)是用来选择指定元素
  • action()方法就是指代针对被选择元素的作用方法


例如:

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 把所有的<p>元素都隐藏掉
  • $(".test").hide() - 把所有class类包含test类的元素都隐藏掉(class="test")
  • $("#test").hide() - 把id等于test的元素都隐藏掉(id="test")

哥,这是不是很像CSS的选择器呢?是的!jQuery就是利用CSS选择器的语法来搞事的。下一节会介绍更多jQuery的选择器语法。


Document Ready Event 文档加载完毕事件

汝会发现很多跟jQuery相关的例子里都会有如下代码,这段代码就是阻止代码在文档加载完毕前运行某些代码,换言之,等文档加载完毕后才会运行某些代码。

为啥要这么来搞事呢?因为文档都没加载好,汝用代码去搞毛搞啊!比如,文档没加载完,用jQuery去隐藏某个元素,结果这个元素还木有加载好,所以说嘛,文档每加载完,搞毛搞啊。因此要搞事,要等文档加载完毕后再为所欲为。

$(document).ready(function(){

   // jQuery methods go here...
   // 想要搞事的js代码从这里开始搞

});


上述声明方式可简写如下,效果是等价的:

$(function(){

   // jQuery methods go here...
   // 想要搞事的js代码从这里开始搞

});

上述两种写法都可以,选择喜欢的就好啦;但是更推荐第一种写法,可读性与逻辑性更好。若要装X,第二种写法实属必选,也挺推荐,毕竟简洁好用嘛~


一个网页中可以同时定义多个文档加载完毕事件(Document Ready Event),每个都会生效的。放心去用吧!不过,虽然洒家不是处女座,但是洒家还是有些强迫症,洒家更喜欢一个网页的js脚本只声明一个文档加载完毕事件。


jQuery 语法

上一节 下一节