`
JohnShen0708
  • 浏览: 59440 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery,JavaScript创建链接并模拟点击

 
阅读更多

用JQuery创建一个a标签,在设定a标签的属性后,再用JQuery模拟点击一下该链接。我写了一段代码但不知为何不能触发点击。代码如下:

 

<html>  
<head>  
<script type="text/javascript" src="jquery-1.7.js"></script>  
<script type="text/javascript">  
function clickMe() {  
    var $aa = $('<a></a>');  
    $aa.attr('href','www.sohu.com');  
    $aa.attr('target','_blank');  
    alert($aa.attr('href'));    //$aa.click();  
    $aa.trigger('click');  
}  
</script>  
</head>  
<body>  
<input type="button" id="btn" value="Click Btton" onclick="clickMe()"/>  
</body>  
</html> 

原来我以为可以直接 用click()函数,结果不行,然后我又改成了trigger()函数,还是不行。

 

有人提议改成javascript的click而不是JQuery的click,代码如下:

 

<html>  
<head>  
<script type="text/javascript" src="jquery-1.6.4.js"></script>  
<script type="text/javascript">  
function clickMe() {  
    var $aa = $('<a>');  
    $aa.html('sohu');  
    $('#btn').parent().append($aa);  
    $aa.attr('href','http://www.sohu.com');  
    $aa.attr('target','_blank');  
    $aa.get(0).click();  
}  
</script>  
</head>  
<body>  
<input type="button" id="btn" value="Click Btton" onclick="clickMe()"/>  
</body>  
</html>

这样做确实可以,但是有一个问题,在IE和FF下,这段代码好使;但是在chrome下,点击事件失效。

有人专门做了些实验,在“JavaScript模拟用户单击事件”做了说明。Chrome确实存在这个问题。

 

因此把代码改成如下:

 

<html>  
<head>  
<script type="text/javascript" src="jquery-1.6.4.js"></script>  
<script type="text/javascript">  
function clickMe() {  
    var $aa = $('<a>');  
    $aa.html('sohu');  
    $('#btn').parent().append($aa);  
    $aa.attr('href','http://www.sohu.com');  
    $aa.attr('target','_blank');  

    if($.browser.msie || $.browser.mozilla) {
        $aa.get(0).click();  
    }else {
    	window.open($aa.attr('href'), $aa.attr('target'));
    }
}  
</script>  
</head>  
<body>  
<input type="button" id="btn" value="Click Btton" onclick="clickMe()"/>  
</body>  
</html> 

虽然window.open()方法会可能被浏览器屏蔽,不过这是目前我找到的相对较好的做法。

 

 

 

分享到:
评论

相关推荐

    jquery模拟

    1. **创建XMLHttpRequest对象**: 这是所有AJAX请求的基础,我们需要用JavaScript创建一个新的XMLHttpRequest实例。 2. **配置请求**: 设置请求的URL、数据、HTTP方法(这里是POST)以及任何其他相关选项,如请求头、...

    81、jQuery模拟iPhone获取WiFi网络列表代码

    【标题】:“81、jQuery模拟iPhone获取WiFi网络列表代码”这一主题主要涉及的是使用JavaScript库jQuery来模拟iOS设备上获取WiFi网络列表的功能。在Web应用中,有时我们需要模拟原生移动设备的一些特性,比如在网页上...

    jQuery模拟iPhone获取WiFi网络列表代码.zip

    在本文中,我们将深入探讨如何使用...总之,通过使用jQuery,我们可以创建出一个互动性强、视觉效果逼真的模拟iPhone获取WiFi网络列表的Web应用。理解并实践这些技术将有助于提升开发者在前端开发领域的技能和创造力。

    JavaScript jQuery 中定义数组与操作及jquery数组操作

    在 jQuery 中,虽然 jQuery 自身并不直接提供对数组操作的扩展,但它可以与 JavaScript 的数组方法一起使用。jQuery 对象经常被用作类似数组的对象,可以通过索引来访问元素,例如 `$(selector)[index]`。同时,...

    JQuery流程图

    例如,你可以用jQuery来改变元素的显示状态(隐藏或显示)、设置过渡效果以模拟流程的流动,或者通过绑定事件来响应用户的交互,如点击按钮进行下一步操作。 接下来是“processDesigner”。这个名字暗示着可能是一...

    简单的用jquery仿a锚点连接的效果

    总结来说,这个示例展示了如何利用jQuery创建一个更加平滑和可定制的A锚点连接体验。通过监听点击事件,阻止默认的跳转行为,然后使用动画效果平滑滚动到目标位置,我们可以实现比传统HTML锚点连接更丰富的交互效果...

    jquery实现的九宫格模拟Android屏幕解锁插件patternlock源码.zip

    本资源“jquery实现的九宫格模拟Android屏幕解锁插件patternlock源码.zip”提供了使用jQuery创建的一个功能,即模拟Android设备上的九宫格屏幕解锁界面。以下是对这个插件的详细解释和相关知识点的展开。 首先,...

    Stomp+Sockjs+Jquery

    jQuery提供了一种简单的方式来操作DOM元素,执行AJAX请求,并创建复杂的用户界面。 其次,**SockJS** 是一个JavaScript库,它为浏览器提供了WebSocket的模拟实现。由于WebSocket协议在某些旧的或受限的环境中可能不...

    jquery九宫格模拟Android屏幕解锁插件patternlock

    **jQuery九宫格模拟Android屏幕解锁插件PatternLock详解** 在网页交互设计中,为了提供更贴近用户习惯的体验,有时我们需要将移动端Android设备的九宫格解锁方式移植到Web应用上。`PatternLock`就是一个专门为此...

    JQuery1.8离线文档 chm

    3. **事件处理**:jQuery提供了方便的事件绑定和触发机制,如`$("button").click(function() {...})`绑定点击事件,`$("div").trigger("mouseover")`则可以模拟鼠标悬停事件。 4. **动画效果**:jQuery的动画功能...

    jQuery手机图案九宫格密码锁设置代码

    3. **jQuery初始化**:在`&lt;head&gt;`部分引入jQuery库(如果尚未包含),然后编写JavaScript代码来处理用户的点击事件。当用户点击单元格时,记录下所选的路径。 4. **记录路径**:当用户点击单元格时,我们需要记录...

    拓扑图jquery插件

    拓扑图jQuery插件是一种用于在网页中展示网络拓扑结构的工具,它结合了JavaScript的动态性与jQuery库的强大功能,使得用户可以方便地创建、编辑和展示各种复杂的网络拓扑图。在这个名为"topology-jquery-master"的...

    PHP+jQuery实现翻板抽奖.zip_jquery_php+jquery 抽奖_抽奖_抽奖 php

    “js”目录可能包含除jQuery库之外的其他JavaScript文件,比如自定义的JavaScript函数,用于处理抽奖逻辑或者与服务器的通信。 总的来说,这个项目涵盖了以下关键知识点: 1. jQuery基础:选择器、事件处理、动画...

    前端项目-jquery-mockjax.zip

    通过使用Mockjax,开发者可以在本地环境中创建各种模拟的HTTP响应,无需依赖真实服务器或网络连接,从而加速开发进程并简化测试。 ### Mockjax的基本使用 1. **安装与引入** 要使用`jQuery Mockjax`,首先需要...

    JQuery简单实例(C#,HTML,.NET.JQUERY)(工程源码)

    JQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个实例中,JQuery将用于处理前端的用户交互,如当用户在输入框中输入用户名后,触发异步...

    jQuery幸运大转盘-jQuery+PHP抽奖程序

    jQuery是一个强大的JavaScript库,简化了JavaScript的DOM操作、事件处理以及动画效果。在幸运大转盘项目中,jQuery主要负责页面元素的操作和动态效果的实现。 1. DOM操作:jQuery提供了简洁的API,如`$(selector)....

    jQuery可生成循环流程图表特效.zip

    在创建流程图时,可以使用`&lt;div&gt;`、`&lt;svg&gt;`或`&lt;canvas&gt;`元素来表示流程图的各个节点和连接线。通过添加特定的类名或ID,我们可以方便地通过CSS和JavaScript进行选中和操作。 CSS(层叠样式表)用于美化这些元素,...

    基于jQuery的Ajax聊天室程序

    在本实例中,可能使用的是Ajax长轮询,即客户端发送请求到服务器,服务器保持连接直到有新的消息,然后立即返回这些消息,客户端接收到后立即清除并再次发起请求,形成持续的循环,模拟实时更新的效果。 6. **用户...

Global site tag (gtag.js) - Google Analytics