JQuery_ JQuery选择器 JQuery判断相应的节点是否存在

有时候我们需要用选择器获取JQuery对象,并判断是否有满足条件的DOM节点存在

但是需要注意一点

由于 $(selector)  不论什么情况都会返回JQuery 对象, 所以不能按照以下的方式 判断节点是否存在

if($('#tt')){
            console.log("不能以 if($('#tt')) 这种方式判断DOM是否存在");
        }

需要按照下面的方式判断

正确做法

方式一

 if($('#dd.outClass').length >0){
            console.log("需要以 if($('#dd.outClass').length >0) 这种方式判断DOM是否存在");
        }

正确做法

方式二

if($('#dd.outClass')[0]){
            console.log("需要以 if($('#dd.outClass')[0]) 这种方式判断DOM是否存在");
        }

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式和内部样式的优先级</title>
    <link rel="stylesheet" href="css/testOutStyle.css"/>
    <style type="text/css">
        #dd{
            background-color: gold;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <div id="dd" class="outClass" style="width: 200px; height:400px;"></div>
    <script>
        if($('#tt')){
            console.log("不能以 if($('#tt')) 这种方式判断DOM是否存在");
        }
        if($('#dd.outClass').length >0){
            console.log("需要以 if($('#dd.outClass').length >0) 这种方式判断DOM是否存在");
        }
        if($('#dd.outClass')[0]){
            console.log("需要以 if($('#dd.outClass')[0]) 这种方式判断DOM是否存在");
        }
    </script>
</body>
</html>
时间: 2024-10-08 03:03:22

JQuery_ JQuery选择器 JQuery判断相应的节点是否存在的相关文章

JavaScript之jQuery-2 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

一.jQuery 选择器 jQuery 选择器简介 - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为 - 使用 jQuery 选择器能够将内容与行为分离 - 学会使用选择器是学习 jQuery 的基础 jQuery 选择器的优势 - 简洁的写法: - $()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用 - 支持 CSS1 到 CSS3 选择器 - jQuery 选择器支持 CSS1.CSS2 和 CSS3 选择器,同时拥有少量独

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

第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: 隐式迭代: 行为层与结构层的分离: 丰富的插件支持: 完善的文档: 开源. jQuery对象就是通过jQuery包装DOM对象后产生的对象. 在jQuery对象中无法使用DOM对象的任何方法.同样,DOM对象也不能使用jQuery里的方法. jQuery对象和DOM对象的相互转换        如果

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

jQuery选择器的总结

jQuery选择器 jQuery选择器是准确地选取你希望应用的元素. jQuery的元素选择器和属性选择器允许你通过标签名.属性名或者内容对HTML元素的选择. jQuery元素选择器表 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $(

【前端学习】【jQuery选择器】

jQuery选择器 jQuery选择器 本文内容引自于单东林<锋利的jQuery>,未经原作者准许,禁止以商业目的转载发布! 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM(Document Object Model)和Ajax(Asynchronous JavaScript and XML)操作都依赖于选择器. jQuery选择器 1 优势 1.1 简洁的写法 1.2 支持CSS1到CSS3选择器 1.3 完善的处理机制 2 CSS选择器和jQuery选择器 2.1 基

【jQuery基础学习】01 jQuery选择器

关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size

jQuery(二):jQuery选择器

jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red"); 说明: 获取并设置网页中所有<h3>元素的背景色. "h3"为选择器语法,必须放在$()中. $("h3")返回jQuery对象. 一.jQuery选择器 jQuery选择器功能强大,种类也很多,分类如下: 1.类CSS选择器 基本选择器 层次选择器

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

JQuery选择器转义说明

JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 class属性值为blue的div元素. 同时JQuery添加了一些自己的规则, 例如按照查询连接元素 $("[href]"). 这样就衍生出, 一套元字符, 用于表达选择器 合法格式, 故对于 其他部分例如属性值在选择器中的情况, 例如查询href为 www.baidu.com的 链接,