一、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. PowerDesigner在生成SQL时报错Generation aborted due to errors detected during the verification of the mod

    一.本章节要用到  ODBC连接数据库直接创建表,请先创建连接库的ODBC 请参考  新建  http://www.cnblogs.com/wdw31210/p/7580286.html 二.生成 去 ...

  2. MVC如何设置启动页

    1.解决方案下的项目,右键,属性,Web,特定页,切换下其他选项以保存

  3. Mybatis笔记八：MyBatis中#{}和${}的区别

    先给大家介绍下MyBatis中#{}和${}的区别,具体介绍如下: 1. $将传入的数据直接显示生成在sql中 2. #方式能够很大程度防止sql注入. 3.$方式无法防止Sql注入. 4.$方式一般 ...

  4. 洛谷 P2389 电脑班的裁员 解题报告

    题意: 给定一段长为N的序列,选取其中的至多M段使这些子段和最大. 当N=1000时,我们可以采用动态规划解法 令\(dp[i][j][k]\)代表当前选至位置\(i\)处于第\(j\)段当前是否选取 ...

  5. java解数独

    先输入要解的数独,采用多维数组来保存其中的值,未填数字的地方,初始化为0,然后采用递归的方法来解数独. 直接上代码: /** * * @author walker * */ public class ...

  6. Linux及安全实践四——ELF文件格式分析

    Linux及安全实践四——ELF文件格式分析 一.ELF文件格式概述 1. ELF:是一种对象文件的格式,用于定义不同类型的对象文件中都放了什么东西.以及都以什么样的格式去放这些东西. 二.分析一个E ...

  7. wget递归下载整站

    由于线上跑的系统还有CentOS5.4.6.4.6.5.6.5.6.6.6.8,而各镜像站维护的最早的版本已经是6.9,所以需要爬archive站点的rpm包来自建yum仓库. # wget -r - ...

  8. day7-python基础

  9. nodejs调用脚本(python/shell)和系统命令

    每种语言都有自己的优势,互相结合起来各取所长程序执行起来效率更高或者说哪种实现方式较简单就用哪个,nodejs是利用子进程来调用系统命令或者文件,文档见http://nodejs.org/api/ch ...

  10. C#线程篇---让你知道什么是线程（1）

    线程线程,进程进程,到底什么是线程,什么是熟练多线程编程? 今天来和大家一起讨论讨论线程基础,让大家知道线程的基本构造. 说线程之前,先要了解下进程,这个可不能不知道. 什么是进程? Microsof ...