zoukankan      html  css  js  c++  java
  • jquery选择器的一些处理

    本文不讨论用jquery选择器具体怎么选择页面元素,而讨论选择元素后后的一些处理

    jquery的选择器选择元素的时候,即使没有选择到指定的对象,页面并不会报错,例子:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    	<div>
    	</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    	$("#a").css("color","red");
    </script>
    </body>
    </html>
    

      

    这个例子中,页面上没有id=”a”的元素,对$(”#a”)对象操作,控制台并不会报任何错误。容错性好,这样的好处是所有的对象操作可以写在一个js文件里而不报错。坏处是调试不太方便,选择器里写错了不容易发现,比较坑。

    可以看出,id=”a”的元素不存在时,发回一个n.fn.init对象,里面包含两项。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    	<div>
    	</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    	console.log($("#a"));//页面并没有id="a"的元素,控制台打印如下:n.fn.init {context: document, selector: "#a"}
    </script>
    </body>
    </html>
    

      

    选择器有没有选中元素,不能用if($(“select”))来判断了,反面例子

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    	<div>
    	</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    if($("#a"))
    {
    	alert("不空")//弹出这个,不是我们想要的!!!
    }else
    {
    	alert("空");
    }
    </script>
    </body>
    </html>
    

      

    可以看出,这样得到的结果是错的。有没有选择到元素,应该通过jquery的length属性的值,即元素的长度来,来判断,这个值为零,没有选中元素:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    	<div>
    	</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    if($("#a").length)
    {
    	alert("不空")
    }else
    {
    	alert("空");//弹出这个,这是我们想要的结果
    }
    </script>
    </body>
    </html>
    

      

    总结:判断选择器有没有选到元素,要用if($(“select”).length)判断

  • 相关阅读:
    scrapy.FormRequest与FormRequest.from_response 的区别
    可迭代对象和生成器
    css选择器
    xlwt写入excel时候的合并单元格
    html form提交的几种方式
    Python decorator 拦截器
    python manage.py makemigrations & migrate
    asianux4.5 环境, 本地yum源,局域网yum源的配置
    mysql基本操作
    sqlite-mysql migrate
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/5497343.html
Copyright © 2011-2022 走看看