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>")创建了一个段落.注意此时只是创建了对象,尚未添加到文档节点中去:以下四 ...
随机推荐
- Ext如何Gird中如何显示时间类型的列?
rt,后台bean中的字段属性是Date类型,前台的model中的字段属性也设置为date类型,但是还是显示不出来,如何解决呢? 直接代码: grid中的COLUMN: Model中的定义:
- struts2中配置全局日期类型转换器
1.编写一个类,继承StrutsTypeConverter,实现其中的convertFromString和convertToString方法,该类如下: package me.edu.utils; i ...
- unity回调函数范例
using System.Collections; using System.Collections.Generic; using UnityEngine; public class callback ...
- pycharm中不能安装bs4的解决方案
首先:什么Beautiful Soup? Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.B ...
- iOS 线程管理的学习记录
本文转载至 http://www.2cto.com/kf/201312/265451.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...
- 【BZOJ4542】[Hnoi2016]大数 莫队
[BZOJ4542][Hnoi2016]大数 Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个 ...
- Netty环境搭建 (源码死磕2)
[正文]netty源码 死磕2: 环境搭建 本小节目录 1. Netty为什么火得屌炸天? 1.1. Netty是什么? 1.2. Netty火到什么程度呢? 1.3. Netty为什么这么火? 2 ...
- PHP计算多少秒/分/时/天/周/月/年之前 : timeago
function timeago( $ptime ) { $etime = time() - $ptime; if ($etime < 59) return '刚刚'; $interval = ...
- Unity 武器拖尾效果
Pocket RPG Weapon Trails 武器拖尾效果 Asset Store地址:https://www.assetstore.unity3d.com/en/#!/content/2458 ...
- linux c编程:Posix消息队列
Posix消息队列可以认为是一个消息链表. 有足够写权限的线程可以往队列中放置消息, 有足够读权限的线程可以从队列中取走消息 在某个进程往一个队列写入消息前, 并不需要另外某个进程在该队列上等待消息的 ...