EasyDemo*jQuery简介&小案例demo(on github)

源码demo:https://github.com/Way123Ne/htmAndcssAndJs/tree/master/jQueryDemo1/WebRoot

一、jQuery选择器

1. jQuery选择器

1.1什么是jQuery选择器

1.1.1什么是jQuery选择器

*jQuery选择器类似于CSS选择(定位元素，施加样式),能够实现定位元素，施加行为

*使用jQuery选择器能够将内容与行为分离

1.1.2选择器的种类

*jQuery选择器包含如下种类:

 -基本选择器

 -层次选择器

 -过滤选择器

 -表单选择器

1.2基本选择器

1.1.1#id

*特点：最快，尽量使用id选择器

1. 1. 1. class

*特点:根据class属性定位元素

1.1.3element

*标记选择器或元素选择器，依据HTML标记来区分

1.1.4selector1,selector2,…selectorN

*合并选择器，即所有选择器的合集

1.1.5基本选择器

*所有页面元素，很少使用

1.3 层次选择器

1.1.1select1 空格 select2

*根据select1找到节点后，再去寻找子节点中符合selector2的节点(重要)

 (重点在select2；下图id=d2&class=s1的两个div发生改变)

1.1.2select1 > select2

*只查找直接子节点，不查找间接子节点

1.1.3select1+select2

* “+”表示下一个兄弟节点

1.1.4select1~select2

* ”~”代表下面的所有兄弟

1.4过滤选择器

1.1.1基本过滤选择器

*过滤选择器以”:”或”[ ]”开始

1.1.2内容过滤选择器

*内容过滤选择器包含

-:contains(text)匹配包含给定文本的元素

-:empty匹配所有不包含子元素或文本的空元素

-has(selector)匹配含有选择器所匹配的元素

-:parent匹配含有子元素或文本的元素

1.1.3可见性过滤选择器

*可见性过滤选择器包含

-:hidden 匹配所有不可见元素，或type为hidden的元素

-:visible 匹配所有的可见元素

1.1.4属性过滤选择器

*属性过滤选择器包含如下

-[attribute] 匹配具有attribute属性的元素

-[ attribute=value] 匹配属性等于value的元素

-[ attribute!=value]匹配属性不等于value的元素

1.1.5子元素过滤选择器

*子元素过滤选择器包括

-:nth-chid(index/even/odd)将为每一个父元素匹配子元素，index是从1开始的整数，表示对应位置的子元素

-:eq(index)匹配一个给定索引值的元素，index是从0开始的整数

1.1.6表单对象属性过滤选择器

*包括

-:enabled

-:disabled

-:checked

-:selected

1.5表单选择器

*包括