1、基本选择器，主要通过标签名称，样式，id等选择标签，如下代码是简单的使用

（1）根据标签或者样式筛选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="div1">111</div>

<p>ppp</p>

<p>div2的兄弟</p>

<div id="div2">222

    <div class="div3">333

        <div class="div4">444</div>

        <p>world2</p>

    </div>

    <p>world</p>

</div>

<p>div2的兄弟</p>

<p>div2的兄弟</p>

<p>div2的兄弟</p>

<p>div2的兄弟</p>

<p>div2的兄弟</p>

<ul>

    <li>11</li>

    <li>11</li>

    <li>11</li>

    <li>11</li>

</ul>

<script src="jquery-3.1.1.js"></script>

<script>

//    $('p').css('color','red');//选择标签

//    $('#div2').text('666');//选择id

//    $('.div1').css('background','yellow');//根据class选择

//    $('body *' ).text('YYYY')//表示后代选择器，选择body后面的标签，然后将里面的文本改为YYYY

//$('#div2 p').css('color','green')//也是后代选择器id为div下面的所有p标签的文本都被修改了颜色，如果$('#div2> p'),则是下一级的p标签被改，不是下面所有

//$('#div2+p').css('color','green');//下面开始找兄弟标签，只寻找一个

//$('#div2~p').css('color','green');//从下面开始找，找出所有兄弟标签

$('li:first');

//找出所有li标签，选出第一个，even表示偶数；odd表示基数；eg（）括号后面可以选择特定第几个

//gt（），gt是great than的缩写，表示大于，也有lt（）

</script>

</body>

</html>

　　（2）根据内容筛选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>jay</div>

<div>Rouge</div>

<div>Mary</div>

<div>Dark</div>

<input name="abc">

<input name="edf" checked="checked">

<script src="jquery-3.1.1.js"></script>

<script>

    $('input:not(:checked)');//选择有属性checked属性的标签

    $("div:contains('Dark')");//根据这个内容选择出标签

    //$('td:empty')是否为空

    //    $('div:has(p)').addClass('test')//寻找出div标签里面有p标签的div，然后添加一个class为test的属性

    //$('div[id='abc']')查找所有包含id属性为abc的div标签，value也可以不写，直接写成$('[id='abc']')

</script>

</body>

</html>

　　2、筛选器

（1）简单的根据索引筛选

<body>

<input type="checkbox">

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

</ul>

<script src="jquery-3.1.1.js"></script>

<script>

//    $('li:eq(1)').css('color','red');

//    $('li').eq(2).css('fontSize','30');

//obj:选择器，index：索引

    function Func(obj,index) {

        obj.eq(index)

    }

Func($('li'),2)//根据传进的参数，选择标签

</script>

</body>

　　（2）parent，parents，parentsUntil

$('.div7').parent().css('color','red');//找到一个父级标签

$('.div7').parents();//找到.div7的所有祖先标签

$('.div7').parentsUntil('.outer').css('color','red');//寻找父级标签直到样式为outer的父级标签，不包括样式为outer的父级标签

$('.div7').siblings()//找到所有兄弟标签，里面也可以放参数，例如siblings('div1'),找到全局里面所有div兄弟标签

　　

　　其他的next，prve都是差不多的模式

　　

juqery基本选择器和层级选择器的更多相关文章

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

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

  2. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

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

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

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

  4. CSS 层级选择器

    CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...

  5. jquery 层级选择器

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

  6. Jquery操作层级选择器

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

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

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

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

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

  9. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

随机推荐

  1. 重载<<操作符

    回头看我们之前的 rational.cpp,你满意了吗?反正我是觉得那些代码的可读性仍然欠佳:main 函数里边要多次调用 print 方法才能实现分数打印,酱紫不行! 如何通过重载 << ...

  2. JavaEE权限管理系统的搭建(二)--------聚合工程项目的创建和依赖关系

    本项目是一个聚合工程,所以要先搭建一个聚合工程的框架 搭建完成的项目结构图如下: 首先创建父项目:pom类型 子模块:web层的搭建,war类型 把这个两个目录标记为对应的类型 其他子模块:和serv ...

  3. 九九乘法表（Python实现）

    a = 1 #while实现 while a: b = 1 while b: print(str(b)+'*'+str(a),end='=') print(a*b,end=' ') if b == a ...

  4. 【Java】多线程相关复习—— 线程的创建、名字、运行情况以及顺序控制（join方法） 【一】

    一.创建线程的三种方式 · 继承Thread类 · 实现Runnable接口 · 实现Callable接口 二. 线程状态 · 线程名字 getName() · 线程活动情况 isAlive() · ...

  5. SqlServer中怎么删除重复的记录(表中没有id)

    SqlServer中怎么删除重复的记录(表中没有id) 其实我在别的网址也查到过删除重复的记录,不知道我是我SqlServer2012版本太低还是啥原因 delete from scwhere (c# ...

  6. Spring 中IOC（控制反转）&& 通过SET方式为属性注入值 && Spring表达式

    ### 1. Spring IoC IoC:Inversion of control:控制反转:在传统开发模式下,对象的创建过程和管理过程都是由开发者通过Java程序来实现的,操作权在开发者的Java ...

  7. Django 入门案例开发

    Django是一个重量级的web开发框架,它提供了很多内部已开发好的插件供我们使用:这里不去描述 Django直接进入开发过程. Django入门案例分两部分:一.开发环境的配置:二.业务需求分析. ...

  8. 创建数据库配置文件ini(转)

    一.有必要了解INI文件的结构: ;注释 [小节名] 关键字=值 ... ---- INI文件允许有多个小节,每个小节又允许有多个关键字, “=”后面是该关键字的值. ---- 值的类型有三种:字符串 ...

  9. python -- configparse读取配置文件

    在开发过程中,有的时候需要将一些参数写入到配置文件中,这样在改动一些相关信息时,可以直接在配置文件中进行修改. 而在python中,可以通过内置模块configparse对标准的配置文件进行读取. 配 ...

  10. C语言指针篇（二）多级指针

        多级指针         多级指针常常使用于数组.这里仅仅介绍一下它长什么样,后文会再次详细对比使用.         多级指针呢,常见的有二级指针.见图.             二级指针的 ...