JQuery的简单语法使用

声明:本栏目所使用的素材都是凯哥学堂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文档。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180117G0L9A900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券