笔记-JavaWeb学习之旅16
增强对象的功能
动态代理：在内存中形成代理类
实现步骤：
- 代理对象和真实对象实现相同的接口
- 代理对象 = 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的更多相关文章
- 笔记-JavaWeb学习之旅7
JavaScript基础 概念:一门客户端脚本语言,运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎,是一个脚本语言,不需要编译,直接就可以被浏览器解析执行. JavaScript ...
- 笔记-JavaWeb学习之旅5
CP30的演示 package cn.itcast.datasourcejdbc; import com.mchange.v2.c3p0.ComboPooledDataSource; import j ...
- 笔记-JavaWeb学习之旅13
验证码案列 昨天晚上出现的500错误原因在于验证码没有获取到,获取验证码是应该获取的是共享域中的验证码,而我把获取值得键给写成了jsp中的键,而不是内存生成图片中,然后把图片上传到共享域中的键.这两个 ...
- 笔记-JavaWeb学习之旅19
Redis:redis是一款高性能的NOSQL系列的非关系型数据库 NOSQL: Not Only SQL ,意即"不仅仅是SQL",是一项全新的数据库理念,泛指非关系型数据库 r ...
- 笔记-JavaWeb学习之旅18
AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和XML 异步和同步:客户端和服务器端相互通信的基础上 同步:客户端操作后必须等待服务器端的响应, ...
- 笔记-JavaWeb学习之旅17
1.过滤选择器 首元素选择器:first 获得选择的元素中的第一个元素 尾元素选择器:last获得选择元素中的最后一个元素 非元素选择器:not(selector) 不包括指定内容的元素 偶数选择器: ...
- 笔记-JavaWeb学习之旅15
Filter:过滤器 概念:当访问服务器的资源是,过滤器可以将请求拦截下来,完成一些特殊的功能 快速入门: 步骤: 定义一个类,实现接口Filter 复写方法 配置拦截路径 package com.d ...
- 笔记-JavaWeb学习之旅14
JSTL:JavaServer Pages Tag Library JSP标准标签库 if标签 <%@ page import="java.util.ArrayList" % ...
- 笔记-JavaWeb学习之旅10
Servlet server applet运行在服务器端的小程序,servlet就是一个接口,定义了Java类被浏览器访问到的规则(Java类重写这个接口,就可以被浏览器(tomcat)识别) Ser ...
随机推荐
- 基于node开发的web应用，负载均衡的简单实践
集群(cluster)是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器. 负载均衡(Load Balance ...
- 用vector代替实现二维数组
vector可以用来模拟数组,当然也可以用来模拟二维数组: 定义如:vector<int>a[100]; 相当于定义了一个100行的数组,当每行的大小是不确定的 模板应用如下: #in ...
- 五子棋AI的思路
隔了一年才把AI思路给写了... 需求分析与设计方案:http://www.cnblogs.com/songdechiu/p/4951634.html 如需整个工程,移步http://download ...
- linux 下 监控系统运行状况 命令 dstat
推荐读文:https://linux.cn/article-3215-1.html
- zabbix监控系统性能采集指标
监控项目 详细内容 ...
- 使用chrome的F12开发人员工具进行网页前端性能测试
用chrome访问被测网站,定位到你要测试的动作所在页面或被测页面的前一页.按F12调出开发人员工具,其它的功能我就不介绍了,直接切换到性能选项卡Profiles. 点击start,生成ProFile ...
- static修饰类的作用
Java里面static一般用来修饰成员变量或函数.但有一种特殊用法是用static修饰内部类,普通类是不允许声明为静态的,只有内部类才可以.被static修饰的内部类可以直接作为一个普通类来使用,而 ...
- 小心transform
张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- bjwc Day3 & 4 妈妈我这是来了个什么地方呀
真·bjwc开始了 Day3 T1啥啥啥 第k大斜率?想都没想码了个暴力,然后爆零...暴力都能错,退役 T2看着像网络流就扔了个网络流大暴力上去,六七十分的样子然后蜜汁wa T3题面说“想都没想就弄 ...
- poj1821 Fence(单调队列优化dp)
地址 一排N个木板,M个工匠站在不同位置$S_i$,每个人可以粉刷覆盖他位置的.最长长度为$L_i$木板段,每刷一个有$P_i$报酬.同一木板只刷一次.求最大报酬. 根据每个人的位置dp,设$f[i] ...