笔记-JavaWeb学习之旅16

程序员文章站 2022-05-15 13:33:14

增强对象的功能动态代理：在内存中形成代理类实现步骤： 1. 代理对象和真实对象实现相同的接口 2. 代理对象 = Proxy.newProxyInstance(); 3. 使用代理对象调用真实对象的方法 4. 增强方法增强方式： 1. 增强参数列表 2. 增强返回值类型 3. 增强方法体执行逻 ......

增强对象的功能

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

实现步骤：

代理对象和真实对象实现相同的接口
代理对象 = proxy.newproxyinstance();
使用代理对象调用真实对象的方法
增强方法

增强方式：

增强参数列表
增强返回值类型
增强方法体执行逻辑

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>

笔记-JavaWeb学习之旅16

增强对象的功能

jquery 基础：

选择器：基本语法

基本选择器

层级选择器

属性选择器

python学习笔记：第16天面向对象02--对象中的成员

Kali学习笔记16：Nmap详细讲解

笔记-JavaWeb学习之旅18

Flutter学习笔记（16）--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

笔记-JavaWeb学习之旅15

笔记-JavaWeb学习之旅4

笔记-JavaWeb学习之旅5

笔记-JavaWeb学习之旅11

Head First Java学习笔记(16):集合与泛型

已前的学习笔记java lesson 16

笔记-JavaWeb学习之旅16

增强对象的功能

jquery 基础：

选择器：基本语法

基本选择器

层级选择器

属性选择器

python学习笔记：第16天 面向对象02--对象中的成员

Kali学习笔记16：Nmap详细讲解

笔记-JavaWeb学习之旅18

Flutter学习笔记（16）--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

笔记-JavaWeb学习之旅15

笔记-JavaWeb学习之旅4

笔记-JavaWeb学习之旅5

笔记-JavaWeb学习之旅11

Head First Java学习笔记(16):集合与泛型

已前的学习笔记java lesson 16

python学习笔记：第16天面向对象02--对象中的成员