Fork me on GitHub

【WEB小工具】jQuery函数

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

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

　　导入jQuery有三种方法：

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

　　$()

　　注意其不同于${}

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

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

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

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

  • 选择器

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

 1 <script type="text/javascript">
 2     $(function(){
 3         //document.getElementById("id")//返回一个DOM对象，但 DOM的功能少
 4         var hey = $("#Hanxue");//返回一个jQuery对象  '#'表示元素选择器 '.'表示类选择器
 5         alert(hey.text());//打印出该元素的文本内容
 6         alert(hey.html());//打印该元素HTML内容
 7         var ni = $("div");//元素选择器，查找所有的div元素，它返回的是一个jQuery对象，但jQuery中包含多个DOM对象。
 8         alert(ni.text());
 9         
10         $(".myClass").text("88");//类选择器
11     });
12     </script>    
13   </head>  
14   <body>
15     This is my JSP page. <br>
16     <!-- 供 元素选择器 -->
17     <div id="Zhengbin"><p>zhengzhou</p></div>
18     <div id="Hanxue"><p>kunming</p></div>
19     <!-- 供 类选择器 -->
20     <div class="myClass">div class="myClass"</div>
21     <span class="myClass">span class="myClass"</span>
22   </body>
  • 属性

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

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

　　jQuery元素对类的操作方法：

    • addClass(name) 给元素添加指定类
    • removeClass(name) 给元素删除指定类
posted @ 2015-06-15 18:46  郑斌blog  阅读(223)  评论(0)  编辑  收藏  举报