当前位置:  编程技术>WEB前端
本页文章导读:
    ▪jsp默认语法、EL、JSTL表达式,JSTL和struts Tag标签的使用总结      因为要面试,思路有点乱,整理下,随想,没有文笔之类,勿在意。 JavaWeb 默认的语法,除HTML 外,共有: 1、<% 可以使用Java语言 %> 2、<%! 可以使用Java 语言定义变量或函数,是public 类.........
    ▪Jquery真的不难~第二回 选择器的使用及性能      回到目录在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家.........
    ▪jQuery 的 ready 函数是如何工作的?      jQuery 是一个伟大的脚本库,由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 http://jquery.com/ 下载到最新版本,目前已经是 1.8.3 版了。学习 jQuery 有许多途径,我们今天从 jQue.........

[1]jsp默认语法、EL、JSTL表达式,JSTL和struts Tag标签的使用总结
    来源: 互联网  发布时间: 2013-11-06

因为要面试,思路有点乱,整理下,随想,没有文笔之类,勿在意。

JavaWeb 默认的语法,除HTML 外,共有:
1、<% 可以使用Java语言 %>
2、<%! 可以使用Java 语言定义变量或函数,是public 类型的 %>
3、<%= 变量 %> 可以取值
4、<%@ 指令元素 %>
5、<jsp:include、forward …… ></jsp:include、forward> 默认标签语言
以上五种是Javaweb 默认语法,除第五种是标签语言外,其余上四种都是JavaWeb 默认的语法格式。
此后,JSP2.0之后,引入了 EL 表达语言和 扩展了 标签语言 称为:JSTL 。

EL 表达式语言,其实可以说是一套独立的编程语言,有自己的语法格式,算式运算符,关系运算符,逻辑运算符,条件运算符等等完整的体系,加上还有一些内置的对象,虽然这些内置的对象都需要Java 支持,但也不失为一套完善的编程语言了。

EL 主要编写在 后缀为.jsp 的页面中,虽然它有自己的语法格式,但其实它的本质是Java类,它会通过Web容器转为特定的Java代码,而后运行在Java虚拟机中,只是为了规范 和方便,所以SUN公司推出了它,但发展到现在,它已经称为JavaWeb不可分割的一部分(虽然JSP页面如今少写业务逻辑)

JSTL 是 JSP2.0 后引入的默认标签库,记得默认语法中,第五条就是 <jsp:xxx /> ,而JSTL可以说是那个的升级版,增加了很多可以直接在 jsp 页面中使用,而格式跟普通HTML类似的标签。

接下来,谈谈,Struts2.x 中的OGNL 表达式 和 标签 Struts Tag 。
Struts2.x 中的 OGNL 可以说是取代了 默认的EL表达式,它自身本就是 EL 表达式,它与默认的EL表达式语言,区别共有多少,我没有仔细去了解,只能说说大致了解的。

1、 取值范围:
a) 默认的EL表达式的格式 ${ },它能单独使用,默认取值范围在 :page (PageContext)
b) OGNL 表达式常用的格式为 # ,还有 $ % 等,默认的取值范围是:valueStack 值栈。

2、 使用范围
a) 默认的EL表达式能单独使用。
b) OGNL 需要和 标签 Struts Tag 联合使用

3、 优势
a) EL 表达式 在于有完整的体系,功能完善,
b) OGNL 没有那些运算,关系,条件,逻辑等等运算符,但它在于能单独访问对象(类),包括静态类,静态方法等

4、 搭档
a) EL + JSTL 。默认的EL虽然能完成大部分功能,但天生缺少的一些,比如遍历等,就需要配合JSTL使用,功能更为完善。
b) OGNL + Struts Tag 。OGNL 负责取值,Struts Tag 负责控制流程。分工明确!

Struts 2.x 的 Struts Tag ,是Struts 默认的标签库,和OGNL 一起使用功能更强大。一般来说,OGNL 取值,而Struts Tag 控制流程和显示。

它取代了 默认的JSTL标签库。
不管是标签,还是表达式语言,都是为了规范在JSP页面的语法,尽量遵循HTML标签式语言,令一些非专业程序员也能使用这些语法开发JSP页面,和保持JSP页面的简洁。

jstl el 是jsp自带的定义标签,struts和ognl是struts定义的标签
作者:shx516857593 发表于2013-1-15 22:40:32 原文链接
阅读:0 评论:0 查看评论

    
[2]Jquery真的不难~第二回 选择器的使用及性能
    来源:    发布时间: 2013-11-06

回到目录

在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了。

从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上。

前言:对于写在<script></script>中的代码,一般在JS环境,我们一般把代码写在window.onload=function(){...}代码块里,这个意思是说,当页面加载完成后,再执行JS代码块,而对于JQ来说,它也有类似的方法$(function(){...});我们把代码段写在这里面。有时如果不想那样写(这样写一般把JS代码放在了<head></head>标记里,但这样会影响页面加载的速度),可以把JS代码写在<body></body>的最底下。

ID选择器

alert($("#name").val()); //输出ID为name的input元素的值

类选择器

alert($(".nameclass").val()); //输出具有css名为nameclass的input元素的值

特殊选择器

alert($("input[type=text][name=name]").val()) //输出类型为text,name为name的input元素的值
//选中指定的select元素:
function chekStatus(o) {
$('#OrderStatus').find('option[value=' + o + ']').attr('selected', true);
$('#search_btn').trigger();
}

//全选
$('#SelectAll').click(function() {
if (this.checked) {
$('.forShop:not(:checked)').each(function() {
this.click();
});
}
else {
$('.forShop:checked').each(function() {
this.click();
});
}
});

//是否有选中项
$('#delSelectProduct').click(function() {
if ($('.protuctitem:checked').size() == 0) {
alert('请选择宝贝');
return false;
}

//根据索引,选中指定的option,并为option添加CSS样式
function chekStatus(o) {
$('#OrderStatus').find('option')[o].selected = true;
$($('#tabs').find('dd').removeClass('cur')[o]).addClass('cur');
$('#search_btn').trigger('click');
}

//为表格的行加隔行变色特效,单击行后,再变色
var $trs = $("#baike_div>table>tbody>tr"); //选择所有行
$trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式
$trs.filter(":even").addClass("even"); //给偶数行添加odd样式

下面有一些选择器的技巧,需要我们去了解

//(1)通配符:
$("input[id^='code']"); //id属性以code开始的所有input标签
$("input[id$='code']"); //id属性以code结束的所有input标签
$("input[id*='code']"); //id属性包含code的所有input标签
//(2)根据索引选择
$("tbody tr:even"); //选择索引为偶数的所有tr标签
$(
    
[3]jQuery 的 ready 函数是如何工作的?
    来源:    发布时间: 2013-11-06

jQuery 是一个伟大的脚本库,由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 http://jquery.com/ 下载到最新版本,目前已经是 1.8.3 版了。

学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。

如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数。

问题来啦,我们的页面什么时候准备好了呢?

1. onload 事件

最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为 DOM0 方式和 DOM2 方式。再考虑到浏览器的兼容性,使用 DOM2 方式写出来,如下所示。

if (document.addEventListener) {
// A fallback to window.onload, that will always work
window.addEventListener("load", jQuery.ready, false);

// If IE event model is used
} else {
// A fallback to window.onload, that will always work
window.attachEvent("onload", jQuery.ready);
}

2. DOMContentLoaded 事件

不过 onload 事件要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。如果网页上有大量的图片,效果可想而知,用户可能在没有看到图片的时候,就已经开始操作页面了,而这时我们的页面还没有初始化,事件还没有注册上,这岂不是太晚了!

除了大家熟知的 onload 事件之外, 与 DOM 中的 onload 事件相近的,我们还有 DOMContentLoaded 事件可以考虑, 基于标准的浏览器支持这个事件,  当所有 DOM 解析完以后会触发这个事件。

这样,对于基于标准的浏览器来说,我们还可以注册这个事件的处理。这样,我们可能更早地捕获到加载完成的事件。

if (document.addEventListener) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);

// A fallback to window.onload, that will always work
window.addEventListener("load", jQuery.ready, false);

}

3. onreadystatechange 事件

不标准的浏览器怎么办呢?

如果浏览器存在 document.onreadystatechange 事件,当该事件触发时,如果 document.readyState=complete 的时候,可视为 DOM 树已经载入。

不过,这个事件不太可靠,比如当页面中存在图片的时候,可能反而在 onload 事件之后才能触发,换言之,它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。

if (document.addEventListener) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);

// A fallback to window.onload, that will always work
window.addEventListener("load", jQuery.ready, false);

// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);

// A fallback to window.onload, that will always work
window.attachEvent("onload", jQuery.ready);
}

DOMContentLoaded 函数在做什么呢?最终还是要调用 jQuery.ready 函数。

DOMContentLoaded = function() {
if ( document.addEventListener ) {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
jQuery.ready();
} else if ( document.readyState === "complete" ) {
// we're here because readyState === "complete" in oldIE
// which is good enough for us to call the dom ready!
document.detachEvent( "onreadystatechange", DOMContentLoaded );
jQuery.ready();
}
}

 

4. doScroll 检测法

MSDN 关于 JScript 的一个方法有段不起眼的话,当页面 DOM 未加载完成时,调用 doScroll 方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了!

Diego Perini 在 2007 年的时候,报告了一种检测 IE 是否加载完成的方式,使用 doScroll 方法调用。详细的说明见这里。
原理是对于 IE 在非 iframe 内时,只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在本例中每间隔 50 毫秒尝试去执行 doScroll,注意,由于页面没有加载完成的时候,调用 doScroll 会导致异常,所以使用了 try -catch 来捕获异常。

(function doScrollCheck() {
if (!jQuery.isReady) {

try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch (e) {
return setTimeout(doScrollCheck, 50);
}

// and execute any waiting functions
jQuery.ready();
}
})();

5. document.readyState 状态

如果我们注册 ready 函数的时间点太晚了,页面已经加载完成之后,我们才注册自己的 ready 函数,那就用不着上面的层层检查了,直接看看当前页面的 readyState 就可以了,如果已经是 complete ,那就可以直接执行我们准备注册的 ready 函数了。不过 ChrisS 报告了一个很特别的错误情况,我们需要延迟一下执行。

setTimeout 经常被用来做网页上的定时器,允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行,我们就会给她指定一个很小的时间数,或者需要马上执行的话,我们甚至把这个毫秒数设置为0,但事实上,setTimeout有一个最小执行时间,当指定的时间小于该时间时,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的毫秒数设置为0,被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢?这和浏览器及操作系统有关。在John Resig的新书《Javascript忍者的秘密》一书中提到

    Browsers all have a 10ms

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
unix/linux知识 iis7站长之家
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3