找了一个新皮肤,默认的皮肤过于囧囧有神了……
感谢FatMouse 提供了如此漂亮的皮肤,在此感激一下。
jQuery1.2选择器
以下的文档根据官网1.2选择器汉化,并做相应的调整及加入了部份示例。
由于实际使用中选择器在IE和非IE下会有不同的效果,请参照红色的字样。如有错误请及时联系我。
绯雨汉化:http://feiyu.asgard.cn
基本选择器
#myid | 返回: <jQuery对象> |
匹配一个id为myid的元素。 | |
element | 返回: <jQuery对象> 数组 |
匹配所有的element元素 | |
.myclass | 返回: <jQuery对象> 数组 |
匹配所有class为myclass的元素 | |
* | 返回: <jQuery对象> 数组 |
匹配所有元素。该选择器会选择文档中所有的元素,包括html,head,body | |
selector1,selector2,selectorN | 返回: <jQuery对象> 数组 |
匹配所有满足selector1或selector2或selectorN的元素 |
层次选择
elementParent elementChild | 返回: <jQuery对象> 数组 |
匹配elementParent下的所有子元素elementChild。例如:$("div p") 选择所有div下的p元素 | |
elementParent > elementChild | 返回: <jQuery对象> 数组 |
匹配elementParent下的子元素elementChild。例如:$("div>p") 选择所有上级元素为div的p元素 | |
prev+next | 返回: <jQuery对象> 数组 |
匹配prev同级之后紧邻的元素next。例如:$("h1+div") 选择所有div同级之前为h1的元素(<h1 /><div />) | |
prev ~ siblings | 返回: <jQuery对象> 数组 |
匹配prev同级之后的元素siblings。例如:$("h1~div") 可以匹配(<h1 /><div /><div />) |
基本滤镜
:first | 返回: <jQuery对象> |
匹配第一个元素 | |
:last | 返回: <jQuery对象> |
匹配最后一个元素 | |
:not(selector) | 返回: <jQuery对象> 数组 |
匹配不满足selector的元素 | |
:has(selector) | 返回: <jQuery对象> 数组 |
匹配包含满足selector的元素。此选择器为1.2新增 | |
:even | 返回: <jQuery对象> 数组 |
从匹配的元素集中取序数为偶数的元素。 | |
:odd | 返回: <jQuery对象> 数组 |
从匹配的元素集中取序数为奇数的元素。 | |
:eq(index) | 返回: <jQuery对象> 数组 |
从匹配的元素集中取第index个元素 | |
:gt(index) | 返回: <jQuery对象> 数组 |
从匹配的元素中取序数大于index的元素 | |
:lt(index) | 返回: <jQuery对象> 数组 |
从匹配的元素中取序数小于index的元素 | |
:header | 返回: <jQuery对象> 数组 |
匹配所有的标题元素,例如h1,h2,h3……hN。此选择器为1.2新增 | |
:animated | 返回: <jQuery对象> 数组 |
匹配正在执行动画的元素。此选择器为1.2新增 | |
:empty | 返回: <jQuery对象> 数组 |
匹配所有没有子元素(包括文本内容)的元素 | |
:parent | 返回: <jQuery对象> 数组 |
匹配包含子元素(包含文本内容)的所有元素 | |
:contains(text) | 返回: <jQuery对象> 数组 |
匹配所有含有text的元素 | |
:hidden | 返回: <jQuery对象> 数组 |
匹配所有隐藏的元素,包含属性type值为hidden的元素 | |
:visible | 返回: <jQuery对象> 数组 |
匹配所有非隐藏的元素 |
子元素滤镜
E:nth-child(index/even/odd/equation) | 返回: <jQuery对象> 数组 |
匹配所有E在其父元素下满足(index/even/odd/equation)条件的集合。注:下标从1开始 | |
E:first-child | 返回: <jQuery对象> 数组 |
匹配所有E在其父元素下是第一个子元素的集合。例如:HTML(<div><p id="p1"></p></div><div><p id="p2"></p><p id="p3"></p></div>"),使用$("p:first-child"),选取:<p id="p1"></p><p id="p2"></p> | |
E:last-child | 返回: <jQuery对象> 数组 |
匹配所有E在其父元素下是最后一个子元素的集合。例如:同上的HTML,使用$("p:last-child"),选取:<p id="p1"></p><p id="p3"></p> | |
E:only-child | 返回: <jQuery对象> 数组 |
匹配所有E是其父元素的唯一子元素的集合。例如:同上的HTML,使用$("p:only-child"),选取:<p id="p1"></p> |
表单滤镜
:input | 返回: <jQuery对象> 数组 |
匹配所有的input、textarea、select、button | |
:text | 返回: <jQuery对象> 数组 |
匹配文本域。注:在IE浏览器下,选择的对象是所有type属性为text的元素,在非IE浏览器下,选择的对象是input元素type属性为text的元素 | |
:password | 返回: <jQuery对象> 数组 |
匹配密码域。注:在IE浏览器下,选择的对象是所有type属性为password的元素,在非IE浏览器下,选择的对象是input元素type属性为password的元素 | |
:radio | 返回: <jQuery对象> 数组 |
匹配单选按钮。注:在IE浏览器下,选择的对象是所有type属性为radio的元素,在非IE浏览器下,选择的对象是input元素type属性为radio的元素 | |
:checkbox | 返回: <jQuery对象> 数组 |
匹配复选框。注:在IE浏览器下,选择的对象是所有type属性为checkbox的元素,在非IE浏览器下,选择的对象是input元素type属性为checkbox的元素 | |
:submit | 返回: <jQuery对象> 数组 |
匹配提交按钮。注:在IE浏览器下,选择的对象是所有type属性为submit的元素,在非IE浏览器下,选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素 | |
:image | 返回: <jQuery对象> 数组 |
匹配图像域。注:在IE浏览器下,选择的对象是所有type属性为image的元素,在非IE浏览器下,选择的对象是input元素type属性为image的元素 | |
:reset | 返回: <jQuery对象> 数组 |
匹配重置按钮。注:在IE浏览器下,选择的对象是所有type属性为reset的元素,在非IE浏览器下,选择的对象是input或button元素type属性为reset的元素 | |
:button | 返回: <jQuery对象> 数组 |
匹配按钮。注:在IE浏览器下,选择的对象是所有type属性为button的元素和元素名为button的元素,在非IE浏览器下,选择的对象是input元素type属性为button的元素和元素名为button的元素 | |
:file | 返回: <jQuery对象> 数组 |
匹配文件域。注:在IE浏览器下,选择的对象是所有type属性为file的元素,在非IE浏览器下,选择的对象是input元素type属性为file的元素 | |
:enabled | 返回: <jQuery对象> 数组 |
匹配所有可用的元素。注:即:not(:disabled),参考:disabled的注释 | |
:disabled | 返回: <jQuery对象> 数组 |
匹配所有禁用的元素。注:在非IE浏览器下,选择的对象是禁用的表单元素 | |
:checked | 返回: <jQuery对象> 数组 |
匹配所有被选中的表单。注:在IE浏览器下,选择的对象是含有checked属性的所有元素 | |
:selected | 返回: <jQuery对象> 数组 |
匹配所有选择的表单。注:在IE浏览器下,选择的对象是含有selected属性的所有元素 |
属性滤镜
[attribute] | 返回: <jQuery对象> 数组 |
匹配拥有attribute属性的元素 | |
[attribute=value] | 返回: <jQuery对象> 数组 |
匹配属性attribute为value的元素 | |
[attribute!=value] | 返回: <jQuery对象> 数组 |
匹配属性attribute不为value的元素 | |
[attribute^=value] | 返回: <jQuery对象> 数组 |
匹配属性attribute的值以value开始的元素 | |
[attribute$=value] | 返回: <jQuery对象> 数组 |
匹配属性attribute的值以value结尾的元素 | |
[attribute*=value] | 返回: <jQuery对象> 数组 |
匹配属性attribute的值包含value的元素 | |
[selector1][selector2][selectorN] | 返回: <jQuery对象> 数组 |
匹配满足属性选择器selector1、selector2、selectorN的元素 |
从jQuery 1.1升级到1.2开发注意事项
看到绯雨的网站,非常好,介绍了不少jQuery的内容。此处转载一下1.1升级至1.2的差异性。
网上大部份的资料都是以jQuery 1.12为基础讲的。1.12至1.21更新了不少东西,如果不看官方的更新文档或者官方最新的API可能对开发造成影响。
1、选择器不支持XPath
XPath自1.2开始不再被jQuery默认支持。您可以通过插件形式来继续使用XPath,但是强烈建议您使用官方的选择器来替代XPath。
[code]$("div//p") //XPath写法
$("div p") //标准写法
$("div/p") //XPath写法
$("div>p") //标准写法
$("p/../div") //XPath写法
$("p").parent("div") //标准写法
$("div[p]") //XPath写法
$("div:has(p)") //标准写法
$("a[@href]") //XPath写法
$("a[href]") //标准写法[/code]
2、使用slice替代eq,lt,gt
eq及lt,gt方法非常好用,但官方从1.1.4开始放入了slice方法来替代它们,中间有一版本完全取消了eq(好像是1.2),然后又因为抗议太多,又把eq加回来了(群众的力量是强大的),但是难保eq在以后的版本还会继续存在。建议换成slice
[code]$("p").eq(0) //使用eq方法
$("p").slice(0,1) //使用slice方法
$("p").lt(2) //使用lt方法
$("p").slice(0,2) //使用slice方法
$("p").gt(2) //使用lt方法
$("p").slice(3) //使用slice方法[/quote]
3、contains方法官方不再赞成使用(有被取消掉的可能)
$("p").contains('text') //使用contains方法
$("p").filter(":contains(text)") //使用filter方法+选择器
4、loadIfModified,getIfModified,ajaxTimeout方法被取消
这3个方法应该算是冷门方法了,用的人应该是很少很少,替代方法如下。
[code]$("#elem").loadIfModified("some.asp") //使用loadIfModified方法
$.ajax({ //使用ajax方法(JSON参数里加入了ifModified)
url: "some.asp",
ifModified: true,
success: function(html) {
$("#elem").html(html)
}
});
$("#elem").getIfModified("some.asp") //使用getIfModified方法
$.ajax({ //使用ajax方法(JSON参数里加入了ifModified)
url: "some.asp",
ifModified: true
});
$.ajaxTimeout(3000) //使用ajaxTimeout方法
$.ajaxSetup({timeout: 3000}) //使用ajaxSetup方法[/code]
此外,版本更新里对动画效果也做了修改,具体看官方API的animate部份。此文档以1.1.4和1.2的更新说明为基础写的,可以上官网查看对应的原版更新文档。
1.2的选择器:http://shawphy.com/article.asp?id=8
在jQuery中利用AJAX加载XML数据并解析
被cssrain翻了N多的关于AJAX加载XML的帖子尸体。。。。
总结一下:
1,Content-Type
很多时候无法解析就是Content-Type的问题。
如果本身就是xml文件,请跳过这一步
动态生成的XML一定要将其设置为text/xml,否则默认就是text/html也就是普通的文本了。
常见语言的Content-Type设置
header(“Content-Type:text/xml”); //php
response.ContentType=”text/xml” //asp
response.setHeader(“ContentType”,”text/xml”); //jsp
2,xml结构。
XML一定要封闭的,很重要!
例:
错误的XML
正确的
3,解析
这里引用macnie的
遍历student(这里还是用上面那个XML,子节点是student)
$.ajax({
url:’ajax.asp’,
type: ‘GET’,
dataType: ‘xml’,//这里可以不写,但千万别写text或者html!!!
timeout: 1000,
error: function(xml){
alert(‘Error loading XML document’+xml);
},
success: function(xml){
$(xml).find(“student”).each(function(i){
var id=$(this).children(“id”); //取对象
var id_value=$(this).children(“id”).text(); //取文本
alert(id_value);//这里就是ID的值了。
alert($(this).attr(“email”)); //这里能显示student下的email属性。
//最后么输出了,这个是cssrain的写法,貌似比macnie更JQ一点
$(‘
‘)
.html(id_value)
.appendTo(‘ol’);
});
}
});
最后补充一条:保证服务器端是utf-8的编码,否则会乱码!
好啦,完工了,其实也不复杂,对吧?
jQuery 1.2.2发布信息的简单翻译
jQuery发布
[b]
jquery 1.2.2 完整版:[本站下载] 93.1 KB (推荐供测试、开发、学习用)
jquery 1.2.2 Packed压缩版:[本站下载] 28.6 KB (推荐没有开通GZip的网站使用)
jquery 1.2.2 去注释空格版:[本站下载] 51.4 KB (GZizp压缩后15kb。推荐开通GZip的网站使用)
[/b]
2008-1-14日,这个版本是针对jQuery 1.2的BUG修复,你可以在Bug Tracker查看详细列表
重大改变
$(DOMElement)提升300%速度(此处鼓吹的不高兴翻译了……大家自己看表,并结合实践再判断吧
Browser1.2.1 (ms)1.2.2 (ms)
Firefox 2 0.041 0.015
Firefox 3 0.033 0.01
Safari 3 0.017 0.005
Opera 9 0.023 0.004
IE 6 0.04 0.03
.ready()改变
- IE中改变较多,我们不再必须写一个document.write(),感谢Diego Perini的灵感。
- 所有浏览器都是等CSS就绪后执行脚本了而不只是DOM,因为用户希望在CSS加载后判断某个元素是否可见以及高度等信息。这次在Safari和Opera中实现了。
- $(document).bind("ready", fn);你可以用bind来监控ready了。当然以往的.ready()依旧。
.bind("mouseenter") / .bind("mouseleave")
将.hover()的内核拆出两个新事件,这跟mouseover 不同 mouseout ,因为那些事件会在你进出子元素的时候也会触发,这往往不必如此。在1.2.2中,下面两段都有效:[code]$("li").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});[/code][code]$("li").bind("mouseenter", function(){
$(this).addClass("hover");
}).bind("mouseleave", function(){
$(this).removeClass("hover");
});[/code]
.bind("mousewheel")
Brandon Aaron写的新插件,基于我们的新内核API,可以这样使用:[code]$("div").bind("mousewheel", function(event, delta){
if ( delta < 0 )
$(this).append("up");
else
$(this).append("down");
});[/code]
更复杂的:not()
虽然这个不是CSS 3的标准,但是由于大家都需要,所以我们也就加上了。
现在下面的写法都是可以用了
$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")
Accept Headers
现在我们会在普通的AJAX中发送给服务器一个附加的 accept headers
如果你指定了dataType,我们就会放你发送了。具体如下
- xml "application/xml, text/xml"
- html "text/html"
- script "text/javascript, application/javascript"
- json "application/json, text/javascript"
- text "text/plain"
- Everything else: "*/*"
Bug Fixes
- .clone() overhaul
- Script evaluation overhaul
- height() / width() overhaul
- Cross-frame DOM manipulation
- A few memory leaks have been resolved
Event API
这个是新的API,功能非常强大,通过上面那个新增事件的代码来学习这个强大的API。
今日本站正式开张了
今日开张,不多说什么
这里主要放写个人动态以及一些技术性文章。
欢迎大家关注
博客第一文!
开山啦!!!!
终于,我又开始博客了
算下来这已经可能是我第4个博客了
从CNBLOG到SPACE,再后来校内
当然还有其他一些注册了几乎没写过东西的博客,不提咯~
感慨这几年的博客发展
这次的博客还是我自己的电脑上本地的,希望下次能够已经发布到互联网上了
先写起来,自己的网站独享的博客~~HOHO,挺开心的~~
总之就慢慢来了,暂时用这个PJ的BLOG,本来想用个.net的,但没找到成熟的,也知道作罢了。
呵呵,今日就先写到这里,以后再丰富咯~~