一、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. MT【123】利用第一次的技巧

    已知 \(r_1=0,r_{100}=0.85,(r_k\) 表示投 k 次投中的概率.) 求证:(1)是否存在\(n_0\)使得\(r_{n_0}=0.5\) (2)是否存在\(n_1\)使得\(r ...

  2. Timing wheel心跳机制

    在web服务中,断开空闲连接是一种减少资源浪费的一种手段,由此就有了心跳机制来判断一个连接是否空闲. 一种简单粗暴的方式: 1. 服务端每个连接保存一个最后一次操作的时间戳,每次这个连接对应fd可读时 ...

  3. 【刷题】BZOJ 4825 [Hnoi2017]单旋

    Description H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能多,效率高,掌握这种数据结构成为了 H 国的必 ...

  4. 【BZOJ4710】[JSOI2011]分特产（容斥）

    [BZOJ4710]分特产(容斥) 题面 BZOJ 题解 比较简单吧... 设\(f[i]\)表示至多有\(i\)个人拿到东西的方案数. \(f[i]=\prod_{j=1}^m C_{m+i-1}^ ...

  5. Windows Shell远程执行代码漏洞(（CVE-2018-8414）复现

    0x00   SettingContent-ms文件介绍 .SettingContent-ms是在Windows 10中引入的一种文件类型,它的内容是XML格式进行编写的,主要用于创建Windows设 ...

  6. CentOS7搭建elasticsearch集群

    准备三个节点,系统版本为CentOS7.3. 11.0.10.18 es01 11.0.10.19 es02 11.0.10.20 es03 1.安装java环境 # yum install -y j ...

  7. 解题：NOI 2014 购票

    题面 观察一下部分分,我们发现链上的部分分是这样一个DP: $dp[i]=min(dp[i],dp[j]+dis(i,j)*p[i]+q[i])(dis(i,j)<=lim[i]\&\& ...

  8. bzoj1027【JSOI2007】合金

    题目描述 某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的合金.新的合金 ...

  9. POI导入excel文件2

    POI上传到服务器读取excel文件1中已经介绍了上传文件和导入excel所有的内容http://www.cnblogs.com/fxwl/p/5896893.html , 本文中只是单单读取本地文件 ...

  10. django 线上教育平台开发记录

    1.环境搭建 2.新建项目 1).首先通过 django-admin 新建一个项目,(例如项目名为mxonline) django-admin startproject mxonline 运行后会出现 ...