下载文档原格式
jquery–页⾯重新加载的ScrollTop不起作⽤（可能的脚本冲突）
我正在写这个页⾯
我添加了这个以使其在有⼈刷新页⾯时滚动到顶部但似乎不起作⽤,我想知道它是否与我正在使⽤的其他滚动脚本冲突.
<script type="text/javascript">
$(document).ready(function(){
$(this).scrollTop(0);
});
</script>
任何线索？
P.s.：正在进⾏的⼯作：凌乱的脚本
解决⽅法
试试这个：
$(document).ready(function() {
$("html,body").animate({scrollTop: 0},100); //100ms for example
});
或这个：
window.onload = function() {
setTimeout (function () {
scrollTo(0,0);
},100); //100ms for example
}
或这个：
$(window).on('beforeunload',function() {
$(window).scrollTop(0);
});
浏览器往往会在重新加载时跳回到最后⼀个滚动位置,这在许多情况下都是有意义的.似乎这个⾃动跳转在onload事件之后⽴即被触发(但是我们不知道发⽣这种情况的确切时刻),所以使⽤⼀些延迟或让浏览器在页⾯重新加载之前滚动到顶部是有意义的.
总结
以上是为你收集整理的全部内容，希望⽂章能够帮你解决所遇到的程序开发问题。
jQueryMobile漏洞会有跨站脚本攻击风险概述根据国外媒体的最新报道，⾕歌公司的安全⼯程师Eduardo Vela在jQuery Mobile框架中发现了⼀个安全漏洞，这个漏洞将会让所有使⽤了jQuery Mobile的⽹站暴露于跨站脚本攻击风险之下。
jQuery Mobile项⽬（jQuery框架中的⼀个组件）是⼀个基于HTML5的开发框架，在它的帮助下，开发者可以设计出能够适配⽬前主流移动设备和桌⾯系统的响应式Web站点以及应⽤程序。
实际上，jQuery Mobile不仅可以为主流移动平台提供jQuery的核⼼库，⽽且它也是⼀个较为完整统⼀的jQuery移动UI框架。
根据jQuery开发团队的介绍，⽬前全球范围内⼤约有⼗五万个活动站点是采⽤jQuery Mobile开发的。
jQuery Mobile是⽬前⼀个⾮常热门的项⽬，下图显⽰的是Stack Overflow上关于jQuery Mobile的提问数量增长情况：下图显⽰的是jQuery Mobile的使⽤统计情况：漏洞描述⼏个⽉之前，当时的Vela正在苦苦寻找内容安全策略（CSP）的绕过⽅法，但是在研究的过程中他注意到了jQuery Mobile的⼀种⾮常有意思的⾏为。
jQuery Mobile会从location.hash属性中获取任意的URL地址，然后再⽤innerHTML来处理这个URL地址所返回的响应，⽽在某些特定条件下，攻击者就可以利⽤它的这种特性来攻击⽬标⽹站。
当他发现了这种奇怪的⾏为之后，他便开始继续研究，以确定⽹站是否存在跨站脚本漏洞。
Vela在对这个XSS漏洞进⾏了深⼊分析之后给出了该漏洞的运⾏机制，⼤致如下：1. jQuery Mobile⾸先会检查location.hash属性值。
2. 如果location.hash中的数据看起来跟URL地址差不多的话，它会尝试将其添加到浏览历史记录之中（通过history.pushuState实现），然后再利⽤XMLHttpRequest来对其进⾏请求访问。
使用jQuery实现一个动态表单
使用jQuery实现动态表单，可以是一个复杂的任务，但可以
很容易地实现一个简单的动态表单。
首先要做的就是创建HTML表单元素，包括文本输入框、下拉框、单选框、多选
框等。
然后，需要使用jQuery来进行动态表单的编写，包括
绑定事件和异步请求。
首先，我们要使用jQuery函数.on()来绑定事件，例如当用户
填写完表单信息时，响应函数（.on('submit'））会被调用。
然后，根据用户所填写的表单信息，我们可以通过发布异步请求访问服务器端数据库，以获取最新的数据。
最后，使用
jQuery函数.append()，从服务器端获取的数据可以在动态表单
中显示。
最后，要特别注意的是，动态表单的实现还依赖于后端数据库，因此，在执行这项任务时要确保与后端连接并工作正常。
总之，使用jQuery实现一个动态表单可以通过绑定事件和发布异步
请求实现，只要遵循上述步骤即可实现该动态表单。
jQueryXSS漏洞漏洞成因：jQuery中过滤⽤户输⼊数据所使⽤的正则表达式存在缺陷，可能导致location.hash跨站脚本攻击。
演⽰程序：<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Jquery XSS</title><script type="text/javascript" src="https:///jquery/1.6.1/jquery.js"></script><!-- <script type="text/javascript" src="https:///jquery/1.9.1/jquery.js"></script> --><!-- <script type="text/javascript" src="https:///jquery/1.11.1/jquery.js"></script> --><!-- <script type="text/javascript" src="https:///jquery/1.12.1/jquery.js"></script> --><script>$(function () {// #9521// #11290$(location.hash);// #11974$('#bug').on('click', function () {$.parseHTML("<img src='z' onerror='alert(\"bug-11974\")'>");return false;});})</script></head><body><h1>jQuery with XSS</h1><h2>Demo：</h2><p style="color:red;">Note: Source code changes jQuery version，As long as there is no bullet window, there will be no problem.！</p> <ul><li><a href="#<img src=/ onerror=alert(1)>" target="_blank">bug-9521</a> => <ahref="https:///ticket/9521" target="_blank">ticket</a></li><li><a href="#p[class='<img src=/ onerror=alert(2)>']" target="_blank">bug-11290</a> => <ahref="https:///ticket/11290" target="_blank">ticket</a></li><li><a href="#11974" id="bug">bug-11974</a> => <a href="https:///ticket/11974"target="_blank">ticket</a></li></ul><h2>Test version：</h2><ul><li><a href="/jquery/test/" target="_blank">test result</a></li></ul><h2>Safe version：</h2><ul><li>1.12.0, 1.12.1 </li><li>2.2.0, 2.2.1</li><li>3.0.0, 3.0.1, 3.1.0, 3.1.1</li></ul></body></html>jQuery XSS Payload:#<img src=/ onerror=alert(1)>#p[class='<img src=/ onerror=alert(2)>']弹窗成功图：。
jquerycheckbox勾选的bug问题解决⽅案与分析在做项⽬的时候遇到个jQuery checkbok复选框的选中取消的BUG，咨询了⼤神，才闹明⽩怎么回事，这⾥记录下来，分析给⼤家。
先上代码：复制代码代码如下:<form>你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br /><input type="checkbox" name="items" value="⾜球" />⾜球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="⽻⽑球" />⽻⽑球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="send" value="提交" /></form>复制代码代码如下:$("#CheckedAll").click(function () {if ($(this).is(":checked")) {$("[name=items]:checkbox").attr("checked", true);} else {$("[name=items]:checkbox").attr("checked", false);}});第⼀次执⾏，没问题，但第⼆次执⾏就有问题了，选择不了解决办法：把attr()换成prop()复制代码代码如下:$("#CheckedAll").click(function () {if ($(this).is(":checked")) {$("[name=items]:checkbox").prop("checked", true);} else {$("[name=items]:checkbox").prop("checked", false);}});PS:prop()和attr()区别：最近在iteye的新闻中看到jQuery已经更新到了1.6.1。
jquery动态添加元素⽆法触发绑定事件的解决⽅案。
jquery动态添加元素⽆法触发绑定的事件的解决⽅案。
╭(●｀∀´●)╯⼆狗最近在⼯作中遇到⼀个问题，即当⽤jquery动态添加元素后，发现给动态添加的元素却⽆法触发事件（╯#-_-)╯╧═╧ ( ╯#-_-)╯┴—┴。
后来在⽹上查阅了⼀些资料，发现原来要这样处理乛◡乛：先上我出错的代码:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap.min.css"><script src="///jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ //这⾥是动态添加元素$(".add").click(function(){var btn = $("<button class='newBtn btn btn-default'>新按钮</button>");$("body").append(btn);}) //这⾥是为添加的元素添加事件$(".newBtn").click(function(){alert("这⾥是新添加的元素触发的事件");})})</script></head><body><button class=" add btn btn-default">添加按钮</button></body></html>奉上我的解决⽅法，⼤神们勿喷哦:. ヽ(｡◕‿◕｡) .:｡+⽅法⼀：绑定live事件(live事件只在jquery1.9以下才⽀持，⾼版本不⽀持)。
关于jquery中动态增加select,事件⽆效的快速解决⽅法近来做项⽬，⽤的jquery1.6.2库，当动态增加div 及select时，事件却不起作⽤。
查了⼀些资料，发现bind事件：向匹配元素附加⼀个或更多事件处理器。
⽽live事件：为当前或未来的匹配元素添加⼀个或多个事件处理器。
其资料如下：【bind和live的区别】live⽅法其实是bind⽅法的变种，其基本功能就同bind⽅法的功能是⼀样的，都是为⼀个元素绑定某个事件，但是bind⽅法只能给当前存在的元素绑定事件，对于事后采⽤JS等⽅式新⽣成的元素⽆效，⽽live⽅法则正好弥补了bind⽅法的这个缺陷，它可以对后⽣成的元素也可以绑定相应的事件。
那么live⽅法的这个特性是怎么实现的呢？下⾯来探讨⼀下其实现原理。
live⽅法之所以能对后⽣成的元素也绑定相应的事件的原因归结在“事件委托”上⾯，所谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进⾏使⽤。
live⽅法的处理机制就是把事件绑定在DOM树的根节点上，⽽不是直接绑定在某个元素上。
举⼀个例⼦来说明：$(".clickMe").live("click",fn);$("body").append("<div class='clickMe'>测试live⽅法的步骤</div>");当我们点击这个新增的元素时会依次发⽣如下步骤：（1）⽣成⼀个click事件，传递给div来做处理（2）由于没有事件直接绑定在div上，所以事件直接冒泡到DOM树上（3）事件不断冒泡，直到DOM树的根节点上，默认情况下，根节点上就绑定了这个click事件（4）执⾏由live绑定的click事件（5）检测绑定事件的对象是否存在，判断是否需要继续执⾏绑定的事件。
检测事件对象是通过检测$(event.target).closest('.clickMe') 能否找到匹配的元素来实现的。
jquery监听页⾯滚动条滚动事件⼀、jQuery检测浏览器window滚动条到达底部jQuery获取位置和尺⼨相关函数：(document).height() 获取整个页⾯的⾼度(window).height() 获取当前也就是浏览器所能看到的页⾯的那部分的⾼度。
这个⼤⼩在你缩放浏览器窗⼝⼤⼩时会改变，与document是不⼀样的scrollTop() 获取匹配元素相对滚动条顶部的偏移。
scrollLeft() 获取匹配元素相对滚动条左侧的偏移。
scroll([[data],fn]) 当滚动条发⽣变化时触犯scroll事件jQuery检测滚动条到达底部代码：$(document).ready(function() {$(window).scroll(function() {if ($(document).scrollTop()<=0){alert("滚动条已经到达顶部为0");}if ($(document).scrollTop() >= $(document).height() - $(window).height()) {alert("滚动条已经到达底部为" + $(document).scrollTop());}});});⼆、jQuery检测div中滚动条到达底部上半篇介绍了jQuery检测浏览器window滚动条到达底部，其实还并不理解scrollTop和scrollHeight概念，通常滚动条都是放在div中的。
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;"><div style="height:750px;"></div></div>由于内部的div标签⾼度⽐外部的长，并且外部的div允许⾃动出现垂直滚动条，所以⽤浏览器打开后，可以看到垂直滚动条。
jQueryhtml（）⽅法使⽤不了⽆法显⽰内容的问题$("#content").html(data.content);$("#content")[0].innerHTML = data.content;今天遇到jquery中的html⽅法使⽤不了，只能⽤完最基本的innerHTML把内容展⽰出来。
具体原因还没找到，肯定跟内容有关，展⽰不了的html放上来供以后检查原因，是我收到csdn的⼀封邮件。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>智能硬件周刊 - 第4期</title><style type="text/css">a:link {color: #333;text-decoration: none;}a:hover {color: #c00;}span.hot {font-weight: bold;}.button * {vertical-align: middle;}</style></head><body><div><table align="center" border="0" cellpadding="0" cellspacing="0" width="760"><tbody><tr><td width="540"><a href="/m/news/newsletter/index/13" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img style="cursor: pointer;border: 0px;" alt="" src="/article/201406/1 <td width="30"></td><td width="190" style="font-size: 12px; font-family: Microsoft Yahei; line-height: 40px; padding-right: 3px" align="right">2014-07-29 第<span style="color: #c00; text-decoration: none;">4</span>期</td></tr><tr><td colspan="3" bgcolor="#cc0000" height="5"></td></tr><tr><td width="540" valign="top"><!-- 资讯速递 --><h1 style="font-family: Microsoft Yahei; font-size: 20px; margin: 20px 0 0 0; font-weight: normal; border-bottom: solid 1px #d1d1d1; color: #c00; padding-bottom: 5px"><img style="margin-right: 5px" alt="" src="/uploads/allimg/120413/118_ </h1><dl style="padding: 6 0 0 0;margin:0px;clear: both;"><!-- 判断图⽚是否存在 --><img src="/uploadfile/logoimg/image/20140729/20140729111725_67948_logo.jpg" border="0" style="float:left;padding: 15px 10px 15px 0;width: 160px;height: 110px;"><dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"><a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none" href="/article/2014-07-28/2820881" rel="external nofollow" rel="external nofollow" target="_blank"><span class="hot">智能硬件⽣态未成，打造平台为时尚早？</span></a></dt><dd style="color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin: 0px;">当前的智能硬件产业发展是由创业公司探路，巨头纷纷跟进打造开放平台。
