jQuery的优化

最新推荐文章于 2022-12-11 15:07:58 发布

依呀

最新推荐文章于 2022-12-11 15:07:58 发布

阅读量173

点赞数

分类专栏：课外知识文章标签： jQuery的优化

本文链接：https://blog.csdn.net/xiaoyi215/article/details/97534165

版权

课外知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

null，undefined 或 undeclared的区别

JavaScript的最初版本是这样区分的：
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

但是，上面这样的区分，在实践中很快就被证明不可行。目前，null 和 undefined基本是同义的，只有一些细微的差别。

null表示"没有对象"，即该处不应该有值。典型用法是：

用来初始化一个变量，这个变量可能被赋值为一个对象。
用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。
当函数的参数期望是对象时，被用作参数传入。
当函数的返回值期望是对象时，被用作返回值传出。
作为对象原型链的终点。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

典型用法是：

变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。

该如何检测它们？
null：表示无值；undefined：表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。

运算符将两者看作相等。如果要区分两者，要使用或 typeof 运算符。

以下是不正确的用法：

var a = undefined;
 if (a == undefined) {
    alert("undefined");
 }

a为null时，也会得到与undefined相同的结果，虽然null和undefined不一样。

typeof返回的是字符串，有六种可能：“number”、“string”、“boolean”、“object”、“function”、“undefined”。

以下是正确的用法：

 var  a = undefined;
 if( typeof(a) == undefined) {
     alert("undefined");
 }

JS中如何判断null？

以下是不正确的用法：

var a = null;
 if(a == null) {
    alert("is null");
 }

a为undefined时，也会得到与null相同的结果，虽然null和undefined不一样。

 var a=null;
 if(!a) {
    alert("is null");
 }

如果a为undefined或者数字零，也会得到与null相同的结果，虽然null和二者不一样。

 var a = null;
 if(typeof(a) == "null") {
     alert("is null");
 }

为了向下兼容，a为null时，typeof总返回object。这种方式也不太好。

以下是正确的用法：

 var a = null; 
 if(!a&&typeof(a) != "undefined" && a != 0) {
     alert("is null");
 }

导入一个jquery jar包：
在这里插入图片描述
代码展示:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
/* 
 */
 $(function () {
	 //undefined错误写法
	 /*   var a = undefined;
	 if (a == undefined) {
	    alert("undefined");
	 }   */
	 //undefined正确写法
	 /* var a =undefined;
	 if(typeof(a)== undefined) {
	     alert("undefined");
	 } */
	 //js中null的错误写法
	/*  var a = null;
	 if(a == null) {
	    alert("is null");
	 } */
	 //a为undefined时，也会得到与null相同的结果，虽然null和undefined不一样。
	/*  var a=null;
	 if(!a) {
	    alert("is null");
	 } */
	/*  var a = null;
	 if(typeof(a) == "null") {
	     alert("is null");
	 } */
	 //正确写法
	/*  var a = null; 
	 if(!a &&typeof(a) != "undefined" && a != 0) {
	     alert("is null");
	 } */
	
 
 })

</script>
</head>
<body>
</body>
</html>

效果如下：
在这里插入图片描述

针对jQuery的优化方法

总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。

以下为代码展示：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
 <div id="content">
     <form method="post"action="#">
         <h2>jquery优化</h2>
        <ul id="traffic_light">
             <li>
                <input type="radio"class="on"name="light"value="red"/>红
           </li>
             <li>
               <input type="radio"class="off"name="light"value="yellow"/>绿
             </li>
            <li>
                <input type="radio"class="off"name="light"value="green"/>黄
             </li>
        </ul>
         <input class="button"id="traffic_button"type="submit"value="ok"/>
  </form>
 </div> 
</body>
</html>

效果如下：
在这里插入图片描述
比如需要选择红绿单选框，那么可以使用一个 name来限制(修饰)class

在class前使用tag(标签名)在jQuery中第二快的选择器是tag(标签)选择器
将jQuery对象缓存起来把jQuery对象缓存起来就是要告诉我们要养成将jQuery对象缓存进变量的习惯。
如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中
冒泡除非在特殊情况下,否则每一个js事件(例如:click,mouseover等.)都会冒泡到父级节点。
推迟到$(window).load。

jQuery对于开发者来说有一个很诱人的东西,可以把任何东西挂到 $(d o c u m e n t) . r e a d y 下。尽管$ (document).rady确实很有用，它可以在页面渲染时，其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是 $(d o c u m e n t) . r e a d y 函数引起的。你可以通过将 j Q u e r y 函数绑定到$ (window).load事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括iframe)被下载完成后执行。一些特效的功能，例如拖放,视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。

慎用.live()方法（应该说尽量不要使用）。

这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为新增的DOM元素动态绑定事件。但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
  $(function(){
       $("p").click(function(){
            alert($(this).text());
        });
        $("button").click(function(){
             $("<p>点一次出来一次</p>").appendTo("body");
      });
     }) 

 </script>
</head>
<body>

   <p>点一次进来一次</p>
   <button>add</button>

 
</body>
</html>

结果展示效果：
在这里插入图片描述
运行后，你会发现新增的p元素，并没用被绑定click事件。你可以改成.live(“click”)方式解决此问题，代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>

<script type="text/javascript">

    	     //live
    	     $(function() {
    	    	    $("p").live("click",function() {
    	    	        // 改成live方式
    	    	        alert($(this).text());
    	    	     });
    	    	 
    	    	      $("button").click(function() {
    	    	        $("<p>live</p>").appendTo("body");
    	    	     });
    	    	
    	})
 </script>
</head>
<body>

   <p>live</p>
   <button>add</button>

</body>
</html>

.live：
在这里插入图片描述

可以使用另一种方法：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<!-- <script type="text/javascript">


/* 
 */
 
	 //undefined错误写法
	 /*   var a = undefined;
	 if (a == undefined) {
	    alert("undefined");
	 }   */
	 //undefined正确写法
	 /* var a =undefined;
	 if(typeof(a)== undefined) {
	     alert("undefined");
	 } */
	 //js中null的错误写法
	/*  var a = null;
	 if(a == null) {
	    alert("is null");
	 } */
	 //a为undefined时，也会得到与null相同的结果，虽然null和undefined不一样。
	/*  var a=null;
	 if(!a) {
	    alert("is null");
	 } */
	/*  var a = null;
	 if(typeof(a) == "null") {
	     alert("is null");
	 } */
	 //正确写法
	/*  var a = null; 
	 if(!a &&typeof(a) != "undefined" && a != 0) {
	     alert("is null");
	 } */
	
 
 })
</script> -->

<script type="text/javascript">
//1、
  /*   $(function(){
 
       $("p").click(function(){
            alert($(this).text());
        });

        $("button").click(function(){
             $("<p>点一次出来一次</p>").appendTo("body");
      });
     }) */
 
    	     
    	     //2、live
    	    /*  $(function() {
    	    	    $("p").live("click",function() {
    	    	        // 改成live方式
    	    	        alert($(this).text());
    	    	     });
    	    	 
    	    	      $("button").click(function() {
    	    	        $("<p>live</p>").appendTo("body");
    	    	     });
    	    	
    	}) */
    	
    	//第三种方法：（最好）
    	   $(function() {
	     $("p").click(function() {
	         alert($(this).text());
	     });

	    $("button").click(function() {
	        $("<p>哈哈</p>").click(function() {
	            // 为新增的元素重新绑定一次
	           alert($(this).text());
	         }).appendTo("body");
	     }); 
 </script>
 
</head>
<body>

   <p>live</p>
   <button>add</button>
   
   
 <!-- <div id="content">
     <form method="post"action="#">
         <h2>jquery优化</h2>
        <ul id="traffic_light">
             <li>
                <input type="radio"class="on"name="light"value="red"/>红
           </li>
             <li>
               <input type="radio"class="off"name="light"value="yellow"/>绿
             </li>
            <li>
                <input type="radio"class="off"name="light"value="green"/>黄
             </li>
        </ul>
         <input class="button"id="traffic_button"type="submit"value="ok"/>
  </form>
 </div>  -->
 
 
 
</body>
</html>

这样做效率比较高一点
展示效果：
在这里插入图片描述

依呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的优化

null，undefined 或 undeclared的区别JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。但是，上面这样的区分，在实践中很快就被证明不可行。目前，null 和 undefined基本是同义的，只有一些细微的差别。null表示"没有对象"，即该处不应该有值。典型用法是...
复制链接

扫一扫