JQuery选择器和jsp

来源：互联网发布：linux 发送post请求编辑：程序博客网时间：2024/06/07 07:08

jsp的全称 java server pages
jsp页面实际上是servlet
与html页面的不同：
在jsp页面中可以写java代码语法：<%java代码 %> < %=java代码%>
在jsp页面中可以使用request和session

jsp页面是一种java类

jsp和servlet

jsp页面的优点：方便显示
缺点：不方便处理业务逻辑
servlet页面的优点：方便处理业务逻辑
缺点：不方便显示
JSP和servlet是相互使用的

jsp页面运行原理
jsp容器会将jsp转译成servlet，在通过servlet容器来启动和执行

jsp页面的语法
1、编译器的指令
a、include：<%@ include file = "top.jsp"%>(产生一个类)静态引入 path和basePath两个变量
b、page；
c、taglib；
2、脚本语法
a、注释：<！-->(能在源代码中看见，不能注释java代码)，<%- -%>(不能在源代码中看见，能注释java代码)
b、声明：<%!%>声明变量和方法
c、java脚本段：<% %>
d、表达式：<%=%>
3、动作语法
<jsp:forward>实现转发的作用
<jsp：include>(产生两个类)动态引入不能用path和basePath这两个变量

jsp标签实现的就是java代码的作用

jsp页面的九个内置对象

request      请求对象　类型 javax.servlet.ServletRequest        作用域 Request
response      响应对象    类型 javax.servlet.SrvletResponse        作用域 Page
pageContext   页面上下文对象   类型 javax.servlet.jsp.PageContext       作用域 Page
session     会话对象      类型 javax.servlet.http.HttpSession      作用域 Session
application   应用程序对象     类型 javax.servlet.ServletContext        作用域 Application out   输出对象     类型 javax.servlet.jsp.JspWriter         作用域 Page
config     配置对象     类型 javax.servlet.ServletConfig         作用域 Page
page     页面对象       类型 javax.lang.Object                   作用域 Page
exception 例外对象     类型 javax.lang.Throwable                作用域 page

通过pageContext对象可以得到其他八个内置对象
request = pageContext.getRequest()
response = pageContext.getResponse()
session = pageContext.getSession()
application = pageContext.getServletContext()
out = pageContext.getOut()
config = pageContext.getServletConfig()
page = pageContext.getPage()
exception = pageContext.getException()

pageContext还有两个方法：
pageContext.forward("转发的页面")
pageContext.include("包含的页面")

JSP页面的EL(Expression Language)表达式
方法：$(EL Expression)--所有的表达式以"${"开始，以"}"结束
一：JSP EL操作的内容：
1、常量 2、运算 3、变量 4、隐私对象
二：常量：
1、布尔型：$(true)
2、整型：$(10)
3、浮点型：$(10.5)
4、字符串型：$("wjl")
5、空类型：$(null)

EL表达式的结果为null，什么也不显示，结果不是null，是什么就显示甚而没

JQuery选择器

1、调用字段的结果

function testA(){
   var username = $("#username").val();
   alert(username);//运行为timo2
   username = "timo2"
   alert(username);//运行为timo2
   $("#username").val("timo3");
   alert(username);//运行为timo2
   $("#username").val("");
   alert(username);//运行为null
   }
    <input type = "text" id = "username" >
   <input type="button" value = "获取" onclick = "testA()"/>
   <hr/>

]

2、获得属性，调用属性

function testB(){

alert($("#input").attr("type"));
alert($("#input").attr("value"));//获得属性

}

3、获得属性，修改属性

   function testC(){
   alert($("#user").attr("type"));
   alert($("#user").attr("value"));//获得属性
   $("#user").attr("type","button");//修改单个属性
   $("#user").css({borderColor:"red",color:"blue",fontSize:"100px"});//修改多个属性，在{}修改，用都好隔开
   $("#user").removeAttr("value");
   }

4、给button表的属性

   function testD(){
   alert($("#name").height());//给属性高
   alert($("#name").width());//给属性宽
   $("#name").height(50);//给属性高的值
   $("#name").width(100);//给属性宽的值
   }

5、双重方法

    function testA(){
       $("#user").click(function() {
       alert("提莫队长");
   });
   }

$(document).ready(
   function(){
       $("#user").click(function(){
           alert("小提莫");
       });
       }
   );    <input type = "button" value = "提交" id = "user" onclick = "testA()" >
   <hr/>

6、点击标签的三种方法

    $(function(){
       $("p").click(
       function(){
       alert("点击p标签第一方法")
       });
   });


   $(document).ready(
   function(){
       $("p").click(function(){
           alert("点击p标签第二方法");
       });
       });

   $().ready(
       function(){
           $("p").click(
           function(){
           alert("点击p标签第三方法")
           });
       });

7、回车

$(document).ready(
       function(){
       $("#name").keydown(
           function(e){
           if(e.keyCode==13){
           alert("回车");
           }
       });
   });

8、增添内容

$(document).ready(
       function(){
       $("div").append("<b>正在送命</b>");
       }
   );

9、增添加改

$(document).ready(
       function(){
   $("p").appendTo("div");
       }
   );

<p>I would like to say: </p>
<div></div><div></div>

10、查找第一或者最后一行

$(document).ready(
       function(){
       $("#name").click(
       function () {
           alert($("li:first").text())
       });
       });

$(document).ready(
       function(){
       $("#name").click(
       function () {
           alert($("li:last").text())
       });
       });

11、指定查找想要找的一行

$(document).ready(
       function(){
       $("#timo").click(
       function () {
           alert($("tr:eq(3)").text())
       });
       });

12、查找所选定的一项

$(document).ready(
       function(){
       $("#xiaopao").click(
       function () {
           alert($("select option:selected").text())
       });
       });

13、焦点

            $(document).ready(
       function(){
           $("#timo").focus(
               function(){
                   alert("焦点");
               }
           );
       }
   );

    <input type = "text" value = "提交" id ="timo">

阅读全文

0 0