Struts2框架之jQuery

Posted Hacker丶Cat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Struts2框架之jQuery相关的知识,希望对你有一定的参考价值。

jQuery是一个优秀的javascript框架,它是轻量级的JavaScript库,兼容CSS3,还兼容各种浏览器。jQuery可以使用非常少的代码,来实现功能复杂的任务或效果,也正如jQuery设计者所描述的那样,jQuery的宗旨是“Write Less,Do More”。

jQuery库的设计秉承了一致性与对称性原则,它的大部分概念是从html和CSS结构中借用而来的。

jQuery的基本语法:

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" ></script>

</head>

提示:src="js/jquery-xxx.min.js"中的“xxx”表示所要引入的版本编号,接下来案例jquery库均为默认导入。

jQuery对象及基本语法

$(this).hide():隐藏当前元素

$(“p”).hide():隐藏所有<p>标签

$(“p.test”).hide():隐藏所有class=“test”的<p>标签

$(“#test”).hide():隐藏所有id=“test”的元素

jQuery使用美元符($)来表示定义一个jQuery对象,选择器用来查找页面中的DOM元素,后面的方法动作是该对象执行的操作。

jQuery对象与DOM对象的区别与转换

表1-1jQuery对象与DOM对象的区别

实现功能

jQuery对象

DOM对象

通过ID获取指定元素对象

$(‘#test’)

Document.getElementById(‘test’)

在指定元素中添加内容

$(‘#test’).html(‘新内容’)

Document.getElementById(‘test’).innerHTML=“新内容”


在某些情况下,可能需要在jQuery对象和DOM对象之间进行转换:

·DOM对象转jQuery对象:$(document.getElementById(“test”));

·jQuery对象转DOM对象:$(“#test”).get(0);

jQuery选择器

1、元素选择器

$(“p”):选取页面中的<p>元素

$(“#demo”):选取页面中ID为demo的元素

$(“.into”):选取页面中类样式为into的元素

2、属性选择器

[attribute = value]

·attribute:标签的属性

·value:属性值

jQuery筛选——exp表示jQuery选择器

$(“#demo”).children(exp):匹配ID为demo的元素的子元素集合

$(“#demo”).find(exp):匹配ID为demo的元素的后代元素集合

类似的还有.parent\.parents\.siblings

jQuery属性操作、CSS操作和内容操作

属性操作

·获取属性值:attr(name)

·修改属性值:attr(key,name)

·删除属性:removeAttr(name)

jQuery操作CSS的功能是相当强大的,常见的样式相关操作可以分为两类:一类是操作CSS,另一类是操作类样式

一、操作CSS

·获取样式:css(name)

·修改单个样式:css(key,name)

·修改多个样式:css(key1:value1,key2:value2……)

二、操作类样式

·添加类样式:addClass(className)

·移除类样式:removeClass(className)

三、内容操作

·获取或设置HTML内容:html()、html(val)

·获取或设置对象的值:val()、val(val)

·追加内容:append(content)

·删除节点:remove()

jQuery事件处理——jQuery提供的事件相关方法有绑定事件、触发事件、绑定活动事件。

绑定事件:bind(type,fn)

type:绑定的事件类型

fn:绑定的方法名

触发事件:trigger(type)

type:触发的事件类型

绑定活动事件:live(type,fn)

同上

jQuery的动画效果

显示效果:show(speed[,callBack])

speed:动画时长

callBack:指定的回调函数

隐藏效果:hide(speed[,callBack])

向上滑动效果:slideUp(speed[,callBack])

向下滑动效果:slideDown(speed[,callBack])

淡入效果:fadeIn(speed[,callBack])

淡出效果:fadeOut(speed[,callBack])

自定义动画:animate(params[,durations][,callBack])

params:效果参数

duration:动画时长

callBack:回调函数




以上是关于Struts2框架之jQuery的主要内容,如果未能解决你的问题,请参考以下文章

struts2 之 struts2简介,struts2开发步骤,struts2详细配置,struts2执行流程

框架学习系列 之Struts2框架学习总结

框架学习系列 之Struts2框架学习总结

SSH框架之Struts2系列

java框架学习系列

Struts2框架之-Struts2的标签