增强对象的功能
动态代理：在内存中形成代理类
实现步骤：
- 代理对象和真实对象实现相同的接口
- 代理对象 = 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{
180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
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{
180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
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{
180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
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>