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的主要内容,如果未能解决你的问题,请参考以下文章