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