关于层级选择器。
$("parent > child")
选择所有指定“parent”元素中指定的“child”的直接子项元素。
parent :任何有效的选择器。
child: 用来筛选子元素的选择器

$(function(){
$("ul.myul > li").css("border","2px solid red");
//将ul带有.myul选择下面的li 标签添加边框。
});

$("ancestor descendant")
选择给定的祖先元素的所有后代元素
ancestor:任何有效的选择器;
descendant: 一个用来筛选子元素的选择器;

$(function(){
$("form input").css("border","2px solid green")
//将form 内所有的input 标签加上边框
});

$("prev+next")
选择所有紧接着“prev"在元素后面的“next”元素。
prev 任何有效的选择器
next 用于筛选跟在“prev”后面的选择器

$(function(){
$("label + input").css("border","2px solid red")
//将所有紧跟在 label 后面的input 标签加上边框
});

$("prev ~ siblings")
选择任何一个有效选择器以后面的所有兄弟元素。它们具有相同的父元素。
prev 任何有效的选择器
siblings 一个选择器用来过滤第一个选择器之后的兄弟选择器。

$(function(){
$("#prev ~ div").css("border","2px solid red");
// 将prev 选择器 后面的兄弟div 标签加上边框
})

jquery 层级选择器的更多相关文章

  1. jQuery 层级选择器 + keyCode

    层次选择器 如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择. 层次选择器规则如下: 层次选择器 选 择 器 描 述 返 ...

  2. jQuery层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  4. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  5. 什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器

    jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   jQuery是继prototype ...

  6. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

  7. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  8. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  9. jQuery层级元素选择器

    第一个: 1:空格表示所有 2:> 第一层 3:+/- 同级 +:之后的第一个元素 -:之后所有同级 d 代码示例: <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. 上传文件插件-bootstrap-fileinput

    1. js文件: <link href="/bootstrap/css/fileinput.css" media="all" rel="styl ...

  2. js使用占位符替换字符串

    js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...

  3. mvc中RedirectToAction()如何传参?

    今天在做一个功能的时,使用RedirectToAction()需要从这里传几个参数,从网上查了一下,这样解决.真好. Return RedirectToAction("Index" ...

  4. npm安装gulp-sass失败处理办法

    最近在做一个基于gulp的前端自动化的项目,在github上拉取代码后,按照正常的流程,首先我们要 npm  install ,在安装的过程中,一直提示我gulp-sass 安装失败,我用尽了好多办法 ...

  5. 【学习笔记】实用类String的基本应用即常用方法

    一.String类概述 在Java中,字符串被作为String类型的对象来处理. String类位于java.lang包中,默认情况下会自动导入到所有的程序中. 创建String对象的方法如下: St ...

  6. 数据库中char、varchar、varchar2、nvarchar之间的关系

    符串“abc",对于CHAR (20),表示你存储的字符将占20个字节(包括17个空字符),而同样的VARCHAR2 (20)则只占用3个字节的长度,20只是最大值,当你存储的字符小于20时 ...

  7. scss-@media

    首先回顾下css3中的@media 定义和使用: 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式 ...

  8. 在asp.net中如何使用Session

    2.那么在asp.net中到底该怎么使用Session呢? Session对象用于存储从一个用户开始访问某个特定的aspx的页面起,到用户离开为止,特定的用户会话所需要的信息.用户在应用程序的页面切换 ...

  9. javascript实现数据结构:稀疏矩阵的十字链表存储表示

    当矩阵的非零个数和位置在操作过程中变化大时,就不宜采用顺序存储结构来表示三元组的线性表.例如,在作“将矩阵B加到矩阵A上”的操作时,由于非零元的插入或删除将会引起A.data中元素的移动.为此,对这种 ...

  10. Web开发——前后台异步调用

    做web开发,最头疼的.最核心的部分或许就应该是前后台交互了,之前一直没弄明白,每次都不知道该如何去做.最近由于开发需要,加上有些朋友问起这个问题,不得不再次摸索前后台交互的方法.功夫不负有心人,总算 ...