jQuery核心篇-jQuery()创建元素

根据提供的原始HTML字符串动态的创建DOM元素。(译者注:并返回jQuery对象)

jQuery(html[,ownerDocument])

jQuery(html,attributes)

方法一:html

类型是字符串。

动态创建的HTML字符串。注意该方法会解析HTML,不能解析XML。

ownerDocument

类型是document

新的元素会被创建所在的文档。

方法二:html

类型是字符串。

定义一个简单的单独的HTML元素的字符串(如,<div/>或者<div></div>)

attributes

类型是普通对象。

属性对象,事件和在新创建元素上调用的方法。


创建新元素

如果一个字符串被作为参数传递给了$(),jQuery检查这个字符串是否是HTML(比如,在其中有<tag...>标记)。如果不是,这个字符串被解释成选择器表达式,同样和上面一样需要检查。但是如果字符串是HTML片段,jQuery会尝试创建新的被HTML所描述的DOM元素。然后jQuery对象被创建并且返回和这些元素关联。你能够在这个对象上操作所有一般的jQuery方法.

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

如果这段HTML比没有属性的单一标记复杂,像在上面的那个例子,真实创建这个元素的是浏览器的innerHTML机制实现的。在大多数情况下,jQuery创建新的<div>元素,并且设置传过来HTML片段的元素innerHTML属性。当参数有一个简单的标签(可选择关闭的标签或快速关闭)-$('<img />')或者$('<img>'),$('<a></a>')$('<a>')-jQuery通过本地的javascript的createElement()函数创建元素

当传递过来复杂的HTML,一些浏览器可能不会严格的复制HTML提供的源文件来生成DOM,就像上面提到的一样,jQuery使用浏览器的.innerHTML属性转换HTML并将插入到当前文档中。在这个过程中,一些浏览器过滤了一些元素如<html>,<title>,或者<head> 元素。结果,插入的元素并不代表原始传过去的字符串。

过滤的现象,并不是极限于这些标签。比如,IE8之前的版本将链接上的所有的href属性转换为绝对的URLs,并且IE9之前版本在没有单独的添加compatibility layer.(兼容层)时就不能正确的操作HTML5元素。

为了确保跨平台的兼容性,片段必须符合语法规范。能包含其他元素的标签必须使用结束标签成对出现。

$('<a href="http://jquery.com"></a>');

不包含元素的标签也许可以有结束标签也可以没有:

$('<img />');
$('<input>');

当给jQuery传递HTML时,请注意文本节点不能被当作DOM元素。除了少数一些方法(如.content()),他们一般是被忽视或者移除的

var el = $('1<br/>2<br/>3'); // returns [<br>, "2", <br>]
el  = $('1<br/>2<br/>3 >'); // returns [<br>, "2", <br>, "3 >"]

jQuery1.4,jQuery()中的第二个参数能够接收包含能传递给.attr()方法的属性的集合的简单对象(plain Object)。

重要:如果第二个参数被传递,第一个参数中的HTML字符串必须是没有属性的简单元素。jQuery1.4中,任何事件类型都能够被传递,如下的jQuery方法能够被调用:val, css, html, text, data, width, height, or offset.
jQuery1.8,任何jQuery实例的方法(jQuery.fn的方法)能够被作为对象的属性传给第二个参数:

$( "<div></div>", {
  "class": "my-div",
  on: {
    touchstart: function( event ) {
      // do something
    }
  }
}).appendTo( "body" );

class的名字在对象中必须被用引号包含,因为它是javascript的保留字,className不能够被使用,因为它指向的是DOM的property,不是atrriute.
第二个参数是很方便的,它的灵活性会产生意想不到的效果(如$("<input>", {size: "4"}调用了.size()方法而不是设置size的属性).现在这个代码可以这样来写:

$( "<div></div>" )
.addClass( "my-div" )
.on({
  touchstart: function( event ) {
    // do something
  }
}).appendTo( "body" );


动态的创建div元素(和它的所有内容)并且追加到body元素中。在内部,一个元素被创建,并将它的内部属性设置成给定标记的值。

$("<div><p>Hello</p></div>").appendTo("body")

创建一些DOM元素。

$("<div/>", {  
"class": "test",  
text: "Click me!",  
click: function(){    
     $(this).toggleClass("test");  
}
}).appendTo("body");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值