Web网页设计之jQuery_2. jQuery语法、选择器与事件

一、语法

学习这个 jQuery 之前呢，我们先来看一下语法

最基础的语法就是 $(selector).action()

$ 这个就是定义一个jQuery 的一个标志符

selector 是要选择的节点，好比我想让所有的 p 标签隐藏起来，那么我是需要这样去写：$("p").hide();

最后一个 action() 就是执行的方法，好比我刚刚的隐藏 hide(); 这个就是执行方法

 

类似与我的官网，可能有的人会看到这样的写法

$(function(){ // 开始写 jQuery 代码... });

这个呢其实就是一个简写，等同于

$(document).ready(function(){ // 开始写 jQuery 代码... });

我们呢为了方便，就不用下面这种的了，直接使用上面的即可

二、选择器

说这个事件之前，我们先说一个另外的东西，就是选择器

其实我们在学习 css 的时候学过这个选择器，这个 jQuery 也有选择器，和这个 css 的选择器很类似

1. 元素选择器

元素选择器是选择住所有相同元素的 DOM 节点进行同样的操作，使用方式是：$("元素名字")，然后我们可以看一个例子

我们点击一下这个 button，然后我们看看这个 html 中的 p 标签如何变化

可以看到，啥也没有了，我们再查看一下网站当前源码

是OK的，被隐藏掉了，我们这里就是使用的是元素选择器

2. id 选择器

id 选择器通过 HTML 元素的 id 属性选取指定的元素，使用方式是：$("#DomId")，然后我们看一下例子

还是刚刚的内个页面，我们给中间这个 p 标签一个id，id的值大家随便自己去取，然后我们只让中间的这个 p 标签进行隐藏

执行一下，

可以看到，我们通过 id 选择器让这个 id 是 ppp 的 p标签进行了隐藏

3. class 选择器

class 选择器可以通过指定的 class 查找元素，使用方式是：$(".test")

还是刚刚的例子，我们再来修改一下

这里要注意看啊，ccc前面还有一个点！！！千万看仔细了，然后我们执行一下看一下效果

可以看到，只要 class 是 ccc 的，都给隐藏掉了

三、事件

我们通过学习选择器其实已经解除到两个事件了，一个是 click ，这个是当鼠标触发点击事件的时候，还有一个是 hide ，这个是触发隐藏效果，当然，事件不止这么两个，我列一个表格大家看一下

算了，引入一下这个菜鸟的好了，可以看到，有四种事件，鼠标点击、键盘、表单、文档窗口事件

这些都是我们常用的，所以需要大家知道而且熟悉，给大家看一些例子

https://www.runoob.com/jquery/jquery-events.html

直接进去，最下面可以看到很多例子，我就不一个一个去写了，当然，这些东西都是用过之后才会有印象，所以多练习几次

 

有问题可以联系我QQ：2100363119，欢迎大家访问我个人网站：https://www.lemon1234.com