jQuery d4

jQuery

一.介绍

　　jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。他的特点动态特效 AJAX 通过插件来扩展方便的工具 - 例如浏览器版本判断渐进增强链式调用多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持），是一种十分使用的库，优化了javaScript，使用起来简单方便。

二.初识

　　首先他是javaScript的，所以应该写在对应的地方，在学习的时候通常写在前面《style》里，在使用的时候先要输入一段

<!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">
<title>HelloWorld</title>

<script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById("btnId");
        btn.onclick = function(){
            alert("hello");
        };
    };
</script>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //$(function(){})相当于window.onload
    $(function(){
        //为btnId绑定一个单击响应函数
        //$("#btnId") 相当于 document.getElementById("btnId");
        $("#btnId").click(function(){
            alert("你好");
        });
    });

</script>

</head>
<body>

    <button id="btnId">SayHello</button>

</body>
</html>

可以由库得到这个//$(function(){})相当于window.onload，可以看出他比一般的javaScript要简单许多，方便使用，但需要注意的是每个符号的对映。

三.核心函数

　　首先，他可以传入html创建到本html中，$("html").appendTo("");你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。

　　其次，他可以通过查找关键字（可以使标签，类，id或者其他选择器）找到想要的代码，再进行简单的css，这样就可以简单的控制了。

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>核心函数</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
        //核心函数的4个作用
        //$是jquery中核心函数，它一共四种作用，它可以根据传递参数的不同起不同的作用    
        //传入参数为[函数]时：在文档加载完成后执行这个函数
        $(function(){
            //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
            $("<div>this</div>").appendTo("body");
            $("p").css("background-color","red");
            //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
            //#id .class tagName
            $("#btn").click(function(){
                alert("click me");
            });
            //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
            var btnEle=document.getElementById("btn");
            //dom对象指通过原生的JS代码获取到对象
            //jQuery对象指通过jQuery核心函数获取到对象
            var $btn=$("#btn");
            //DOM-->jQuery;
            $(btnEle).click(function(){
                alert($(btnEle));
            });
            //jQuery-->DOM;
            var $abc=$("p");
            alert($abc[0]);
            
            //jQuery对象中为我们提供了非常多的方法，但是dom对象并不能调用这些        
        })
        
</script>
</head>
<body>

    <button id="btn">按钮</button>
        <p>assa</p>
    
</body>
</html>

有时需要用到dom对象有时又需要用到jQuery对象，可以将两个对象进行转换，通常定义jQuery对象有$,由于它可以对一类操作，而其至调用了一个css不需要将它便利，这样可以把它理解成一个数组，而dom对象需要便利就把它当作单个元素，当元素想变成数组时，直接让他成为数组即可。当数组想变成元素时需要调出每一个附成一个值。

所以dom转jQuery只要在前面加一个$,而jQuery变dom就需要取他当中的元素了，也就【i】；从0开始。

额外的学习

　　1.单例模式：单例对象只有一个实例，每次别人只能调用他的静态方法，并不能实例化对象，只能获得他的唯一实例，这样就可以保证他的唯一性，不会造成资源的浪费，与出错。

　　　　懒汉式和饿汉式

　　饿汉式：先创好变量和对象，储存在空间里，这样调用才能接着的时候就很方便了。

　　懒汉式：先不创好对象，每次使用的时候，再根据执行结果判断调用还是创建一个新的东西，其中由于线程安全性的问题，当多个线程同时调用这个函数时候就会出现多次创建，这样就不是单例了，需要加以改进，改进的方法有三种

第一种是注释里的直接调用他的静态方法，并且给他一个锁在public 和static里，但是这样会存在一个问题，他的效率很低，第一个线程进去了后，第二个需要等待直到执行玩才能在进去，这样太慢了。

第二种是在里面进行自锁判断，这样虽然都进去了，但是会出现和第一种方法一样的问题，他需要等着前面的线程执行完，才能接着进去。

第三种是在外面先进判断再进行里面的自锁判断，可以把大多数的过滤调，但对于第一次未创建的还是会出现等待问题，但是相对前两种是十分高效的了。

package com.neuedu.java;


//饿汉形式
public class SingleTon {//以空间换时间
    //1.构造私有化
    SingleTon(){ }
        //2。提供一个当前类型的变量并赋值为当前类对象
        private static SingleTon singleTon=new SingleTon();
        //3.提供一个静态方法，让外界使用这类对象
        public static SingleTon getInstance(){
            return singleTon;
        
    }

}
//单例懒汉式
class Single {//存在线程安全性。以时间换空间
    //1.构造私有化
    private Single(){ }
        //2。提供一个当前类型的变量并赋值为当前类对象
        private static Single single=null;
        //3.提供一个静态方法，让外界使用这类对象
//        public synchronized static Single getInstance(){
//            if(single==null){
//                single=new Single();
//            }
//            
//            return single;
//        
//    }

//　　　　 public  static Single getInstance(){
 //  
 //          synchronized (Single.class){
   //         if(single==null){
     //           single=new Single();
    //        }
      //      }
        //    }
     //       return single;
     //   }

 public static Single getInstance(){ if(single==null)
{//第一次创建效率还是比较低，但是创建以后就大大提供速度了。
 synchronized (Single.class){ if(single==null)
{ single=new Single();
 } 
}
 } 
return single;
 }

package com.neuedu.java;

public class Student {
    public static void main(String[] args){
        SingleTon a=SingleTon.getInstance();
        SingleTon b=SingleTon.getInstance();
        System.out.println(a==b);
        Single c=Single.getInstance();
        Single d=Single.getInstance();
        System.out.println(c==d);
    }
}

未完待续。