初学 jQuery ,整理的一些笔记(一)

刚开始学 jQuery ,做的一些笔记,理解有问题的地方希望大家能够指出.

一. jQuery 的核心对象
　　学习了这几天的jQuery,个人感觉首先搞清楚 jQuery 的核心对象对自己的学习有很大的帮助.

　　1.jQuery(selector,[context])　　return jQuery

　　表示selector从context中匹配对象,以jQuery包装集的形式返回.其中的[context]是可选的,可以是Dom元素的集合,也可以是jQuery包装集,如果不传入则匹配整个文档对象.

　　2.jQuery(html,ownerDocument)　　return jQuery

　　表示根据html的内容创建Dom元素.

　　3.jQuery(elements)　　return jQuery

　　表示将一个或多个Dom元素封装成jQuery包装集.

　　4.jQuery(callback)　　return jQuery

　　这是$(document).ready()的简写.

二.jQuery 的选择器

　　一般来说jQuery 的选择器按功能分为两类"选择器"和"过滤器".按我自己的理解过滤器一般是以":"开头的(除了表单选择器).

　　对于选择器又分为 基础选择器,层次选择器 和 表单选择器.

　　首先是选择器.这些选择器我就不一一列出了,我选几个在我学习中出现问题的几个来和大家交流一下.

　　参见:http://api.jquery.com/category/selectors/.

　　首先是基础选择器中的 多项选择器(selector1,selector2,...,selectorN).它的作用是同时匹配所有符合selector1,selector2,...,selectorN的所有Dom对象.当我第一次使用整个选择器时我使用的是以下代码:

$("#id1","#id2").css("color","red");

可是我发现并没有出现我想要的效果,即将id为id1和id2的元素中的文本颜色设置成红色.很快我发现这样写错误的原因就是等于使用了 jQuery(selector,[context])对象,即从id=id2中匹配符合id=id1的元素.所以要实现预想的功能的话应该写成下面这样:

$("#id1,#id2").css("color","red");

虽然这是一个小错误但是还是希望一些和我一样的新手朋友们注意到这点,少走弯路.

　　
　　还有就是关于ancestor descendant,和parent>child这两个选择器的区别.比如说我们的html文档有如下结构:

<div>
<p>test1</p>
<p><span>test2</span></p>
</div>

　　当我们想使用parent>child从<div>中选取<span>时这是错误的,因为<span>并非<div>的直接子节点.正确的方法是使用ancestor descendant,即$("div span"),而不是$("div>span").

　　接下来是过滤器,过滤器又分为基本过滤器,属性过滤器,内容过滤器,可见性过滤器,子元素过滤器和表单过滤器.

　　在学习这部分的时候我认为应该注意的几个地方首先是:hidden过滤器,Dom元素何时被判定为hidden?

1. 当css中display为none时.
2. from元素的type="hidden"时.
3. 元素的height和width被设为0时.
4. 当祖先元素满足以上3种条件时.

　　然后是子元素过滤器 :nth-child(index/even/odd/equation),其他几个参数都很简单,主要是当使用equation时.我们最主要的就是要搞清楚equation的含义一般使用它的例子:$nth-child(3n+1),:$nth-child(3n).这里3n就是将所有的匹配元素以3个为一段,然后选择最后一个元素,那么3n+1也就是每段中的第一个元素.当然我们也可以使用
3n-2来选中第一个元素.当这里设置为n的时候就表示选中所有元素.

 

　　希望整理的这些笔记对大家有一定的帮助,同时由于刚开始学jQuery,不足的地方希望大家指出:D!

转载于:https://www.cnblogs.com/sylier/archive/2010/09/29/jQuery_sylier.html