关于层级选择器。
$("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. C# ADO.NET面向对象想法

    我认为的面向对象就是把各种问题拆分开来 逐一解决,  我想的是先是数据库,到底有什么, 然后新建一个类,类里面先是private的私有的,但是可以有无数个可以连接private的pubilc的属性 可 ...

  2. vue的一些特殊特性

    一.使用$ref特性获取DOM元素 代码示例如下所示: <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 前端路由vue-router介绍

    一.前端路由vue-router介绍 Vue-Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模 ...

  4. scss-#{}插值

    一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用. 例如:scss代码 $borderDirection: top !d ...

  5. Intellij idea配置scala开发环境

    1.Intellij idea配置scala开发环境 解决Plugin Scala was not installed: No route to host Plugin Scala was not i ...

  6. RePlugin 插件化-内置加载

    PS:插件化是什么这里就不再说了,从这里开始两种加载方式中的一种(内置加载),该框架是奇虎360开发的,官方给出优点 RePlugin是一套完整的.稳定的.适合全面使用的,占坑类插件化方案.我们&qu ...

  7. 多线程(三)~多线程中数据的可见性-volatile关键字

    我们先来看一段代码: ①.线程类,用全局布尔值控制线程是否结束,每隔1s打印一次当前线程的信息 package com.multiThread.thread; publicclassPrintStri ...

  8. March 2 2017 Week 9 Thursday

    The first duty of love is to listen. 爱的首要责任是倾听. Yesterday, I read an article that says a successful ...

  9. Excel-怎样实现行列转置

    有时候,我们为了某些需要,必须把工作表的行列进行转置的方式显示.重新输入很浪费时间,怎样简单的实现转置呢,强大的excel2007提供了此项功能,具体怎么做,下面看我来演示一下. 工具/原料   装有 ...

  10. Locust性能测试3 no-web运行

    Locust也支持no-web的方式运行,直接通过控制台设置并发用户数.每秒启动用户数.持续压测时间. locust -f 脚本路径 -c 用户数 -r 每秒启动用户数 --run-time 持续压测 ...