总结的一些jquery获取更改dom元素常用方法 -

ynztpwl

浏览: 61948 次
性别:
来自: 北京

最近访客更多访客>>

wxg1026868119

1163735915

mf1389004071

u010494405

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

总结的一些jquery获取更改dom元素常用方法


!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

<html>

<head>

<title></title>



<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script>

</head>

<body>



<!--文本-->

<input type="text" name="text1" id="text1" class="text1" value="nihao shijie"/>

<input type="text" name="text2" id="text2" class="" value=""/>

<input type="text" name="text3" id="text3" class="text3" value="nihao dalian"/><br/>

<!--文字-->

<div name="div1" id="div1" class="div1"><span name='span1' id="span1" value="a">Hello World!</span></div>

<!--按钮-->

<input type="button" name="b1" id="b1" value="显示"/>

<input type="button" name="b2" id="b2" value="隐藏"/><br/>

<input type="button" name="b3" id="b3" value="修改内容为 Hello World,too!"/><br/>

<p id="pp">sadfsadf</p>







<style type="text/css">

.text2{color:#CC33FF};

.text3{background:#6600FF};

#b4{background:#6600FF};



</style>



<script type="text/javascript">







//显示

$("input[name='b1']").bind("click",function(event){

$("div[name='div1']").show();

});



//隐藏

$("#b2").bind("click",function(event){

$("#div1").hide();

});



//改变显示值

$("input[id='b3']").bind("click",function(event){

$("span[id='span1']").html("Hello World ,too!");

});









//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!获取dom元素





//直接获取所有此标签元素

//var a=$("input");



//获取input下所有text属性的input标签

//var a=$("input:text");



//获取class为text1的所有元素值

//var a=$(".text1").val()+"ttttttttt<br>";

//document.write(a);



//获取id为text1的所有元素值

//var a=$("#text1").val()+"ttttttttt<br>";

//document.write(a);




//将id为table1下的id为tr1的元素复制，加在tr2前面
//var tr1=$("#table1 #tr1").clone(true);
//tr1.insertBefore("#tr2");


//将id为table1下的HTML的tr标签元素复制，加在tr2前面
//var tr1=$("#table1 tr").clone(true); 
//tr1.insertBefore("#tr2");





//!!!!!!!!!!!!!!!!!!!!!!

//!!!!!!!!!!!!!!!!!!!!!!通过索引或指定值查找某一确定元素





//通过其标签名查找元素

//var a=$("input[name='text1']").val()+"世界你好<br>";

//document.write(a);



//同理通过ID名查找元素

//var a=$("input[id='text3']").val()+"你好大连";

//document.write(a);



//根据其索引值查找元素

//var a=$("input:eq(1)").val()+"网";

//document.write(a);



//获取索引中第二个input标签的值同上

//var a=$("input").eq(1).val();

//document.write(a);



//用对象后面加[]索引查找元素，此方法提出的对象不能用jquery中函数，此时取值不能用val()，只能用value

//var a=$("input")[0].value;

//document.write(a);











//!!!!!!!!!!!!!!!!!!!!!!

//!!!!!!!!!!!!!!!!!!!!!!对dom元素进一步操作





//!!!!!!!!!!!!!

//!!!!!!!!!!!!!标签属性



//为input标签的第二个索引对象的value属性赋值，你好世界如果。如果dom对象是个集合则为集合内所有对象value属性赋值

//$("input").eq(1).attr("value","你好世界");



//同时对指定input的多个属性赋值

//$("input").eq(1).attr({value:"你好中国",id:"text2"});



//获取input第一个索引对象的value属性的值

//$("input").eq(0).attr("value")



//移除input标签第一个索引的value属性

//$("input").eq(0).removeAttr("value");







//!!!!!!!!!!!!!!!!

//!!!!!!!!!!!!!!!!样式表



//为input标签索引为第二的的dom元素class属性添加样式表中名称为text2的类的样式

//$("input").eq(1).addClass("text2");



//删除指定input的class=text3的值，如果removeClass()括号内为空则删除所有class值

//$("input").eq(2).removeClass("text3");









//!!!!!!!!!!!!!!!!!!

//!!!!!!!!!!!!!!!!!!对具体某个style属性进行操作



//获取指定input中指定style属性的的值

//a=$("input").eq(1).css("color");

//document.write(a);



//给body元素添加指定style属性及值的css样式

//$("body").css("background","black")



//为指定input设置指定style属性及值

//$("input").eq(2).css({color:"#ff0011",background:"#6600FF"});





//!!!!!!!!!!!!!!!!!!!!!!!!

//!!!!!!!!!!!!!!!!!!!!!!!!其他操作



//隐藏form表单

//$("form").hide();



//添加一个"<div><p>Hello</p></div>"到body页面中

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



//将name=text1的input框移到此处显示注意是移动，不是复制

//$("input[name='text1']").appendTo("body");



//获取<p>相对当前窗口的坐标位置，offset()返回当前对象left，top两个整型属性

//var a=$("p");

//var b=a.offset();

//a.html("left:"+b.left+",top:"+b.top);



//position()用法同offset()获取相对父元素的坐标位置，同样返回left，top两个整型属性





</script>



</body>

</html>