zoukankan      html  css  js  c++  java
  • 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》里,在使用的时候先要输入一段

    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>,导入对应的库,在进行调用。

    <!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);
        }
    }

    未完待续。

     
     
  • 相关阅读:
    jupyter 更新环境变量 %env
    viterbi 维特比解码过程,状态转移矩阵
    ValueError: cannot index with vector containing NA / NaN values
    python ElasticSearch ES 搜索词 完全匹配 精准匹配
    首页 如何在Jupyter中抑制回溯?
    python 操作ES
    python 玩转 侦探游戏 嫌疑犯 真假话 侦探推理
    python – 解析pcfg语法树 提取其语法规则 Probabilistic Context-Free Grammar Parser
    2019-09-18 关键字匹配文件名--搜索文件
    2019-07-21 win10安装rabbitmq与启动
  • 原文地址:https://www.cnblogs.com/guomingyt/p/7811517.html
Copyright © 2011-2022 走看看