jQuery1.2选择器

2008-03-16 11:57:56

接前文——使用jQuery进行便捷web开发

严格来说这些东西都没有多少原创性可言,只是总结一些东西,方便自己,也顺便方便一下别人~

jQuery的选择器是极其强大并且有趣的,他结合了CSS1,CSS2,部分CSS3以及部分XPath的语法,同时并有一些专有的扩展 ,这样,使用起来便得心应手。

最基本的选择器

  • #id 通过id获取对象你就可以这样写了$(”#id”),而不用再getElementById(”id”),当然实际上,很多人都在自己定义$的getElementById方法;
  • #.class 通过class获取对象,javascript中是没有专门的类似函数的
  • element 类似于getElementsByTagName
  • * 用于匹配所有元素
  • 组合选择器 直接将CSS中组合选择器的思想引用过来,各选择器之间以逗号区分,如:$(”#id,.class,h1″)

层级选择器

  • $(”parent children”) 匹配给定祖先元素下的所有后代元素,如:$(”form input”)将匹配所有表单元素中的input元素
  • parent > child 匹配给定祖先元素下的子元素,而非所有后代元素
  • prev + next 匹配一个有效选择器pre后紧接着的第一个选择器
  • prev ~ siblings 匹配一个有效选择器pre后的所有同级选择器

基本滤镜

  • :first 匹配返回对象中的第一个元素,如:$(”div:first”)将返回DOM树中的第一个div
  • :last 匹配返回对象中的最后一个元素
  • :not 去除所有与给定选择器匹配的元素,如:$(”div:not(’.post’)”)将返回class部位“post”的所有div元素
  • :even 匹配所有索引值为偶数的元素,从 0 开始计数,这个选择器在制作“斑马线”是十分有效,如:$(”td:even”).css(”backgroundColor”,”#FFF”)
  • :odd 匹配所有索引值为奇数的元素
  • :eq(index) 匹配一个给定索引值的元素,如:$(”p:eq(0)”)将返回文档中的第一个文本段落
  • :gt(index) 匹配所有大于给定索引值的元素
  • :lt(index) 匹配所有小于给定索引值的元素
  • :header 匹配如 h1, h2, h3之类的标题元素
  • :animated 匹配所有正在执行动画效果的元素,如:$(”div:not(:animated)”)

子元素滤镜

  • :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素

    ‘:eq(index)’ 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!可以使用
    :nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)
    如:$(”ul li:noth-child(2)”)将匹配所有ul下的第二个li元素

  • :first-child 匹配第一个子元素,如$(”ul li:first-child”)将匹配ul的第一个li元素
  • last-child 匹配最后一个子元素
  • only-child 当该元素为其父元素的唯一子元素时将被匹配

属性滤镜

  • [attribute] 匹配包含特定属性的元素,如:$(”img[title]“)将匹配所有拥有title属性呃img元素
  • [attribute=value] 匹配特定属性为特定值的元素,如:$(”img[title='点击查看原图']“)匹配所有title属性为“点击查看原图”的img元素
  • [attribute^=value] 匹配特定属性其值以特定字符为起始值的元素,如:$(”img[title^='点击']“)匹配所有title属性以“点击”开始的img元素
  • [attribute$=value] 匹配特定属性其值以特定字符结尾的元素
  • [attribute*=value] 匹配特定属性其值包含特定字符的元素
  • 复合属性选择器 如:$(”img[title^='点击'][title$='原图']“)

表单滤镜

  • :input 匹配所有 input, textarea, select 和 button 元素,如:$(:input)
  • :text 匹配所有的单行文本框
  • :password 匹配密码域
  • :radio 匹配单选按钮
  • :checkbox 匹配复选框
  • :sumbit 匹配提交按钮
  • :image 匹配图像域
  • :reset 匹配重置按钮
  • :buttom 匹配按钮
  • :file 匹配文件域
  • :enabled 匹配所有可用的元素
  • :disabled 匹配所有禁用的元素
  • :checked 匹配所有被选中的表单
  • :selected 匹配所有选择的表单
  • :hidden 匹配所有不可见元素,或者type为hidden的元素

其他滤镜

  • :contains(text) 匹配包含给定文本的元素,如:$(”p:contains(’jQuery’)”)将匹配包含”jQuery”的所有段落元素
  • :empty 匹配所有不包含子元素或者文本的空元素
  • :has 匹配所有不包含子元素或者文本的空元素,如:$(”div:has(’p')”)将匹配所有包含有段落元素的div元素
  • :parent 匹配含有子元素或者文本的元素
  • :visible 匹配所有的可见元素

本文相关链接:

使用jQuery进行便捷web开发

2008-03-15 23:18:55

咳咳~这个题目~不废话吗~谁写JS框架是为了进行“笨重”开发?嗯~这个~囧~OK,不废话了…接触jQuery有一段时间了,关于jQuery本身我就不再多做介绍,大家可以随意google或者baidu,也可访问jQuery的官方网站~…个人认为只要稍有编程基础,jQuery的学习还是比较轻松的。当然如果你掌握一点DOM,CSS的知识就更好了~这不是一篇教程,而是一点个人学习的总结,所以谈及比较重要的一些知识点。

使用jQuery进行开发时需要改变一些惯有的编程习惯,或者说是编程风格。其中最重要的一点便是DOM对象和jQuery对象之间的类型转换。因为单纯的jQuery对象是无法使用DOM定义的方法和属性的,jQuery对象和DOM对象之间的方法是不能混用的。比如有$(”.myClass”)这样一个jQuery对象,可以通过以下方法来进行类型的转换:

  1. $(”.myClass”)[0],直接获取该jQuery对象中的第一个元素。当然如果你是$(”#myId”)[0]那么实际上返回的就是id值为“myId”的DOM对象。
  2. $(”.myClass”).get(0),其等价于$(”.myClass”)[0],没什么区别

$(document).ready(function(){}),$(function(){})和jQuery(function(){})这三种写法有什么区别吗?我现在也没弄清楚。在传统的javascript中,window.onload似乎是用来装载JS的唯一方法,但是这个方法却有明显的弊端。因为onload事件本身就是在整个页面内容下载完成后才触发,包括图片。但实际上在很多时候这是不需要的,JS很多时候用来操纵DOM,那么只需要DOM树下载完成就可以了,那么这个时候你就可以用$(document).ready()来,DOM树装载完成即可触发。

jQuery支持方法的连写,什么意思?在传统JS中一个链接的简单hover效果你需要分别为onmouseover和onmouseout事件定义事件函数。但是在jQuery中可以这样写

  1. $("#myLink").mouseover(function(){}).mouseout(function())

怎么样?很简单吧~当然你如果愿意你可以继续在后面添加事件函数,比如:

  1. $("#myLink").mouseover(function(){}).mouseout(function()).click(function(){}).addClass("myClass")

同一函数实现set和get。比如html():

  1. alert($("#myId").html())    //get
  2. $("#myId").html(<p>文本段落</p>)    //set

这类函数即可以用来获取值,同时也能设置值。这样的函数还有:text(),height(),weidth(),val(),其实css(),click()也可以算是这类函数~···,这样一来其实整个jQuery里面的函数很多都是既可以set也可以get的~

jQuery中的事件触发皆省略掉传统javascript中的on,本文前面已有例子。比如传统方法你得这样写:

  1. myElement.onclick=function(){}

而在jQuery中你可以简单地写成这样:

  1. myElement.click(function(){})

除此之外jQuery中还有一些自定义的事件:hover(),ready(),toggle(),triggle(),bind(),unbind(),这些事件函数具体定义请参考jQuery的API,在此不作赘述。

浏览器的判断$.browser,可用值:safari,opera,msie,mozilla。该属性在DOM装载完成之前就是有效的,故可以通过此属性先判断浏览器类型,再为特定浏览器编写程序。

  1. if($.browser.msie){alert("this is ie")}

利用noConflict()实现多库共存。我们知道这个地球上不止jQuery这样一个JS框架,还有大名鼎鼎的prototype,YUI,Dojo等~有时难免会同时使用多个框架,难免发生命名冲突。就比如“$”在prototype和jQuery中都有定义,如不做处理必然导致命名冲突。那么这时候我们就可以使用noConflict()函数将变量$的控制权让渡出来。

  1. jQuery.noConflict();    //转让控制权
  2. jQuery("div p").hide();    // 使用 jQuery
  3. $("content").style.display = 'none';    //使用其他库的 $()

…….

除此之外,jQuery强大的选择器,是学习jQuery必须牢固掌握的,关于jQuery选择器,将单独撰文介绍~

严格来说jQuery只是一个封装了一些函数的JS类库,如果你熟悉javascript,那么掌握jQuery应该来说是没有任何难度的,所以jQuery很多精髓的东西可能还是其一些功能强大 的函数,函数的具体使用介绍可参考jQuery的API。同时互联网上也有很多jQuery的学习资料,稍花时间便可掌握。

附:一些jQuery学习资源

不能失去激情

2008-03-15 11:42:03

昨晚上3点钟才睡觉~···汗,可能是几个月来睡得最晚的一次了~···今早8:30起的床,其实8点就醒了,然后躺着想问题~想什么记不得了~囧~然后又是折腾到现在~···

折腾什么呢?测试插件~···住的地方网速似乎不是很快,有的插件也不小,同时文件很多~···传起来就有点慢了~···折腾了这么久貌似没有什么成效,装的相关日志那个插件,CSS还有问题,会与WP-Syntax有点冲突,凭己之力是无法搞定了~···

我前两天好像看到有人说WP用的jQuery?我在WP的文件目录中看到既有prototype又有jQuery,但是自带的jQuery貌似有问题无法使用~最后重新下载jQuery覆盖之就OK了~

随机地修改一些wondger.com下的链接,原有的一些图片都太大,会影响“相关日志”列表,写句代码判断下改小一点,并支持在新窗口查看原图~

这个theme是别人的,我小改了一下,但是还是不那么得心应手。有时间好好研究下WP,然后自己写个theme吧~其实~···早就画出来了~··· 嗯,等有空吧~···

貌似我还是很有激情滴~···orz~

omiga横空出世

2008-03-14 15:18:15

改名换姓,重新做人~!

自己也不知道要怎么念“wondger”,所以干脆直接起个响亮的名头——“omiga” ~

这个名字是很久很久以前,高中时同桌一MM起得,哈哈~当时总把名字中的“W”写成“ ω”,于是乎,有了这个名字,我还比较喜欢,至少叫起来比较上口~···YYing~- -!

中文版本:噢咪咖

纯天然绿色无污染logo:Ω

多么完美~···

从PJBlog到wordpress还算比较顺利,新买的空间自己也比较满意,速度还不错~···感谢PJBlog陪我度过的五个月时间~···今天正式拥抱wordpress~···

原来wondger.com的友情链接我会部分转移到该域名下~其实那个米也有3的PR值~···

最后——闭幕词

感谢CCTV,ChinaTV,MV~···感谢TV~···感谢叉叉TV~···还有~···

感谢伟大的PJBlog~···

感谢伟大的WordPress~···

感谢伟大的me~···

最后再感谢爹地,妈咪~···

PJBlog 2 WordPress 进行时~

2008-03-10 22:50:55

准备投奔WP了,其实最开始建立这个blog时就考虑过用WP,但是由于种种原因没有用,投奔WP 是一直的愿望~···

PJblog用了几个月了,其实还算不错,但是我准备换个快点的空间,那么就随便把blog转到WP,PJblog到WP的数据转换 还是比较容易的,wordpress中文论坛也有一个专门讨论各种blog程序到wp的转换方法:http://wordpress.org.cn/thread-7278-1-1.html

我用的http://old.marmotd.com/2007/10/asp-to-wordpress-tool.html,转换非常完美。

能将数据完好转换过去工作就完成了一半,剩下的一半就是买空间了。最近事情也比较多,上次在QQ签名上说要买PHP空间,结果一大推人找我卖~··· ,但是都不太满意~····继续找,有人给我介绍dreamhost,很好很强大~···但是不知道操作起来是否方便~考察中~“`哪位同学有好的建议,也欢迎留言~···

还有一个十分棘手的问题是,我的网上银行密码给忘记了~···恩~···周末去找回来~···

line-height and relative

2008-03-06 16:25:21

且先在FF和IE中查看页面显示差异~···Demo

很多时候需要在一个容器的右边添加一个“more”,我不喜欢浮动,惯用的做法是使用绝对定位。那么为其父层设置position:relative,同时为了保证文本垂直居中对齐,并为之添加line-height属性。有时候line-height是可以当height用的,因为line-height也可以撑开高度。当时这种做法会在IE中产生问题~···Y?不知道~···解决办法依然是触发对象的layout属性~···

IE8 is coming~

2008-03-06 12:04:37

IE8的消息也炒了很长一段时间了,M$终于放出了β版。速度相当快~···我还以为要年底~···

新特性:

  1. 支持微格式
  2. 完美支持CSS2.1,部分支持CSS3
  3. 可通过来选择需要的渲染引擎
  4. WebSlices(网站订阅)
  5. Activities(活动内容服务)
  6. ~……

可到此处下载安装http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm

PS:我没有装呃~据说对CSS2.1支持完美,但是对JS标准支持还不是那么完美~···我要等正式版~···唉,IE6都还没甩掉,以后又多了个IE8~···

HTML4默认样式

2008-03-05 14:18:58
html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,
h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre{display:block;}
li{display:list-item;}
head{display:none;}
table{display:table;}
tr{display:table-row;}
thead{display:table-header-group;}
tbody{display:table-row-group;}
tfoot{display:table-footer-group;}
col{display:table-column;}
colgroup{display:table-column-group;}
td,th{display:table-cell;}
caption{display:table-caption;}
th{font-weight:bolder; text-align:center;}
caption{text-align:center;}
body{margin:8px; line-height:1.12;}
h1{font-size:2em; margin:.67em 0;}
h2{font-size:1.5em; margin:.75em 0;}
h3{font-size:1.17em; margin:.83em 0;}
h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{margin:1.12em 0;}
h5{font-size:.83em; margin:1.5em 0;}
h6{font-size:.75em; margin:1.67em 0;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:bolder;}
blockquote{margin-left:40px; margin-right:40px;}
i,cite,em,var,address{font-style:italic;}
pre,tt,code,kbd,samp{font-family:monospace;}
pre{white-space:pre;}
button,textarea,input,object,select{display:inline-block;}
big{font-size:1.17em;}
small,sub,sup{font-size:.83em;}
sub{vertical-align:sub;}
sup{vertical-align:super;}
table{border-spacing:2px;}
thead,tbody,tfoot{vertical-align:middle;}
td,th{vertical-align:inherit;}
s,strike,del{text-decoration:line-through;}
hr{border:1px inset;}
ol,ul,dir,menu,dd{margin-left:40px;}
ol{list-style-type:decimal;}
ol ul,ul ol,ul ul,ol ol{margin-top:0; margin-bottom:0;}
u,ins{text-decoration:underline;}
br:before{content:"\A";}
:before,:after{white-space:pre-line;}
center{text-align:center;}
abbr,acronym{font-variant:small-caps; letter-spacing:0.1em;}
:link,:visited{ text-decoration:underline;}
:focus{outline: thin dotted invert;}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]{direction:ltr; unicode-bidi:bidi-override;}
BDO[DIR="rtl"]{direction:rtl; unicode-bidi:bidi-override;}
*[DIR="ltr"]{direction:ltr; unicode-bidi:embed;}
*[DIR="rtl"]{direction:rtl; unicode-bidi:embed;}
@media print{
h1{ page-break-before: always;}
h1,h2,h3,h4,h5,h6{page-break-after:avoid;}
  ul,ol,dl{page-break-before:avoid;}
}

大家很快就可以一起high了

2008-03-04 13:53:02

很久没有更新这个分类了,好像确实也是没有什么值得要记一笔的新闻。微软要买yahoo?但是也没买~··.也不能发CGX同学的照片,那是娱乐圈的事~···

这两天似乎大家都在谈friendfeed,的确是个好东西~···可以整合进很多东西~···但是我这个blog却是share不了的~···应该跟PJblog的rss输出方式有关~

除此之外呢,好像baidu的IM——Hi这几天确实很high~···李彦宏更在其baidu空间上放出了《大家很快就可以一起high了》的文章。关于Hi,似乎现在整个网上都没有太多介绍~···虽然也有人放出了beta版安装,但据说安装上是无法使用的~···前不久不说还有mail?等~

总算是活着回来了

2008-03-04 09:14:24

昨天中午才到~···站了一晚上火车,根本没合眼~···下午又赶回公司~···唉~···

在长沙待了四天,说是回去选题毕业设计,其实主要是玩,主要是吃饭,天天都有人请吃饭,别人请,自己请~···

毕业设计没特别合适的题目,自己又懒得选,就选了个现成的《个人数字图书馆设计与实现》,老师定这个题目是C/S,如果改成B/S,我准备翻版下del.icio.us~“`三个月时间,五月底返回学校答辩~···

费劲周折还是把1.5G歌拷过来了,自己电脑几个月不用又出问题了,也懒得管,直接把硬盘拆下来换到CCZ的机子上~···

回去见了一些人,还有一些人本来约好,但是由于时间仓促没见着,实在抱歉,希望下次有足够的时间咯~···