❶ jquery 动态创建元素的方式介绍及应用
一般动态创建元素可以通过两种方式
1、Dom
HTml
复制代码
代码如下:
var
select
=
document.createElement("select");
select.options[0]
=
new
Option("加载项1",
"value1");
select.options[1]
=
new
Option("加载项2",
"value2");
select.size
=
"2";
testDiv.appendChild(select);
});
通过document的createElement方法创建,然后通过appendChild方法添加到指定的对象中即可
2、JQuery函数创建
$("<div
style=\"border:solid
1px
#FF0000\">动态创建的div</div>")
通过append,appendto,prepend,prependto等方法添加到指定的对象中,具体可以查看
http://www.jb51.net/article/35845.htm
3、页面加载的时候最好在页面加载完后执行创建
可以使用window.onload,但是在添加新的元素,
但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后,
也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.
所以如果某个图片或者其他资源加载很长时间,
访问者就会看到一个不完整的页面,
甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.
解决办法就是等DOM被解析后,
在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行
复制代码
代码如下:
$(document).ready(
function()
{
testDiv.innerHTML
=
"<div
style=\"border:solid
1px
#FF0000\">使用动态创建的$(document).ready(function)方法</div>";
}
);
或者使用简便语法:
复制代码
代码如下:
//jQuery
使用$(function)方法
$(
function()
{
testDiv.innerHTML
+=
"<div
style=\"border:solid
1px
#FF0000\">使用$(function)方法</div>";
}
);
使用$()将我们的函数包装起来即可.
而且可以在一个页面绑定多个函数,
如果使用传统的window.onload则只能调用一个函数.
所以请大家将修改DOM的函数使用此方法调用.
另外还要注意document.createElement和innerHTML的区别.
如果可以请尽量使用document.createElement和$("<div/>")的形式创建对象.
❷ 如何用jquery创建多个元素
var num = 8;
for (var i = 0; i < num; i++) {
$('ul').append('<li></li>');
};
❸ jquery中怎样创建元素,并且添加class
a在同级可这样
$('#wrapper-250 a').bind('click', function(){
$(this).addClass('class').siblings().removeClass('class');
});
不在同级:
$('a').bind('click', function(){
$('a').removeClass('class');
$(this).addClass('class');
});
❹ javascript/jquery怎么操作通过ajax动态创建的元素
<head>
<metacharset="utf-8">
<title></title>
<script>
functionCheckForm(){
varbox=document.getElementById("box");
varhtml_str="";
#.ajax({
url:"klist.php"
type:"get",
dataType:"json",
success:function(k){
for(vari=0;i<k.length;i++){
varitem=k[i];
//alert(item.name);
varchk='';
if(item.chk)chk='checked="true"';
html_str+='<inputtype="checkbox"name="msk[]"value="'+item.name+'"'+chk+'/> '+item.name+'';
}
box.innerHTML=html_str;
},
});
}
</script>
</head>
<bodyonload="javascript:CheckForm();">
<divid="box">
</div>
</body>
</html>
//klist.php
<?php
echojson_encode([{name:"张三",chk:true},{name:"张三2",chk:false},{name:"张三3",chk:true},{name:"张三4",chk:false}]);
?>
❺ jquery是怎么创建jquery类的
使用jquery创建新元素的方法为:$(html标签),例如 $("<p></p>")创建了一个段落。注意此时只是创建了对象,尚未添加到文档节点中去;以下四个 jQuery 方法可以添加新内容到文档树中:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
下面进行实例演示:点击“添加”按钮,新建一个input文本框
1、HTML结构
<input type="text" id="test_input">
<input type='button' value='添加'/>
2、javascript代码
$(function(){
$("input[type='button']").click(function() {
new_obj = $("<input type='text'>");
$(this).before(new_obj);
});
});
❻ jquery创建元素的一个问题
<divclass="div1"></div>
<scripttype="text/javascript">
vara="<a>";
$(a).addClass("a").text("some").appendTo($(".div1")).css("color","yellow");//生效
$('.a').css("font-size","24px");
</script>
这样试试
❼ jquery怎么获取动态创建的元素
这要看你动态创建的元素用的什么标记
$('#domId').html();
$('.domClass').html()
❽ jquery动态生成元素
先给一个正确的。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.js" ></script>
</head>
<body>
<div id="testDiv">ssss</div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo('#testDiv');
});
</script>
</body>
</html>
你的代码有这么几个错误。
1。css里面,颜色不用那么多0.要6位数
2。appendTo的时候,既然用了id来查找div。必须用#+id
❾ 如何用jquery创建一个dom元素
使用jquery创建新元素的方法为:$(html标签),例如$("<p></p>")创建了一个段落。注意此时只是创建了对回象,答尚未添加到文档节点中去;以下四个 jQuery 方法可以添加新内容到文档树中:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
下面进行实例演示:点击“添加”按钮,新建一个input文本框
1、HTML结构
<inputtype="text"id="test_input">
<inputtype='button'value='添加'/>
2、javascript代码
$(function(){
$("input[type='button']").click(function(){
new_obj=$("<inputtype='text'>");
$(this).before(new_obj);
});
});
3、显示效果
初始样式
❿ jQuery 动态创建元素失去焦点
可能是你的jquery版本太低,太低的live不支持blur,fouce等事件,好像是1.4以上才支持,你看看是不是这个原因,如果支持的话,直接:
$("#id").live('blur',function(){
...
});
另外,可以试着用bind,而不是live