笔记-JavaWeb学习之旅16

拟墨画扇 提交于 2020-03-08 16:57:50
增强对象的功能

动态代理:在内存中形成代理类

实现步骤:

  1. 代理对象和真实对象实现相同的接口
  2. 代理对象 = Proxy.newProxyInstance();
  3. 使用代理对象调用真实对象的方法
  4. 增强方法

增强方式:

  1. 增强参数列表
  2. 增强返回值类型
  3. 增强方法体执行逻辑
package com.data.proxy;
//实现动态代理需要真实对象和代理对象具有相同的接口
//定义一个卖电脑的接口
public interface SaleComputer {
    public String sale(double money);
    public void show();
}
package com.data.proxy;

//真实类
//真实类对应真实对象,真实对象被代理对象代理,用来增强方法
public class Lenovo implements SaleComputer{
    @Override
    public void show() {
        System.out.println("展示电脑....");
    }

    @Override
    public String sale(double money) {
        System.out.println("花了"+money+"元买了一台联想电脑");
        return "联想电脑";
    }
}
package com.data.proxy;

import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.lang.reflect.Proxy;

//增强sale方法演示
public class ProxyTest {
    public static void main(String[] args) {
        //创建真实对象Lenovo
        Lenovo lenovo = new Lenovo();
        //获取代理对象
        //动态代理增强lenovo对象功能
        ClassLoader cl = lenovo.getClass().getClassLoader();//类加载器
        Class<?>[] in = lenovo.getClass().getInterfaces();//接口数组
        //该方法返回一个代理对象,强制转换为接口类型
        SaleComputer proxy_lenovo =(SaleComputer)Proxy.newProxyInstance(cl, in, new InvocationHandler() {//处理器
            //代理逻辑编写的方法
            //invoke方法特点:代理对象(proxy_lenovo)调用的所有方法都会触发该方法的执行
            //参数:
            //proxy:代理对象
            //method: 代理对象调用的方法,被封装为的对象
            //args:代理对象调用方法时,传递的实际参数
            @Override
            public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
//                System.out.println("你没有调用我,我也执行了.....");
//                System.out.println(method.getName());//sale
//                System.out.println(args[0]);//8000.0
                //使用真实对象调用方法
                Object obj = method.invoke(lenovo,args);
                return obj;
            }
        });
        //使用代理对象调用方法
        String computer = proxy_lenovo.sale(8000);//花了8000.0元买了一台联想电脑
        System.out.println(computer);//联想电脑

    }
}
JQuery 基础:

概念:一个JavaScript框架

JQuery对象和JS对象区别于装换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>

<script>
    //通过js方式获取html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//2:可以将其当数组使用
    //对divs中所有的div 让其标签体的内容变成aaa,使用js方式
    for(var i = 0;i<divs.length;i++){
        //divs[i].innerHTML="aaa";//把数组的i索引变成aaa
        //js对象转jq对象,$(js对象)
        $(divs[i]).html("ccc");
    }
    //js对象转jq对象
//==========================================================
    //通过jq方式获取div元素对象
     var $divs=$("div");
    // alert($divs.length);//2:可以将其当数组使用
    // //对$divs中所有的div 让其标签体的内容变成bbb,使用jq方式
    // $divs.html("bbb");
    //jq对象转js对象;jq对象[索引]或者jq对象.get(索引)
    $divs[0].innerHTML="ddd";

</script>

</body>
</html>
选择器:基本语法

事件绑定,入口函数,样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <!--//jq入口函数,dom文档加载完成后执行该函数-->
    <script>
        //绑定单击事件,获取按钮的id
        //jq里面有click方法,方法接收一个函数对象
      $(function(){//入口函数
          $("#b1").click(function () {//事件绑定
              alert("abc")
          })
      });
        $(function () {
            $("#div1").css("backgroundColor","red");// 样式控制
        });
    </script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <input type="button" value="点我" id="b1">

</body>
</html>
基本选择器

标签选择器 $("html标签名"): 获得所有匹配标签名称的元素

id选择器 $("#id的属性值"):获得与指定id属性值匹配的元素

类选择器 $(".class的属性值"):获得与指定的class属性值匹配的元素

并集选择器 $("选择器1,选择器2...")获取多个选择器选中的所有元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
    <script type="text/javascript">
        //先使用类id选择器绑定按钮button,在依据要求来选择适当的选择器
        $(function () {
            // value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
                $(function(){
                //id选择器,绑定单击事件
                $("#b1").click(function(){
                    //获取one属性值,点击按钮对应资源变成红色,
                    $("#one").css("backgroundColor","red");
                });
            });
            // < value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
                $(function(){
                   //使用id选择器,获取元素
                    $("#b2").click(function(){
                        //使用标签选择器,获取元素
                        $("div").css("backgroundColor","red");
                    });
                // value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
                $(function(){
                    $("#b3").click(function(){
                        //使用类选择器
                        $(".mini").css("backgroundColor","red");
                    });
                // value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
                $(function(){
                    $("#b4").click(function(){
                        //使用并集选择器
                        $("span,#two").css("backgroundColor","red");
                    });
        });
        });
        });
        });
    </script>
    </head> 
    <body>          
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
         <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
         <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
         <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
       <div id="one">
             id为one       
         </div>
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
        <span class="spanone">class为spanone的span元素</span>
        <span class="mini">class为mini的span元素</span>
        <input type="text" value="zhang" id="username" name="username">
    </body>
    
</html>
层级选择器

后代选择器 $("A B ") 选择A元素内部的所有B元素

子选择器 $("A > B") 选择A元素内部的所有B子元素(只包含子元素,不包含sunzi)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }       
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }       
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }       
     </style>
    <script type="text/javascript">
        $(function () {
            //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
            //绑定单击按钮,一单击就执行函数
            $("#b1").click(function () {
                //使用后代选择器
                $("body div").css("backgroundColor","red");
            });
            //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
            //绑定单击按钮,一单击就执行函数
            $("#b2").click(function () {
                //使用后代选择器
                $("body > div").css("backgroundColor","red");
            });
        });
    </script>  
    </head>  
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
         <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>   
 
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         
         <div id="one">
             id为one  
             
         </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one">
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>  
        <span class="spanone">    span
        </span>
    </body>
</html>
属性选择器

1.属性名称选择器 $("A[属性名]")包含指定属性等于指定值得选择器

2.属性选择器 $("A[属性名='值']")包含指定属性等于指定值的选择器

3.复合属性选择器 $("A[属性名='值'] []...")包含多个属性条件的选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            
            div.visible{
                display:none;
            }
     </style>
     <script type="text/javascript">
        $(function () {
                // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
                    $("#b1").click(function(){
                        $("div[title]").css("backgroundColor","red");
                    })
                // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
                $("#b2").click(function(){
                    $("div[title='test']").css("backgroundColor","red");
                })
                // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
                $("#b3").click(function(){
                $("div[title!='test']").css("backgroundColor","red");
                })
                // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
                $("#b4").click(function(){
                    $("div[title^='te']").css("backgroundColor","red");
                })
                // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
                $("#b5").click(function(){
                    $("div[title$='est']").css("backgroundColor","red");
                })
                // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
                $("#b6").click(function(){
                    $("div[title*='es']").css("backgroundColor","red");
                })
                // <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
                $("#b7").click(function(){
                    $("div[id][title*='es']").css("backgroundColor","red");
                })
        });
        
        
    </script>
   
     
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
         <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
         <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
         <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
         <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
         <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
         <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
         
         
       <div id="one">
             id为one   div  
         </div>
        
         <div id="two" class="mini"  title="test">
               id为two   class是 mini  div  title="test"
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="visible" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" title="test02">
              class是 one    title="test02"
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" style="margin-top:0px;">class是 mini</div>
        </div>
        
        
        <div class="visible" >
              这是隐藏的
        </div>
        
        <div class="one">
            
        </div>
        
        <div id="mover" >
              动画
        </div>
        
        <input type="text" value="zhang" id="username" name="username">
    </body>
    
    
   
</html>



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!