JQuery的简单语法使用

Posted 2020-10-21

声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

JQuery的简单语法使用

因为JQuery将对象都包装起来了，并为我们提供了一系列的方法，相当于java中的封装，所以如果我们想对标记进行相关操作时，必须使用JQuery提供的方法才可以，比如向div中添加html代码，以前用innerHtml，而在JQuery中这个就没用了，需要用JQuery提供的方法html()。下面介绍一些常用的方法。

1.事件注册：JQuery中的事件注册无需加on，示例如下：

代码示例：

运行结果：

注意：此处要注意到script的顺序问题，如果是写在body之前，那么事件注册要写在初始化方法ready里面，此方法类似于onload，表示body解析完毕后再运行此处代码，否则会运行错误，因为网页解析是从上至下的，在解析script里面的代码时，button标记还未解析出来；如果是写在body之后，则无需写在ready方法中，因为此时button标记已经被解析了。

2.关于样式的相关操作：添加样式用addClass()，删除样式用removeClass()，设置样式中的属性值用css(“属性名”,”属性值”)，得到样式中的属性值用css(“属性名”)，示例如下： 代码示例：

运行结果：

3.关于标记属性的相关操作：设置标记的属性值用attr(“属性名”,”属性值”)，得到标记的属性值attr(“属性名”)，删除标记的属性值removeAttr(“属性名”)。示例如下：

代码示例：

运行结果：

4.控制标记：相关方法如下：

4.1追加和删除标记：

4.2赋值方法：html()和text()的代码示例：

由上图可知，html()是填充代码，在文本中遇到标记符号会在网页中以对应标记的形式解析，而text()则是填充文本，填充文本中有标记符号也当作文本而不是当作标记。

反之，得到值也是用这两个方法，示例如下：

由上例可知，html()获得的包括网页标记，text()获得的就只是文本。

4.3获得表单中的值val()，此方法只用于表单控件中。示例如下：

5.显示和隐藏：show()和hide()。代码示例如下：

上例中show()、hide()和toggle()中可以不传入参数，传入数字表示以多长时间显示或隐藏图片，会有动画效果，时间是以毫秒为单位。也可传入字符串”fast”等，具体可参照JQuery的api文档。