一、jQuery选择器

jQuery选择器就是帮助我们快速定位到一个或多个DOM节点

1.1  ID选择器

如果某个DOM节点有id属性，利用jQuery查找方式：

    <script src="jquery-3.3.1.js"></script>  <!--引入jQuery库-->

    <script type="text/javascript">

        //1. jQuery的语法： $("选择器").action

        var divclass = $("#div1");

        console.log(divclass);

    </script>

首先，通过$("#div1")可以获得一个jQuery对象，他是类似一个数组，数组中每个元素都引用自DOM节点。通过$(".div1")[0]的方式获得一个DOM节点对象，通过DOM节点对象我们可以使用DOM属性和方法。

如果$("#div1")没有查到标签的话，会返回[]，jQuery选择器不会返回null或者undefined。

1.2 DOM对象和jQuery对象转化

//1. jQuery的语法： $("选择器").action

var divclass = $(".div1");

var divDom = divclass.get(0);//获取数组中第一个DOM对象

var divJq = $(divDom);//将DOM对象转换为jQuery对象

console.log(divclass);

1.3 按class查找

//1. jQuery的语法： $("选择器").action

var divclass = $(".div1");  // 类选择器

console.log(divclass); // 得到一个类似数组的jQuery对象

需要注意的是不要省略.在class名前$(".div1")

所有包含div1的DOM节点都会被返回

1.4 按Tag查找

只需要写上tag标签名即可。

var ps = $('p'); // 返回所有<p>节点

ps.length; // 数一数页面有多少个<p>节点

1.5 多个选择器配合使用

// 找到类名为div1的div标签

var div1 = $("div.div1");

console.log(div1);

console.log(div1.get(0).innerText);

div.div1 找到 类名为div1的div标签。

1.6 所有元素选择器

var all = $("*");// * 表示所有

console.log(all);

1.7 组合选择器

组合查找就是把以上的简单选择器组合起来使用，

var tmp = $(".div1,#id1");

console.log("tmp:",tmp);

选择出来的元素是按照他们在HTML中出现的顺序排列的。

1.8层级选择器

x,y可以是任意选择器

$("x y");// x的所有后代y（子子孙孙）

$("x > y");// x的所有儿子y（儿子）

$("x + y")// 找到所有紧挨在x后面的y

$("x ~ y")// x之后所有的兄弟y
<!DOCTYPE html>

<html>

<head>

    <title>层级选择器</title>

</head>

<body>

<div class="div1">

    <p class="div1-p1">

        div1下的儿子标签p

    </p>

    <div class="div1-div1">

        div1下的第一个div儿子div1-div1

        <div class="div1-div11">

            div1下面的孙子

        </div>

    </div>

    <div class="div1-div2">

        div1下的第二个div儿子div1-div1

    </div>

</div>

<ul class="ul1">

    <li>1</li>

    <li>2</li>

    <li id="li3">3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>

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

<script type="text/javascript">

    // 1.div1的子子孙孙

    var div1 = $(".div1 div");//查找div1 所有的子子孙孙div标签  length = 3

    console.log(div1);

    // 2.查找div的儿子

    var div1Son = $(".div1>div"); //查找div1的所有儿子  length = 2

    console.log(div1Son);

    //3.查找紧挨着div1中p的div

    var div1_div1 = $(".div1-p1+div");  // length = 1

    console.log(div1_div1);

    //4.查看div1-p1的后面的同级兄弟

    var div1_div1 = $(".div1-p1~div");// length = 2

    console.log(div1_div1);

</script>

</body>

</html>

层级选择器demo

1.9 属性选择器

一个DOM节点除了id、class等基本的选择器之外，还可以通过属性来查找，比如在一个表单中按属性来查找

var email = $('[name=email]'); // 找出<??? name="email">

var passwordInput = $('[type=password]'); // 找出<??? type="password">

var a = $('[items="A B"]'); // 找出<??? items="A B">

<input type="text">

<input type="password">

<input type="checkbox">

$("input[type='checkbox']");// 取到checkbox类型的input标签

$("input[type!='text']");// 取到类型不是text的input标签

1.通过属性来查找

2.通过属性和属性值来查找

<!DOCTYPE html>

<html>

<head>

    <title>属性选择器</title>

</head>

<body>

     <form class="test-form" target="_blank" action="#0" onsubmit="return false;">

        <legend>注册新用户</legend>

        <fieldset>

            <p><label>名字: <input name="name"></label></p>

            <p><label>邮件: <input name="email"></label></p>

            <p><label>口令: <input name="password" type="password"></label></p>

            <p><button type="submit">注册</button></p>

        </fieldset>

    </form> 

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

<script type="text/javascript">

    // 只判断属性是否存在，通过属性来查找

    var name1 = $('[name]'); // 查找包含属性name的标签

    console.log(name1);

    // 根据属性查找的语法 $("标签名[属性名 = '属性值'']"")  标签名可以不写

    var isname = $("[name = 'name']"); // 查找name = "name"的

    console.log(isname);

    var isname2 = $("input[name='name']");  // 标签名是可以省略的

    console.log(isname2);

    // 判断不是name=‘name’的标签

    var isname3 = $("input[name != 'name']"); // input不能省略，否则命中范围太大

    console.log(isname3);

    // 多个属性  $("[属性名 = '属性值1 属性值2']")

    // 查找 name 和 email的input

    var nameemail = $("[name='name'],[name='email']");

    var nameemail2 = $("input[name != 'password']");

    console.log(nameemail);

    console.log(nameemail2)

</script>

</body>

</html>

属性选择器demo

jQuery-选择器-查找标签的更多相关文章

  1. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  2. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  3. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  4. JQuery查找标签

    JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...

  5. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  6. jquery基本选择器：id选择器、class选择器、标签选择器、通配符选择器

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...

  7. 语义化标签和jQuery选择器

    关于语义化标签 https://blog.csdn.net/nongweiyilady/article/details/53885433 更详细的语义化标签:https://www.cnblogs.c ...

  8. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  9. java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）

    1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...

  10. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

随机推荐

  1. hbase 跳转过滤器skipfilter

    用于跳过整个行键,需要和其他过滤器一起使用,本例SkipFilter和ValueFilter过滤器组合使用过滤不符合条件的行, 如果不配合SkipFiter,ValueFilter只过滤单元值包含的列 ...

  2. 【刷题】BZOJ 2190 [SDOI2008]仪仗队

    Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是 ...

  3. [LOJ2271] [SDOI2017] 遗忘的集合

    题目链接 LOJ:https://loj.ac/problem/2271 洛谷:https://www.luogu.org/problemnew/show/P3784 BZOJ太伤身体死活卡不过还是算 ...

  4. Mysql索引机制B+Tree

    1.问题引入 有一个用户表,为了查询的效率,需要基于id去构建索引.构建索引我们需要考虑两个方面的问题,1个是查询的效率,1个是索引数据的存储问题.该表的记录需要支持百万.千万.甚至上亿的数据量,如果 ...

  5. 【Cf #449 C】Willem, Chtholly and Seniorious（set维护线段）

    这里介绍以个小$trick$,民间流传为$Old Driver Tree$,实质上就是$set$维护线段. 我们将所有连续一段权值相同的序列合并成一条线段,扔到$set$里去,于是$set$里的所有线 ...

  6. maven管理工具

    Maven解决的问题: 1. 使用maven前搭建项目需要引入各种jar包,并且还可能有jar包冲突的问题 解决jar包冲突的方式: 1. 第一声明优先原则 2. 路径近者优先原则. 直接依赖路径比传 ...

  7. Java之初学异常

    异常 学习异常的笔记记录 异常 异常的概念 指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止. 异常指的并不是语法错误,语法错了,编译不通过,不会产生字节码文件,根本不能运行. ...

  8. Android Progurad 代码混淆

    ref: ProGuard基础语法和打包配置.mdhttps://github.com/D-clock/Doc/blob/master/Android/Gradle/3_ProGuard%E5%9F% ...

  9. Vulkan vs OpenGL ES

    Vulkan 简介 Vulkan是一个免费开放的.跨平台的.底层的图形API,在一定程度上比AMD Mantle.微软DirectX 12.苹果Metal更值得开发者关注. Vulkan的最大任务不是 ...

  10. bzoj 2732 射箭 半平面交

    2732: [HNOI2012]射箭 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2531  Solved: 848[Submit][Status] ...