<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 事件</title> <script src='jquery-3.3.1.min.js'></script> <style> #out{ width:300px; height:300px; background: blue; border-radius: 50%; position:absolute; } #mid{ width:200px; height:200px; background: yellow; border-radius: 50%; position: absolute; left:50px; top:50px; } #inr{ width:100px; height:100px; background: purple; border-radius: 50%; position: absolute; left:50px; top:50px; } </style> </head> <body style='height:2000px;width:2000px'> <a href="http://www.baidu.com" id='as'>点击百度</a> <div id='out'> <div id='mid'> <div id='inr'></div> </div> </div> </body> <script type="text/javascript"> $('#as').click(function(){ //jquery中使用location格式 //location.href = '' location.href = 'http://www,baidu.com'; //replace //replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 //此处用于替换掉replace location.replace('http://www.sina.com.cn'); //return false用于阻止默认行为 //如果会产生事件蔓延或事件冒泡,使用return可以组织该事件冒泡或事件蔓延 return false; //事件冒泡/蔓延,是指设置了一个总体集合给定了某些样式,而子元素的样式也被影响 //使用return false 的方式,可以有效的阻止时间冒泡; $('div').click(function(){ $(this).css('background','pink'); return false; }) }) </script> </html>
点击 "运行实例" 按钮查看在线实例