点击事件和选择器

Posted 2023-04-17

参考技术A jQuery中的选择器大致分为：基本选择器，层次选择器，过滤选择器，表单选择器。

1. 基本选择器。

#id：id选择器。

.class：类选择器.

标签选择器：根据指定的元素名匹配元素。

群主选择器:将每一个匹配的元素合并并返回,以分号隔开。

*：通配符选择器，匹配所有的元素。

2. 层次选择器

空格：选取指定元素的后代元素。

>：选取指定下的所有子元素。

+：选取紧接着的兄弟元素。

~：选取元素后的所有兄弟元素。

3. 过滤选择器

1 基本过滤选择器

:first()：选取第一个元素

:last()：选取最后一个元素

:not(selector)：除去所有给定选择器所匹配的元素

:even()：选取索引为偶数的的所有元素（索引从0 开始）

:odd：选取索引为奇数的的所有元素（索引从0 开始）

:eq(index)：选取索引=index的元素（索引从0 开始）

:gt(index)：选取索引>index的元素（索引从0 开始）

:lt(index)：选取索引<index的元素（索引从0 开始）

:header()：选取所有标题

:animated()：选取当前正在执行动画的所有元素

2 内容过滤选择器

:contains()(text)：选取含有文本内容为"text"的元素。

:empty()：选取不包含子元素或文本的空元素

:has()(selectcr)：选取含有选择器所匹配的元素的元素。

:parent()：选取含有子元素或包含文本的元素。

3 可见性选择器

:hidden()：选取所有不可见元素。

:visible()：选取所有可见元素

4 属性选择器

[attribut]：选取拥有此属性的元素。

[attribut =value]：选取属性值为value的元素。

[attribut!=value]：选取属性值不等于value的元素。

[attribut ^=value]：选取属性值以value开始的元素。

[attribut $=value]：选取属性值以value结束的元素。

[attribut *=value]：选取属性值含有value的元素。

[selector1][selector2][selector3]：用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围。

5 子元素选择器

:nth(安丝)-child(index/even/odd/epuation)：选取每个父元素下的第index个子元素或奇偶元素(index从一算起)。

:first-child：选取每个父元素的第一个子元素

:last-child：选取每个父元素的最后一个子元素

:only-child：如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其它元素，则不会被匹配。

4. 表单对象属性选择器

:enabled()：选取所有可用元素。

:disabled()：选取所有不可用的元素

:checked()：选取所有被选中的元素(单选框，复选框)。

:selected()：选取所有被选中的选项元素(下拉框)。

CSS伪类选择器active模拟JavaScript点击事件

一、说明

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

IE7及更早浏览器只支持a元素的:active，从IE8开始支持其它元素的:active。

另：如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现。超链接的4种状态，需要有特定的书写顺序才能生效。注意，a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后。可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te,即用喜欢(love)和讨厌(hate)两个词来概括。Link

二、示例

<style>
    .active-example{
        width:100px;
        height: 100px;
        transition: all 1s ease-in-out;
        background: red;
    }
    .active-example:active{
        border-radius:50%;
        background: blue;
    }
</style>
<div class="active-example"></div>

CSS伪类选择器active模拟JavaScript点击事件

本文出自 “不知不问” 博客，请务必保留此出处http://mazey.blog.51cto.com/12997993/1948121