《深入PHP与jQuery开发》读书笔记——Chapter1

由于去实习过后，发现真正的后台也要懂前端啊，感觉javascript不懂，但是之前用过jQuery感觉不错，很方便，省去了一些内部函数的实现。

看了这一本《深入PHP与jQuery开发》，感觉深入浅出，值得推荐。

 

Chapter1.jQuery简介

1.jQuery工作方式本质

先创建一个jQuery对象实例，然后对传递给该实例的参数表达式求值，最后根据这个值作出相应的响应或者修改自身。

2.利用CSS语法选择dom元素(基本选择器)

我们知道，jQuery说白了就是对网页上的内容进行选择器的新建与操作。

• 通过标签类型选择元素

直接选用标签的元素来作为选择器：

$("p")

• 通过class选择元素

通用格式：.class

$(".foo")

• 通过ID选择元素

通用格式：#id

$("#bar")

• 使用组合选择题

只要元素匹配组合选择器中任意一个选择器，都会被选中并出现在返回结果中：

$("p.foo,#bar")

 

3.层次选择器

• 选择后代元素

祖先元素  后代元素

例:选择body下的span元素

>>>$("body span")

• 选择子元素

父元素>子元素(只匹配直接子元素)

>>>$("body>span")
>>>[]

• 选择下一个兄弟(next)元素

起始元素标识+下一个兄弟元素标识

注意是在DOM中选择一个元素之后紧跟的下一个兄弟元素！！

 

>>>$(".foo+p");

 

• 选择兄弟元素

兄弟元素(sibling elements)是指被同一个元素包裹的同一级的全部元素。选择兄弟元素非常类似于选择下一个元素，只是它返回起始元素之后匹配的全部兄弟元素，而不是只返回下一个。

起始元素标识~匹配兄弟元素

>>>$(".foo~p");

 

4.基本过滤器

• 选择第一个或最后一个元素

只要在任意选择器之后追加:first或:last即可：

>>>$("p:first");
>>>$("p:last");

• 选择不匹配某个选择器的元素

使用:not()过滤器。

>>>$("p:not(.foo)");

• 选择索引为奇数或偶数的元素

:even 和 :odd

>>>$("p:odd");
>>>$("p:even");

• 选择特定索引的元素

:eq()过滤器。

>>>$("p:eq(3)");

 

5.内容过滤器

•  匹配包含特定文本的元素

要匹配包含特定文本的元素，使用:contains()过滤器。（仅匹配标签内的文本）

>>>$("p:contains(Another)");

• 匹配包含特定元素的元素

:has()过滤器用来匹配包含特定元素的元素。

>>>$("p:has(span)");

• 选择空元素

:empty()选择出那些不包含任何文本也不包含任何其他元素的空元素。

>>>$(":empty");

• 选择父元素

与:empty相反，:parent只匹配那些拥有子元素的元素，不管它包含的是其他元素，还是文本内容，或者兼而有之。

>>>$("p:parent");

 

6.可见性过滤器

利用:hidden和:visible,分别用来选择被隐藏的元素和可看到的元素。

>>>$("p:visible");  //可见的
>>>$("p:hidden"); //隐藏的

 

7.属性过滤器

• 根据属性及属性的值选择元素:

[属性名=属性值]

>>>$("[class=foo]");

• 选择没有某个属性的元素或属性值不匹配的元素

[属性名!=属性值]

$("[class!=foo]");

 

8.子元素过滤器

• 匹配奇数索引值/偶数索引值/特定索引值的元素

:nth-child()在匹配元素时提供了4个参数:even,odd,index和equation。

>>>$("p:nth-child(odd)");
>>>$("p:nth-child(even)");

 

• 选择第一个或最后一个子元素

使用:first-child;last-child

>>>$("p span:last-child");

关于选择器:last()和:last-child()的区别：

这两个选择器都是匹配集合中的最后一个元素，差别在于 :last 将匹配所有的集合中的最后一个元素。而 :last-child 将匹配集合中的所有位置为最后一个的子元素。:last 将永远返回一个元素，而 :last-child可能返回一批元素。

 

9.表单过滤器

目前可用的表单选择器（暗含对input框内type的选择）有:button,:checkbox,:file,:image,:input,:password,:radio,:submit,:text.

如：

>>>$("input:radio");

• 匹配可用或禁用的表单元素

>>>$(":enabled");
>>>$(":disabled");

 

• 匹配选中或未选中的表单元素

过滤器:checked和:selected分别用于获取checked为真和selected为真的表单元素。

>>>$(":checked");
>>>$(":selected");

 

就这样吧。

转载于:https://www.cnblogs.com/sysu-blackbear/p/4055553.html