【WEB小工具】jQuery函数

时间:2022-05-25 16:11:39

  jQuery是JavaScript框架,jQuery也是JavaScript代码。使用jQuery要比直接使用JavaScript方便很多。

  要使用jQuery,首先需要在jsp页面中导入jQuery。jQuery就是一个js文件而已。

  导入jQuery有三种方法:

     <!-- 导入c标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 1. --> <script type="text/javascript" src="<c:url value='/jquery-1.5.1.js'/>"></script><!-- 标签,需导入c标签库 -->
<!-- 2. --> <script type="text/javascript" src="/项目名/jquery-1.5.1.js"></script>
<!-- 3. --> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
  • jQuery核心函数  

  $()

  注意其不同于${}

    顺便记一下${}的用法吧:      

 这是一个EL表达式取值的方法
例如:
比如有A页面请求B页面,在A页面中有一句这样的代码
String name = "测试";
request.setAttribute("name",name); 那么B页面中将这样可以去到name中的数据
${name}
这个输出的值是 测试 当然不一定要放在request中可以去到,同样放在page session一样也可以去到。
但取值是有优先级的 page->request->session等
  • 事件之文档加载完毕

  在JavaScript中<body onload="xxx()">的意义是:在文档加载完毕后会执行xxx()函数。在jQuery中也存在相同的功能,即:$(function(){..}); 给$()这个参数赋值,参数为一个匿名函数,这个匿名函数会在文档加载完毕时执行。

     <script type="text/javascript">
$(function(){
alert('我叫郑斌');
});
</script>

【WEB小工具】jQuery函数

  • 选择器

  在JavaScript中获取元素可以使用document.getElementByld()等函数,但在jQuery中提供了更为方便的方法。

 <script type="text/javascript">
$(function(){
//document.getElementById("id")//返回一个DOM对象,但 DOM的功能少
var hey = $("#Hanxue");//返回一个jQuery对象 '#'表示元素选择器 '.'表示类选择器
alert(hey.text());//打印出该元素的文本内容
alert(hey.html());//打印该元素HTML内容
var ni = $("div");//元素选择器,查找所有的div元素,它返回的是一个jQuery对象,但jQuery中包含多个DOM对象。
alert(ni.text()); $(".myClass").text("88");//类选择器
});
</script>
</head>
<body>
This is my JSP page. <br>
<!-- 供 元素选择器 -->
<div id="Zhengbin"><p>zhengzhou</p></div>
<div id="Hanxue"><p>kunming</p></div>
<!-- 供 类选择器 -->
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
  • 属性

  jQuery元素对属性的操作方法:

    • attr(name) 读取指定属性的值
    • attr(name,value) 设置指定属性的值
    • removeAttr(name) 删除指定属性

  jQuery元素对类的操作方法:

    • addClass(name) 给元素添加指定类
    • removeClass(name) 给元素删除指定类