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

最新推荐文章于 2023-05-05 14:48:03 发布

ynztpwl

最新推荐文章于 2023-05-05 14:48:03 发布

阅读量1.7k

点赞数

分类专栏： JQuery 文章标签： jquery input class button function div

本文链接：https://blog.csdn.net/ynztpwl/article/details/6339755

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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


  
  <
  
  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
  
  >