筆記-JavaWeb學習之旅16
加強對象的功能
動態代理：在內存中造成代理類javascript
實現步驟：css
- 代理對象和真實對象實現相同的接口
- 代理對象 = Proxy.newProxyInstance();
- 使用代理對象調用真實對象的方法
- 加強方法
加強方式：html
- 加強參數列表
- 加強返回值類型
- 加強方法體執行邏輯
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框架java
JQuery對象和JS對象區別於裝換jquery
<!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屬性值匹配的元素dom
類選擇器 $(".class的屬性值"):得到與指定的class屬性值匹配的元素ide
並集選擇器 $("選擇器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>
相關文章
- 1. 筆記-JavaWeb學習之旅14
- 2. 筆記-JavaWeb學習之旅9
- 3. 筆記-JavaWeb學習之旅17
- 4. 筆記-JavaWeb學習之旅13
- 5. 筆記-JavaWeb學習之旅10
- 6. 筆記-JavaWeb學習之旅7
- 7. 筆記-JavaWeb學習之旅12
- 8. 筆記-JavaWeb學習之旅15
- 9. 筆記-JavaWeb學習之旅18
- 10. 筆記-JavaWeb學習之旅11
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 筆記-JavaWeb學習之旅14
- 2. 筆記-JavaWeb學習之旅9
- 3. 筆記-JavaWeb學習之旅17
- 4. 筆記-JavaWeb學習之旅13
- 5. 筆記-JavaWeb學習之旅10
- 6. 筆記-JavaWeb學習之旅7
- 7. 筆記-JavaWeb學習之旅12
- 8. 筆記-JavaWeb學習之旅15
- 9. 筆記-JavaWeb學習之旅18
- 10. 筆記-JavaWeb學習之旅11