一、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. 记一个鼠标略过时候的css动画

    .circle{ width: 15px; height: 15px; background: rgba(0,0,0,0.7); border-radius: 50%; display: table- ...

  2. USACO Section 1.5 Number Triangles 解题报告

    题目 题目描述 现在有一个数字三角形,第一行有一个数字,第二行有两个数字,以此类推...,现在从第一行开始累加,每次在一个节点累加完之后,下一个节点必须是它的左下方的那个节点或者是右下方那个节点,一直 ...

  3. 构建工具-----Gradle-----安装配置

    介绍 Gradle 是一款构建工具,继 Ant .Maven 之后的现代构建工具. 下载 Gradle 下面是 Gradle 的官方网站地址: Gradle l Modern Open-Source ...

  4. Android Studio 创建/打开项目时一直处于Building“project name”Gradle project info 的解决

    最近发现新版的AS,IDEA毛病不断,而且gradle的更新又给墙了,无奈啊! 进入类似如下的目录,发现如果没有对应的gradle解压文件,则在gradle官网下载完整压缩包,放入类似55xxxx串号 ...

  5. View 的setTag() 和 getTag()

    View 的setTag() 和 getTag()ImageView.setTag(""); 就是当多个ImageView用到一个监听器时,能触发不同的情况,是View的方法 Ad ...

  6. Webpack + React 开发 01 HelloWorld

    1.项目依赖 安装所需要依赖的其它第三方开源库,项目依赖如下: "dependencies": { "babel-core": "^6.21.0&qu ...

  7. mongodb 使用 robo3T 等工具添加用户之后还是 auth failed 的问题

    命令行输入 mongo use 对应的 db(需要授权的数据库),如 use admin 使用命令创建一个数据库,并赋予权限: db.createUser( { user: "xxx&quo ...

  8. Service Fabric基本概念：Partition/Replicas示例

    作者:张鼎松 (Dingsong Zhang) @ Microsoft 在上一节的结尾简单介绍了Service Fabric中分区Partitions和复制replicas的概念,本节主要以示例的形式 ...

  9. Docker应用三:Dockerfile使用介绍(以安装redis为例)

    Dockerfile使用介绍 一.Dockerfile介绍 Dockerfile用于自定义创建docker镜像,是由一行行命令组成的文件. Docker file中的命令根据作用分为四类: 1.1.指 ...

  10. [老法新用]使用PADDING-TOP:(PERCENTAGE)实现响应式背景图片

    处理响应式布局中背景图片的简单方法是等比例缩放背景图片.我们知道宽度设为百分比的  <img> 元素,其高度会随着宽度的变化自动调整,且其宽高比不变.如果想在背景图片中实现同样的效果,我们 ...