JQuery包装集元素整理
更新:HHH   时间:2023-1-7


 首先说一下利用JQuery函数动态创建元素,

  1. <div id="testDiv">测试图层</</span>div>  
  2. <script type="text/javascript"> 
  3. document.getElementByIdx_x_x("testDiv").innerHTML = ""border:solid 1px #FF0000\">动态创建的div 
  4. "; 
  5. </script> 

在页面上动态添加了一个div,但是这种创建是不可取的,因为这是在页面还正在加载的时候动态创建的,改变了页面结构,如果在网速太慢或者响应时间过长的情况下会报脚本错误,也就是说永远不要在页面加载时改变页面的DOM模型。
正确建法:
$(function(){
$("
动态创建的DIV
");
})
根据HTML原始字符串动态创建DOM模型。
如果html字符串是没有属性的元素时,JQuery在内部使用了document_createElement()方法来创建。
$("").css("border","1px solod #c1c1c1").html("动态创建的DIV").appendTo(testDiv));
//appendTo()方法是在被选元素的末尾插入内容。
否则JQuery内部用innerHtml方法来创建:
$("
动态创建的DIV
").appendTo(testDiv);
上面只是创建元素的方式,下面我们来在页面加载完毕后添加元素。
利用JQuery会简便许多( 在图像和外部资源加载之前执行函数):
$(function)(){
$("#testDiv").html("
动态创建的DIV
");
}
利用JQuery$()可以绑定多个函数,如果使用传统的window.onload()只会调用一个函数。
————————————————
既然创建了元素,那么就要把这些元素封装到JQuery的包装集中,然后就可以在包装集中调用这些函数,用来改变原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集。
比如过滤filtering中的map(),是将一组元素转换成数组(不论是否是元素数组),这个方法可以将所选元素里的值建立一个列表,或者是数组形式。

  1. $("p").append($("input").map(function(){ 
  2. return $(this).val(); 
  3. }).get().join(",")); 

//append()和appendTo()
比如$("
动态创建的DIV
").appendTo(testDiv);
使用这个方法其实是颠倒了常规的$(A).append(B),即不是将B添加到A中,而是将A添加到B中。

返回web开发教程...