增强对象的功能
动态代理:在内存中形成代理类
实现步骤:
- 代理对象和真实对象实现相同的接口
- 代理对象 = 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>
来源:https://www.cnblogs.com/train99999/p/11029344.html