<!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>