<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>點擊打開鏈接總結</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://i0.sinaimg.cn/dy/js/jquery/jquery-1.7.2.min.js"></script>
</head>
<body>
<a href="http://www.baidu.com" id="a">A點擊</a><br/><br/>
<button id="btn">觸發A點擊</button><br/><br/>
<div οnclick="location.href='http://www.baidu.com';">當前網頁打開新連接1</div><br/>
<div οnclick="window.open('http://www.baidu.com');">新窗口打開連接</div><br/>
<div οnclick="window.open('http://www.baidu.com','_self');">當前網頁打開連接2</div><br/>
<a onclick = demo1() style='color:red'>點擊後當前頁面跳轉</a><br/><br/>
<button id="btn1" onclick = "demo2();">點擊後新窗口打開，可以寫成：οnclick='demo2()'或οnclick=demo2()</button><br/><br/>
<button id="btn2" onclick = "demo3();">點擊後返回上一頁</button><br/><br/>
<input id="btn3" type="button" value="點我3，jquery使用click綁定事件" /><br/><br/>
<input id="btn4" type="button" value="點我4，jquery使用bind綁定事件" /><br/><br/>
<table>
<tr id="processBar" name="123"><td>ajax動態綁定元素1</td><td>ajax動態綁定元素2</td></tr>
</table>
</body>
<script>
//jQuery觸發a標籤的click事件
$("#btn").click(function(){
// 這種方式不能觸發a的click事件，原因是jQuery的click觸發的是元素onClick方法，而不是click點擊事件
$("#a").click();
//解決方法1：原生JS不受影響
document.getElementById("a").click();
// 解決方法2：將jQuery對象轉換成原生對象
$("#a")[0].click();
});
function demo1(){
alert("hello");
//當前頁面跳轉百度
window.location.href="http://www.baidu.com";
}
function demo2(){
//新窗口打開
window.open('http://www.baidu.com');
}
function demo3(){
//返回上一頁
window.history.back(-1);
}
$("#btn3").click(function(){
alert("jquery使用click綁定事件");
})
$("#btn4").bind("click",function(){
alert("jquery使用bind綁定事件");
})
//支持ajax等動態綁定元素的點擊事件
$(document).on("click", "#processBar", function(){
var url = "https://www.baidu.com/s?wd="+$(this).attr("name");
window.open(url);
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>測試網頁2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://i0.sinaimg.cn/dy/js/jquery/jquery-1.7.2.min.js"></script>
<style>
.schedule1{
color:blue;
}
.schedule2{
color:red;
}
.schedule3{
color:green;
}
</style>
</head>
<body>
<!-- 選項卡菜單-->
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#day" role="tab" data-toggle="tab">本日</a>
</li>
<li>
<a href="#month" role="tab" data-toggle="tab" id="ITSMMonth">本月</a>
</li>
</ul>
<span class="num" id="monthTotal">${itsmStatisticMonth.sumCount}</span>
<div class="u-chart2" id="chart" href="https://www.baidu.com/" target="_blank">href連接方式</div>
<div class="u-chart2" id="chart" οnclick="window.open('https://www.baidu.com')">onclick+window方式</div>
<span class="u-all f-dfc" οnclick="window.open('https://www.baidu.com')">span標籤跳轉連接</span><br/>
<a class="u-all f-dfc" href="https://www.baidu.com" target="_blank">a標籤跳轉連接</a><br/>
<table>
<tr οnclick="window.open('http://www.baidu.com')"><td>格子1</td><td>格子2</td></tr>
<tr οnclick=demo()><td>οnclick=demo()方法</td><td>格子</td></tr>
<tr id="trr" name="123"><td>$("#trr").click(function(){})方法</td><td>格子</td></tr>
</table>
<button id="btn1" onclick = demo()>點擊後新窗口打開</button><br/><br/>
<span class="schedule schedule1">進行中</span><br/>
<span class="schedule schedule1">已完成</span><br/>
<span class="schedule schedule1">取消</span><br/>
</body>
<script>
//JQ綁定點擊事件
$("#ITSMMonth").click(function(){
//原生JS修改SPAN內容
//document.getElementById("monthTotal").innerHTML= 123;
//JQ修改SPAN內容
$("#monthTotal").html("123");
});
function demo() {
var url = 'http://www.baidu.com';
window.open(url);
};
$("#trr").click(function(){
var url = "https://www.baidu.com/s?wd="+$(this).attr("name");
window.open(url);
});
$(function(){
if($(".schedule").html()=="進行中"){
$(this).attr("class","schedule schedule2");
}else if($(".schedule").html()=="取消"){
$(this).attr("class","schedule schedule3");
}
});
/* window.onload = function () {
$(".schedule schedule1").attr("class","schedule schedule2");
}*/
</script>
</html>
