jquery append事件会执行内容的script脚本;
eg:
$('#test').append("<script>alert(123);</script>")
查看Jquery源码:
function domManip( collection, args, callback, ignored ) { // Flatten any nested arrays args = concat.apply( [], args ); var first, node, hasScripts, scripts, doc, fragment, i = 0, l = collection.length, iNoClone = l - 1, value = args[ 0 ], isFunction = jQuery.isFunction( value ); // We can't cloneNode fragments that contain checked, in WebKit if ( isFunction || ( l > 1 && typeof value === "string" && !support.checkClone && rchecked.test( value ) ) ) { return collection.each( function( index ) { var self = collection.eq( index ); if ( isFunction ) { args[ 0 ] = value.call( this, index, self.html() ); } domManip( self, args, callback, ignored ); } ); } if ( l ) { fragment = buildFragment( args, collection[ 0 ].ownerDocument, false, collection, ignored ); first = fragment.firstChild; if ( fragment.childNodes.length === 1 ) { fragment = first; } // Require either new content or an interest in ignored elements to invoke the callback if ( first || ignored ) { scripts = jQuery.map( getAll( fragment, "script" ), disableScript ); hasScripts = scripts.length; // Use the original fragment for the last item // instead of the first because it can end up // being emptied incorrectly in certain situations (#8070). for ( ; i < l; i++ ) { node = fragment; if ( i !== iNoClone ) { node = jQuery.clone( node, true, true ); // Keep references to cloned scripts for later restoration if ( hasScripts ) { // Support: Android<4.1, PhantomJS<2 // push.apply(_, arraylike) throws on ancient WebKit jQuery.merge( scripts, getAll( node, "script" ) ); } } callback.call( collection[ i ], node, i ); } if ( hasScripts ) { doc = scripts[ scripts.length - 1 ].ownerDocument; // Reenable scripts jQuery.map( scripts, restoreScript ); // Evaluate executable scripts on first document insertion for ( i = 0; i < hasScripts; i++ ) { node = scripts[ i ]; if ( rscriptType.test( node.type || "" ) && !jQuery._data( node, "globalEval" ) && jQuery.contains( doc, node ) ) { if ( node.src ) { // Optional AJAX dependency, but won't run scripts if not present if ( jQuery._evalUrl ) { jQuery._evalUrl( node.src ); } } else { jQuery.globalEval( ( node.text || node.textContent || node.innerHTML || "" ) .replace( rcleanScript, "" ) ); } } } } // Fix #11809: Avoid leaking memory fragment = first = null; } } return collection; }
hasScripts帮你执行脚本。
如果不想执行(防xss注入之类):
1、转义<script>标签
2、过滤掉<script>
3、<script type='text'>
相关推荐
- **引入jQuery**:在HTML文件中通过`<script>`标签引入jQuery库,通常从CDN链接加载,例如:`<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>`。 - **编写jQuery代码**:使用`$(document)....
"jQuery的使用,简化script函数"这个主题主要涵盖了如何利用jQuery来优化和简化传统的JavaScript代码。 首先,jQuery的核心在于选择器(Selectors),它允许开发者以CSS样式的方式选取HTML元素,如`$("#myID")`选取...
- **遍历**:JQuery 提供了`.each()`函数,允许开发者遍历集合中的每个元素并执行特定操作。 - **操作属性**:通过`.attr()`和`.removeAttr()`,可以方便地设置或移除元素的属性。 - **插入/删除元素**:`.append...
比如,使用`$(document).ready()`来确保文档加载完毕后再执行代码,或者使用`$('selector').action()`来选择元素并执行相应的动作,如`click()`、`append()`等。 jQuery在JavaScript JSP HTML的环境中起着桥梁的...
确保引入jQuery的脚本位于`<head>`标签内或`<body>`标签的底部,以确保在其他JavaScript代码执行前jQuery已经加载完成。 四、jQuery的基本用法 1. DOM操作: jQuery的语法以"$"开头,如`$(selector)`表示选择元素...
- 引入jQuery库:在HTML文件中通过`<script>`标签引入jQuery文件,如`<script src="jquery-x.x.x.min.js"></script>`,确保引入位置在所有依赖jQuery的脚本之前。 - jQuery选择器:使用 `$` 符号进行DOM元素选择,...
1. **引入库**:在HTML中通过`<script>`标签引入jQuery 1.12.4.js文件,确保在其他依赖jQuery的脚本之前加载。 2. **$(document).ready()**:页面加载完成后执行的函数,确保DOM完全加载后才运行jQuery代码。 3. *...
要在网页中使用jQuery,通常需要在HTML文档的`<head>`部分引入jQuery库的脚本文件,然后在`<script>`标签中编写jQuery代码。例如: ```html <!DOCTYPE html> <title>jQuery示例 <script src="jquery-1.7.2....
在HTML文件中,通常通过`<script>`标签引入jQuery库,如`<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>`,然后才能使用jQuery的方法。 8. **示例代码**: 一个简单的jQuery代码示例: `...
在《JQuery1.2.chm》中,`jquery.js`文件是jQuery库本身,它是实际应用中引入jQuery的脚本文件。在网页中,通常通过在`<head>`或`<body>`标签内加入`<script>`标签来引用这个文件,如: ```html <script src="jquery...
使用 `$(document).ready()` 或 `$(function() {...})` 缩短 DOM 加载与脚本执行的时间差,以及使用事件委托可提高效率。 10. **学习资源**: 学习 jQuery,你可以参考官方文档,参与在线课程,或者阅读各种教程书籍...
例如,使用`$(document).ready()`或简写形式`$(function() {...})`确保在页面加载完成后执行jQuery代码: ```html <script> $(function() { // 在这里编写jQuery代码 $("button").click(function() { alert(...
1. **引入jQuery**:可以将jQuery库通过CDN链接或者本地文件引入,如`<script src="jquery-3.4.1.min.js"></script>`。 2. **选择器与遍历**:通过选择器选取元素后,可使用`.each()`遍历,如`$('div').each...
确保在其他自定义脚本之前加载jQuery,以利用其提供的各种功能。 总之,jQuery 1.12.4.min.js作为一款成熟的JavaScript库,以其强大的功能和良好的兼容性,为Web开发者提供了极大的便利。在系统漏洞升级和维护旧...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 这使得我们可以利用jQuery的简便API来处理DOM元素和进行AJAX通信。 二、添加功能 1. ASP服务器端处理:创建一个表单,收集用户输入,...
- **性能优化**:在3.1.1版本中,jQuery对一些常用函数进行了性能优化,如`$.each()`和`$.ajax()`,提升了脚本执行速度。 - **ES6支持**:jQuery 3.x 开始支持ES6语法,这使得开发者可以使用新的JavaScript特性进行...
1. **引入方式**:通常我们会通过`<script>`标签引入jQuery库,确保在其他依赖jQuery的脚本之前加载。 2. **命名冲突**:为了避免与现有JavaScript代码产生命名冲突,jQuery提供了`$`和`jQuery`两个别名,可以使用`...
通常会将其放置在`<head>`部分,或者在`<body>`底部,以确保页面元素加载完毕后再执行jQuery代码。 2. **jQuery的选择器** jQuery提供了一套强大的选择器系统,可以方便地选取DOM元素。例如,`$("#id")`用于选取ID...
确保在其他依赖jQuery的脚本之前引入,以便正确执行。 总的来说,`jquery.min.js`是Web开发中不可或缺的工具,它让JavaScript编程变得更为简洁、高效,极大地推动了前端开发的进步。无论你是初学者还是经验丰富的...
接下来,我们引入jQuery库(这里使用的是CDN链接)和自定义的`imagePreview.js`脚本,这个脚本将包含实现图片预览功能的代码。 在`js/imagePreview.js`文件中,我们可以编写以下JavaScript代码: ```javascript $...