jQuery创建DOM的方法
jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法,在 jQuery 1.4中,我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合,这些可以传递给.attr() 方法。此外,一些event type(事件类型)能通过, 而且后面的jQuery方法能够调用: val, css, html, text, data, width, height, or offset。
1. [代码][JavaScript]代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery创建dom的几种方法</title>
<script src="http://www.173it.cn/css/jquery.js" kesrc="http://www.173it.cn/css/jquery.js"></script>
<style type="text/css">
.red{ color:#FF3300}
.bg-yellow{ background-color:#FFEE00; color:#00FFEE}
</style>
</head>
<body>
<div id="target"></div>
<script type="text/javascript">
$(function(){
var oNewp = $("<p>我测试成功了</P>");
oNewp.addClass("red").appendTo("#target");
});
$(function(){
$("<div>")
.attr("id","css")
.height(90)
.css("border","1px solid #000")
.html("fuck world!")
.appendTo(document.body);
});
$(function(){
$("<input>",{
"class":"bg-yellow",
"id":"fuck",
css:{
"border":"1px solid #000",
"font-size":"25px"
},
value:"fuck world!",
focusin:function(){
$(this).css("border","5px solid #FF3300");
},
focusout:function(){
$(this).css("border","1px solid #000");
}http://www.bizhizu.cn/linglei/
}).appendTo(document.body);
$("<div>",{另类图片
"class":"bg-yellow",
"id":"fuckie",
css:{
"border":"1px solid #CDCDCD",
"font-size":"25px"
},
html:$("<a>",{
href: '#',
html:"hello world!",
click: function(event) {
$("#fuckie").css("background-color","#FF3300");
alert("fuck world!!!!!!!!!!");
event.preventDefault();
}
})
}).appendTo(document.body);
});
</script>
</body>
</html>
jQuery创建DOM的方法的更多相关文章
- jQuery基础之(四)jQuery创建DOM元素
利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...
- 原生JS和jQuery创建元素的方法
jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...
- jquery获取dom属性方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
- jquery常用函数与方法
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- *jquery操作DOM总结 (原创:最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- 【jquery创建元素添加元素】
使用jquery创建新元素的方法为:$(html标签),例如 $("<p></p>")创建了一个段落.注意此时只是创建了对象,尚未添加到文档节点中去:以下四 ...
随机推荐
- 堆排序算法的java实现
堆积排序(Heapsort)是指利用堆积树(堆)这种数据结构所设计的一种排序算法,可以利用数组的特点快速定位指定索引的元素.堆排序是不稳定的排序方法,辅助空间为O(1), 最坏时间复杂度为O ...
- centos7 firefox 安装flash
在官网下载flash的tar包 https://get.adobe.com/flashplayer/?spm=a2h0j.8191423.movie_player.5~5~5~8~A 在下载tar包的 ...
- php正則表達式中的非贪婪模式匹配的使用
php正則表達式中的非贪婪模式匹配的使用 通常我们会这么写: $str = "http://www.baidu/.com? url=www.sina.com/"; preg_mat ...
- AI关注的网址
中科院计算技术研究所博士招生:http://admission.ucas.ac.cn/info/ZhaoshengDanweiDetail/9adf9e50-424b-44c8-b2dc-900ef9 ...
- c++学习笔记4,派生类的构造函数与析构函数的调用顺序(一)
測试源代码: //測试派生类的构造函数的调用顺序何时调用 //Fedora20 gcc version=4.8.2 #include <iostream> using namespace ...
- 功能强大的图片截取修剪神器:Android SimpleCropView及其实例代码重用简析(转)
功能强大的图片截取修剪神器:Android SimpleCropView及其实例代码重用简析 SimpleCropView是github上第一个第三方开源的图片修剪截取利器,功能强大,设计良好.我个人 ...
- FMM和BMM的python代码实现
FMM和BMM的python代码实现 FMM和BMM的编程实现,其实两个算法思路都挺简单,一个是从前取最大词长度的小分句,查找字典是否有该词,若无则分句去掉最后面一个字,再次查找,直至分句变成单词或者 ...
- .net 字符串驻留
.net中的string表达的是常量字符串. JIT编译器编译时判断遇到的常量字符串是否在内部散列表中,如果不在,添加进去.当第一次执行到含字符串的方法时,CLR会检查该字符串是否在内部的一个散列表中 ...
- StartUML
原著:Stephen Wong 翻译:火猴 http://blog.csdn.net/monkey_d_meng/article/details/5995610 Sta ...
- poj1135
Domino Effect Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10454 Accepted: 2590 De ...