码迷,mamicode.com
首页 > 编程语言 > 详细

JQuery的简单语法使用

时间:2018-01-17 17:11:43      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

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

JQuery的简单语法使用

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

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

代码示例:

image

运行结果:

image

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

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

image

运行结果:

image

image

image

image

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

代码示例:

image

运行结果:

image

image

image

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

image

4.1追加和删除标记:

image

image

image

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

image

image

image

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

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

image

image

image

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

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

image

image

image

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

image

image

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

JQuery的简单语法使用

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
凯哥学堂
加入时间:2016-10-07
  关注此人  发短消息
java学习视频下载:www.kaige123.com
凯哥学堂”关注的人------(0
凯哥学堂”的粉丝们------(1
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!