一、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. [洛谷P3175][HAOI2015]按位或

    题目大意:刚开始有一个数$x=0$,每秒钟有一个数$y\in[0,2^n)(n\leqslant20)$按一定概率随机出现,数$i$的概率为$p_i$,保证$\sum\limits_{i=0}^{2^ ...

  2. Udp广播的发送与接收(C#＋UdpClient) 上篇

    简介: Udp广播消息用在局域网的消息传递很方便.本文使用UdpClient类在WPF下实现Udp广播收发 发送: void MainWindow_Loaded(object sender, Rout ...

  3. 【BZOJ1011】遥远的行星（？？？）

    题面 BZOJ 洛谷 题解 大概就是分个块,然后每块取平均数算贡献啥的. BZOJ上过不去??? #include<iostream> #include<cstdio> usi ...

  4. vue入门教程

    vue视频教程(对vue有个概览,要掌握vue-cli的用法,对vue-router,vuex有基本的概念) https://www.imooc.com/learn/1091 1. vue-cli v ...

  5. centos7添加虚拟IP

    1.在网络配置文件中添加虚拟IP,vi /etc/sysconfig/network-scripts/ifcfg-eno16777736 TYPE="Ethernet" BOOTP ...

  6. html视频背景

    视频作为网页背景的限制因素 在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚: 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很 ...

  7. 如何修改Windows程序的权限？

    修改程序的权限需要用到3个函数: 1. 获取进程的令牌句柄: OpenProcessToken 2. 查找特权类型的ID: LookupPrivilegeValue 3. 修改进程的特权:Adjust ...

  8. ssh 通过跳板机连接到远程服务器

    ssh 通过跳板机连接到远程服务器 import paramiko from sshtunnel import SSHTunnelForwarder import threading def read ...

  9. 题解【bzoj2002 [Hnoi2010]Bounce 弹飞绵羊】

    Description 给 \(n\) 个点以及它们的弹力系数 \(k_i\) ,含义为 可以弹到 \(i + k_i\) 的位置. 支持两个东西,修改一个点的弹力系数:求一个点要弹多少次弹出 \(n ...

  10. array_multisort 二维数组排序

    用PHP自带array_multisort函数排序 <?php $data = array();    $data[] = array('volume' => 67, 'edition' ...