笔记-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 ...
随机推荐
- WPF区时浏览小程序
在深圳已经工作了一个月了,之前做WinForm的,现在做WPF,每天加班到晚上10点,比之前累.学习新技术也是有个过程的,我就从基础的语法和 界面布局做起.这是我仿着做一个小软件. 效果图赏析 在原基 ...
- python- 双层装饰器 字符串格式化 python模块 递归 生成器 迭代器 序列化
1.双层装饰器 #!/usr/bin/env python3 # -*- coding: utf-8 -*- # author:zml LOGIN_INFO = False IS_ADMIN = Fa ...
- python做图笔记
1. 工具选择 了解了基本python,rodeo,anaconda套件这三种工具. (1)基本python,下载安装python的最新版(目前是python3.7).注意要使用安装版.安装好后,一般 ...
- 勤于思考：jQuery Validation 在IE7（兼容模式）下出现“找不到成员”的脚本错误
今天在调试IE10下使用IE6判断脚本出现错误,处理后说IE7也不行,调试后则会出现以下错误: SCRIPT3: 找不到成员. jquery171.js, 行2582 字符4 其实开始我认为是jque ...
- hdu 6103(Kirinriki)
题目链接:Kirinriki 题目描述: 找两个不重叠的字符串A,B. 使得dis(A,B)<=m;\(dis(A,B)= \sum _{i=0}^{n-1} \left | A_i-B_{n- ...
- codeforces 659D D. Bicycle Race(水题)
题目链接: D. Bicycle Race time limit per test 1 second memory limit per test 256 megabytes input standar ...
- codeforces 660B B. Seating On Bus(模拟)
题目链接: B. Seating On Bus time limit per test 1 second memory limit per test 256 megabytes input stand ...
- codeforces 609D D. Gadgets for dollars and pounds(二分+贪心)
题目链接: D. Gadgets for dollars and pounds time limit per test 2 seconds memory limit per test 256 mega ...
- POJ1195Mobile phones （从二维树状数组到cdq分治）
Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...
- java面试题06
题目: 数据库 1. 表名:g_cardapply 字段(字段名/类型/长度): g_applyno varchar 8://申请单号(关键字) g_applydate bigint 8://申请日期 ...