2011-8-2_09-15-06_周二
http://tq365jsb003-pc:8080/cjwIbatis2Spring1.0/deluser.jspx?id=2
这种值传递,必须有方法setId()来将2赋值给参数id
url重写决定了url的取值与导向!
Jquery是继prototype之后又一个优秀的Javascrīpt框架。
它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery已经成为目前最流行的JavaScript库
使用了$代替频繁的document.getElementById()操作。
$("div p"); //得到所有div标签下的p元素
$("div.container"); //得到class 为container的div元素
$("div #msg"); //得到标签下面id为msg的div元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。
$("table a",context); //得到context为上下文的table里面所有的链接元素
创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
jQuery 代码:
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
$(this)是Jquery对象,this是DOM对象。
${"#stop"} 返回id=stop的元素的jQuery对象!
DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;
代码如下:
var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;
jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。jQuery对象和DOM对象,只能调用自己对象内的方法,而不能调用对方的方法!
jquery对象转换成 dom对象:
两种方法,即[index]和get(index),是下标,其实jquery对象就是一个数组对象.
var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中
dom对象转换成jquery对象:
方法为$(dom对象);
代码如下:
var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象
jquery对象提供了一套更加完善的工具用于操作dom
平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂
建议:如果获取的对象是 jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象
如:
var $variable = jquery对象;
var variable = dom对象
在jQuery文件里面有定义$=jQuery;
用$("#id")和用jQuery("#id")是一样的。
你可以理解为:
$("txt1") == document.getElementById("txt1")
不过它的选择器功能很强大
也可以重新定义关键字:
比如
var Hello = jQuery.noConflict();
这样以后就可以用Hello做前缀了
Hello("txt1"),跟之前的效果一样!
$是jquery的特殊符 用于区分 jquery就是用这个来区分的
选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。、
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").get().reverse();
结果:
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
jQuery获得的对象都是对象数组!需要使用下标访问!返回的jq都是元素数组!
以class查询:$(".myClass");
以id查询:$("#abc");
匹配所有元素:$("*")
找到表单中所有的 input 元素:$("form input")
找到表单中所有的子级input元素:$("form > input")
匹配所有跟在 label 后面的 input 元素:$("label + input") 要注意“label”的作用域!
找到所有与表单同辈的 input 元素:$("form ~ input") //form与input呈并列关系!
查找所有未选中的 input 元素:
HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />jQuery
代码:
$("input:not(:checked)");
结果:
[<input name="apple" />]
查找表格的1、3、5...行(即索引值0、2、4...):$("tr:even");
查找表格的2、4、6行(即索引值1、3、5...):$("tr:odd");
查找第二行:$("tr:eq(1)")
匹配所有大于给定索引值的元素:$("tr:gt(0)");
匹配所有小于给定索引值的元素:$("tr:lt(2)");
匹配如 h1, h2, h3之类的标题元素:
给页面内所有标题加上背景色:$(":header").css("background", "#EEE");
匹配所有正在执行动画效果的元素:
只有对不在执行动画效果的元素执行一个动画特效:
HTML 代码:
<button id="run">Run</button><div></div>jQuery
代码:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
匹配所有不包含子元素或者文本的空元素:$("td:empty")
匹配含有子元素或者文本的元素:$("td:parent")
匹配包含给定属性的元素:
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]
匹配给定的属性是以某些值开始的元素:
查找所有 name 以 'news' 开始的 input 元素:
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
匹配给定的属性是以某些值结尾的元素:$("input[name$='letter']")
匹配给定的属性是以包含某些值的元素:$("input[name*='man']")
复合属性选择器,需要同时满足多个条件时使用:$("input[id][name$='man']")
匹配所有 input, textarea, select 和 button 元素:$(":input")
隐藏元素分两种: <tr style="display:none"><td>Value 1</td></tr>,<input type="hidden" name="id" />
从所有匹配的元素中删除全部或者指定的类:从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass("selected");
结果:
[ <p class="first">Hello</p> ]
如果存在(不存在)就删除(添加)一个类:
为匹配的元素切换 'selected' 类:
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
如果开关switch参数为true则加上对应的class,否则就删除:
每点击三下加上一次 'highlight' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
如果开关switch参数为true则加上对应的class,否则就删除:
根据父元素来设置class属性
jQuery 代码:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。