JQuery与EL和JSTL标签的详解

一，jquery的主函数：

jQuery$(function(){

   });

或者是：$(document).ready(function(){

   });

 

二，jquery对象：

  把DOM对象转换为jQuery对象

var div1 = document.getElementById("div1");//DOM对象 alert(div1.value); var Jdiv1 = $(div1)//jquery对象   alert(Jdiv1 .val()) <input type="text" id="myinput"/>

    

把jQuery对象转换为DOM对象

var Jdiv1 = $(div1)//jquery对象 alert(Jdiv1 .get[0].value)

 

三，基本选择器

1，id选择器：$("#myinput")

function myclick(){      var my = $("#myinput");      alert(my.val()) } <input type="text" id="myinput"/> <input type="button" value="点击" onclick="myclick()"/>

 

2，元素选择器：$("input")

function myclick(){ //获取页面上所有input的jquery元素      var inputs = $("input");         //使用jQuery提供的元素遍历      inputs.each(function(){             //this表示jQuery对象      var obj = $(this);      alert(obj.val());      if(obj.val()=='3'){              //false表示终止循环      return false;      }      }) } <input type="text" id="myinput"/><br> <input type="text" id="myinput"/><br> <input type="text" id="myinput"/><br> <input type="text" id="myinput"/><br> <input type="button" value="点击" onclick="myclick()"/>

 

3，类选择器：$(".div")

function div(){ var div=$(".div"); alert(div.html()) } <div class="div">123</div> <input type="button" value="点击" onclick="div()"/>

 

4，ajax

function ajax(){ var name=$("#name").val(); $.ajax({ type  :'post', url : 'login1',       Async : false  //表示ajax同步，默认是true data :{ name:name }, dataType : 'text', success : function(responseText){ alert(responseText) }, error : function(){ } }); } <input type="text" id="name"/> <input type="button" value="点击ajax" onclick="ajax()"/>

配置地址：url(在web.xml中配置)

<servlet>       <servlet-name>AjaxServlet</servlet-name>       <servlet-class>com.ajax.Servlet.AjaxServlet</servlet-class>     </servlet>     <servlet-mapping>       <servlet-name>AjaxServlet</servlet-name>       <url-pattern>/login1</url-pattern>     </servlet-mapping>

 

四：jQuery的常用方法

取值与赋值操作

$("#ID").val(); //取value值

$("#ID").val("xxx"); //赋值

$("#ID").text(); //相当于取innerText

$("#ID").text(""); //相当于赋值给innerText

$("#ID").html(); //相当于取innerHTML

$("#ID").html(""); //相当于赋值给innerHTML

 

属性设置

$("#ID").attr(key,value);//取得或设置匹配元素的属性值

 

显示和隐藏

$("#ID").hide(); //隐藏$("#ID").show(); //显示

 

事件处理

$(document).ready(fn);$("#ID").bind(type,[data],fn); //绑定事件处理器函数$("#ID").toggle(fn,fn);//注册每次点击时切换要调用的函数

$(”#msg”).click();//触发id为msg的元素的单击事件

$(".zj_click").click(function () {

            $(".transform_page").show();

 

外观效果

$("#ID").addClass(class);//添加样式

$("#ID").removeClass(class);//移除样式

$("#ID").css(name,value);//设置一个样式属性的值

 

五：EL表达式、

1、语法结构

${expression}

2、[ ]与.运算符

EL 提供“.“和“[ ]“两种运算符来存取数据。

当要存取的属性名称中包含一些特殊字符，如 . 或 - 等并非字母或数字的符号，就一定要使用“[ ]“。例如：

${ user. My-Name}应当改为${user["My-Name"]}

如果要动态取值时，就可以用“[ ]“来做，而“.“无法做到动态取值。例如：

${sessionScope.user[data]}中data 是一个变量

3、变量

EL存取变量数据的方法很简单，例如：${username}。它的意思是取出某一范围中名称为username的变量。

因为我们并没有指定哪一个范围的username，所以它会依序从Page、Request、Session、Application范围查找。

假如途中找到username，就直接回传，不再继续找下去，但是假如全部的范围都没有找到时，就回传null。

六，JSP 标准标签库（JSTL）

·  核心标签

· 格式化标签

· SQL 标签

· XML 标签

· JSTL 函数

使用方式：导入jstl  jar包，在页面引入

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

核心标签：

标签	描述
<c:out>	用于在JSP中显示数据，就像<%= ... >
<c:set>	用于保存数据
<c:remove>	用于删除数据
<c:catch>	用来处理产生错误的异常状况，并且将错误信息储存起来
<c:if>	与我们在一般程序中用的if一样
<c:choose>	本身只当做<c:when>和<c:otherwise>的父标签
<c:when>	<c:choose>的子标签，用来判断条件是否成立
<c:otherwise>	<c:choose>的子标签，接在<c:when>标签后，当<c:when>标签判断为false时被执行
<c:import>	检索一个绝对或相对 URL，然后将其内容暴露给页面
<c:forEach>	基础迭代标签，接受多种集合类型
<c:forTokens>	根据指定的分隔符来分隔内容并迭代输出
<c:param>	用来给包含或重定向的页面传递参数
<c:redirect>	重定向至一个新的URL.
<c:url>	使用可选的查询参数来创造一个URL

 

格式化标签：

标签	描述
<fmt:formatNumber>	使用指定的格式或精度格式化数字
<fmt:parseNumber>	解析一个代表着数字，货币或百分比的字符串
<fmt:formatDate>	使用指定的风格或模式格式化日期和时间
<fmt:parseDate>	解析一个代表着日期或时间的字符串
<fmt:bundle>	绑定资源
<fmt:setLocale>	指定地区
<fmt:setBundle>	绑定资源
<fmt:timeZone>	指定时区
<fmt:setTimeZone>	指定时区
<fmt:message>	显示资源配置文件信息
<fmt:requestEncoding>	设置request的字符编码