JQuery学习10月21号整理

无论如何！我一定会坚持每天都去做一件事情。目前对于我来说就是去学习完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框架编程！将来的全部项目都用它!

阅读(872) | 评论(1) | 转发(0) |

0

上一篇：UC代码研究篇一

下一篇：ZendPlatform Session 跨服务器解决方案白皮书: