全部分类
移动开发与应用
WEB前端
架构与运维
程序设计
数据库
操作系统
热点技术
综合
JQuery学习10月21号整理
927阅读 1评论
2009-10-22
hkebao
分类：
系统运维
无论如何！我一定会坚持每天都去做一件事情。目前对于我来说就是去学习完JQuery框架使用！
无论如何我一定要坚持每天都去学习它！
想要结构与行为分离当然不能使用
之类的东西了.
心得：HTML的标签是结构。其有属性与事件及行为。我们要努力将其行为与结构进行了分离。即不要出现
这样的东西出来！
示例：
$(function(){
var $p=$("p"); //相当于JS里面的document.getElement 返回的是一个数组出来
var p=$p[0]; //得到数组之后通过取数组元素的方法实现提取其当前数组的元素值
alert(p.innerHTML); //得到之后就可以操作具体的某个元素了
});
$p 是JQuery里面的对象的概念！
2.JQuery里面的元素选择器。想一下CSS里面的
标签选择器：p{CSS rules} 定义出来一个HTML标签的样式出来。
id选择器：#ID{CSS rules}
类选择器：.Class{CSS rules}
群组选择器：h1,h2,h3,h4,h5,h6{CSS rules}
后代选择器：div p{CSS rules}
通配选择器：*{CSS rules}
伪类选择器：a:link,a:visited{CSS rules}
JQuery里面的选择器：
Jquery中基本选择器包括*,class,element,id及这种群组方式selector1,selector2,…
心得：第一步得要找到这个元素出来才能操作这个元素的！
想获得某个元素的句柄即通过ID获取的方式了。在JQ中是这样处理：
var $div = $("#test"); 不要少了#号呀！
返回的是一个数组的！
示例二：动态给HTML标签添加CSS样式
HTML元素如下：
a
b
c
d
动态赋CSS样式：
$(function(){
$("li").addClass("normalStyle");
});
一个方法：addClass即将CLASS的样式赋值过去！
2、层次选择器
不用说，层次选择器的思想来自CSS；实际上稍微拓展了
$("div span")//选择
里所有
元素
$("div>span")//选择
元素下元素名为
的元素
$(’prev+next’)//选择紧接在prev元素后的next元素
$(’prev~siblings‘)//选择prev元素之后的所有sibling元素
这个跟CSS的思想好像的呀！
$("ul li").css("color","#f00"); 表示的是ul 下面的li有css样式！
3.Jquery过滤选择器
想一下htmlparser也有一种叫做级联过滤的东西。就表示有多个过滤操作在一起了！
:first//（选取第一个元素）
:last//（选取最后一个元素）
:even//（选取索引是偶数的所有元素）
:odd//（选取索引是奇数的所有元素）
:eq(index)//（选取索引等于index的元素）
:gt(index)//（选取索引大于index的元素）
:lt(index)//（选取索引小于index的元素）
:header//（选取所有的h1,h2,h3等标题元素）
:animated//（选取当前正在执行动画的所有元素）
2、内容过滤选择器
:contains(text)//选取含有文本内容为text的元素
:empty//选取不包含子元素或者文本的空元素
:has(selector)//选取含有选择器所有匹配的元素的元素
:parent//选取含有子元素或者文本的元素
（其实说白了一点通过这些东西主要是用来筛选出来想要的对象了。不论是过滤器还是其他的什么东西！）
4、属性选择过滤器
在ie6中对css的属性过滤选择器不起作用，而Jquery的属性选择过滤器经测试后在ie6中有效。（6.0之前不起作用）想要了解^ $ *可参考相关正则表达式资料。
[attribute]//选取拥有此属性的元素
[attribute=value]//选取属性的值为value的元素
[attribute!=value]//选取属性的值不为value的元素
[attribute^=value]//选取属性的值以value开始的元素
[attribute$=value]//选取属性的值以value结束的元素
[attribute*=value]//选取属性的含有value的元素
[selector1][selector2][selectorN]//属性选择器合并成一个复合属性选择器，注意此处为属性选择器的并集，如$("div[id][class$='Bar']"
好像HTMLPARSER里面的过滤器操作哦！
5、子元素选择过滤器
同上面的属性选择器一样，原先的css规则对ie6不起作用，经过jquery可以选定该类元素。
:nth-child(index/even/odd/equation)//选取第index个子元素或者奇偶元素
:first-child//选取每个父元素的第一个元素（返回整个文档中每个元素的第一个子元素），如$("ul li:first-child");选择每个
中第1个元素
:last-child//选取每个父元素的最后一个元素
:only-child//若某子元素是其父元素中惟一的子元素，将会被匹配
6、表单对象属性过滤选择器
:enabled//选择所有可用元素，例$("#form1:enabled")
:disabled//选取所有不可用元素
:checked//选取所有被选中元素（checkbox,radio）
:selected//选取所有被选中元素（下拉列表）
7、表单选择器
不再赘述
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
示例：
$("table tr:even").addClass("tdOdd") 使用了过滤 器而且是级联过滤器的。
即第一步是：table 第二个是tr:even 使用了 :even//（选取索引是偶数的所有元素）
表示的是索引为偶数的全部元素！
$("th:first") 表示的是对th而言的第一个过滤器。即first了！
得指定好前面的范围的！
2009/10/21 晚0：21
明天继续！我一定要坚持做一件事情！当前是熟练掌握JQuery框架编程！将来的全部项目都用它!
上一篇：
UC代码研究篇一
下一篇：
ZendPlatform Session 跨服务器解决方案白皮书:
文章评论
2010-07-02
chinaunix网友
努力把JAVA学精了。将来能够成为一名优秀的JAVA架构师的加油
