jQuery的选择器(一)

jQuery选择器完全继承CSS风格,jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery的选择器包括基本选择器层次选择器、过滤选择器、表单选择器。下面我们就来详细讲解这几种选择器。

一、基本选择器

#id:根据给定的id匹配一个元素

.class:根据给定的类名匹配元素

element:根据给定的元素名匹配一个元素

*:匹配所有元素

selector1,selector2,...selectorN:将每一个选择器匹配到的元素合并在一起

这里我们先来写一个简单的布局

紧接着通过基本选择器来选择相应的HTML元素,改变元素的样式。

二、层次选择器

(ancestor  descendant):选取ancestor 元素里的所有descendant(后代)元素

(parent > child):选择parent元素下的子元素child

(prev + next):选择紧接在prev元素后的next元素

(prev  ~  siblings):选取prev元素之后的所有siblings兄弟元素。

先来写一个简单的布局

下面我们通过层次选择器来改变HTML元素的样式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,668评论 0 2
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 3,430评论 0 4
  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 2,905评论 0 0
  • 书 掐指一算,我居然上学上了18年,如今已经开始第19年,这真的...
    土豆粉大鸡腿阅读 2,454评论 0 0
  • 致敬老韩: 听完老韩的所有节目,让我有种邻居大哥的...
    曾思凯阅读 1,287评论 0 0