JQuery selectors 及 学习jQuery必须知道常用的几种方法 + Eclipse开发JQuery环境设置(Spket)
JQuery之一: JQuery selectors
$() function
$(selector) 等价于 jquery(selector)，用来选取一组DOM Elements。返回的是一组预定义的Javascript 对象，这些对象不仅封装了DOM element而且提供了许多有用的方法，以作用于这些elements。
使用CSS Selectors
1. 可以使用的selectors如下表所示:
Selector Description
* 所有元素
E 所有标签名(tag name)称为E的元素
E F 所有标签名为F，且为标签E的子元素的元素(含孙子元素...) E>F 所有标签名为F，且为标签E直接子元素的元素
E+F 所有标签名为F，且相邻兄弟元素标签名为E的元素 E~F 所有标签名为F，且兄弟元素标签名为E的元素 E:has(F) 所有标签名为E， 且包含至少一个标签名为F元素的元素 E.C 所有标签名为E， 且包含类名称为C的元素 E#I 所有标签名为E， 且id为I的元素
E[A] 所有标签名为E，且拥有属性名为A的元素，属性值任意 E[A=V] 所有标签名为E，且拥有属性名为A，属性值为V的元素 E[A^=V] 所有标签名为E， 且属性名为A，属性值以V开始的元素 E[A$=V] 所有标签名为E，且属性名为A，属性值以V结尾的元素 E[A*=V] 所有标签名为E，且属性名为A，属性值包含V的元素 2. 使用position过滤器
可以使用的position过滤器包括:
Selector Description
:first 页面中第一个得到满足的元素. 如:li a:first 返回第一个 li 项下的链接
:last 页面中最后一个得到满足的元素。如:li a:last 返回最后一个 li 项下的链接
:first-child 第一个子元素 如:li:first-child 返回 所有作为子元素的li 项中的第一li 元素
:last-child 最后一个子元素. 如: li:last-child 返回 作为子元素的li 项中的最后一个 li 元素
:only-child 返回所有没有兄弟元素的元素(这个元素只作为其它元素的子元素存在)
:nth-child(n) 返回第n个子元素. 如:li:nth-child(2) 返回 所有作为子元素的 li 项的第二个.
:nth-child(even|odd) 返回偶数(Even) 或奇数(Odd) 子元素. 如:li:nth-child(even) 返回所有作为子元素的li项的偶数元素.
:nth-child(Xn+Y) 返回Xn+Y计算结果的第n个子元素.如果Y为0，则被忽略. 如:li:nth-child(3n) 返回所有作为子元素的li项的每第3n个元素. :even and :odd 返回偶数(Even)或奇数(odd)个子元素。不同于nth-child系列，这个匹配所有页面中的元素(而不仅仅是作为子元素的元素). :eq(n) 返回序号等于n的元素(从0基数哦) :gt(n) 返回序号大于n的元素，不包括第n个元素。 :lt(n) 返回序号小于n的元素，不包括第n个元素。 在应用上述表时注意:所有nth-child中都是从1开始计数的，如nth-child(3n)返回第3, 6, 9个元素。其他的还是从0计数。
3. 使用JQuery自定义的过滤器
Selector Description
:animated 选择那些目前在动画效果控件中的元素 :button 选择所有button元素(input[type=submit], input[type=reset],
input[type=button], or button).
:checkbox 选择checkbox元素
(input[type=checkbox]).
:checked 选择那些被checked的checkbox或radio button(supported by CSS).
:contains(foo) 选择包含文字foo的元素(注意区分文字的大小写哦).
:disabled 选择form元素中被disabled的元素
(supported by CSS).
:enabled 选择form元素中被enabled的元素
(supported by CSS).
:file 选择所有file元素(input[type=file]). :header 选择所有header元素; 例如:从
到
的元素.
:hidden 选择隐藏的元素.如:
$("li:hidden").css("visibility", "visible");将隐藏的li显示出来
:image 选择所有image元素 (input[type=image]). :input 选择所有form元素(input, select, textarea, button).
:not(filter) 使指定filter取反.如:
$("li:not(hidden)").css("visibility", "hidden");将所有没有隐藏的 li 隐藏掉 :parent 选择所有包含子元素的元素(including text), 空元素不算(如包含空格的).
:pass
word
word文档格式规范word作业纸小票打印word模板word简历模板免费word简历
选择password元素
(input[type=password]).
:radio 选择radio元素 (input[type=radio]). :reset 选择reset buttons (input[type=reset] or
button[type=reset]).
注意:
1) 过滤器可以连接起来使用，如:
:checkbox:checked:enabled
选择那些处于enabled状态并被选中的checkbox。
2) :not(filter) 只能用于过滤选择器(filter selectors)而不能用于查找选择器(find selectors)。如:
div p:not(:hidden)是合法的，
而 div :not(p:hidden) 就不行。
简单区分的方法是，:not只能用在以:(冒号) ,[(中括号)开始的filter selectors，其他的都不行。
必须知道常用的几种方法 学习jQuery
jQuery事件处理
ready(fn)
代码:
Js代码
1. $(document).ready(function(){
2. // Your code here...
3. });
作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
bind(type,[data],fn)
代码:
Js代码
1. $("p").bind("click", function(){
2. alert( $(this).text() );
3. });
作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。
toggle(fn,fn)
代码:
Js代码
1. $("td").toggle(
2. function () {
3. $(this).addClass("selected");
4. },
5. function () {
6. $(this).removeClass("selected");
7. }
8. );
作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像
click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)
jQuery外观效果
addClass(class)和removeClass(class)
代码:
Js代码
1. $(".stripe tr").mouseover(function(){
2. $(this).addClass("over");}).mouseout(function(){
3. $(this).removeClass("over");})
4. });
也可以写成:
Js代码
1. $(".stripe tr").mouseover(function() { $(this).addClass("over")
});
2. $(".stripe tr").mouseout(function() { $(this).removeClass("over
") });
作用:为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中
实现鼠标移动双色表格的代码
css(name,value)
代码:
$("p").css("color","red");
作用:很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和
上面的addClass(class)有点类似。
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown() 代码:
$("#btnShow").bind("click",function(event){ $("#divMsg").show() }); $("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });
作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:
show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可
选地触发一个回调函数。
Eclipse开发JQuery环境设置(Spket)
首先需要安装Spket。
之后进行JQuery的配置:
1. 从JQuery.com下载开发用的Javascript文件，如下图，一定要选择红框里面的选项。
2. 配置Eclipse里面的Spket Javascript Profiles，如下图:
1) 从window->Preferences...进去
2) 如上图选择Spket -> Javascript Profiles 3) 点击New...输入JQuery建立新的profile
4) 点击Add Library，并选择JQuery，建立新的Library 5) 点击Add File, 选择刚下载的JQuery文件
6) 如果想让JQuery成为缺省的Javascript Profile，则点击Default。如果想跟我一样想让ExtJs成为缺省，而在特定项目中使用JQuery，则进行下面的步骤
3. Project特定Javascript 选项。
从上图右上角选择 “Configure Project Specific Settings...”进行设置，在弹出对话框中选择项目名称，然后会弹出下面对话框:
点选JQuery并使其成为Default即可。这时只有在这个项目中才使用JQuery为缺省Profile。
然后新建Js文件，就可以使用JQuery的代码提示功能了:
浙公网安备 33021202002483