jQuery的dom操作 | 易学教程

三 dom操作
1.查询
  利用选择器找到节点后，访问节点的html内容，节点的text内容，
  节点的值，节点的属性值
  html():访问节点的html内容，相当于dom节点的innerHTML属性
  text():访问节点text的内容，相当于innerText属性
  val():访问节点的值,如下拉列表的值
  attr():输出或者设置节点的属性值

  例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
  //alert($('#d1').html());
  //alert($('#d1').text());

  $('#d1').html('hello java');
}

function f2(){
  //alert($(':text').val());
  $(':text').val('zs');
}

function f3(){
  //alert($('#d1').attr('id'));
  $('#d1').attr('style',
  'font-size:60px;color:red;');
}
</script>
</head>
<body style="font-size:30px">
<div id="d1"><span>hello jQuery</span></div>
username:<input name="username"/><br/>
<input type="button" value="查询"
onclick="f3();"/>

</body>
</html>

2.创建
$(html);

3.插入节点
  append();
  向每个匹配的元素内部追加内容
  prepend()
  向每个匹配的元素内部前置内容
  after()
  在每个匹配的元素之后插入内容
  before()
  在每个匹配的元素之前插入内容

  例子

  例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
  var $obj = $('<div>兴趣是第一位的</div>');
  $('body').append($obj);
}

function f2(){
  $('body').append('<div>兴趣是第一位的</div>');
}

function f3(){
  var $obj = $("<div></div>");
  $obj.html('其次是多练习');
  $('body').append($obj);
}

function f4(){
  $('ul').append('<li>newItem</li>');
}

function f5(){
  $('body').prepend('<div>多看看优秀的代码</div>');
}

function f6(){
  $('a').after('<p>hello java</p>');
}
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;"
onclick="f6();">如何才能学好java?</a>
<br/>
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<ul>
  <li>item11</li>
  <li>item22</li>
  <li>item33</li>
</ul>
</body>
</html>

4.删除节点
  remove()
  remove(selector)
  empty()  清空节点

例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
  $('ul li:eq(1)').remove();
}

function f2(){
  $('ul li:eq(1)').empty();
}

function f3(){
  $('ul li').remove('#l2');
}
</script>
</head>
<body style="font-size:30px;">
<ul>
  <li>item1</li>
  <li id="l2">item2</li>
  <li>item3</li>
</ul>
<input type="button" value="删除节点"
onclick="f3();"/>
</body>
</html>

5.复制节点
  clone()  复制(不复制行为)
  clone(true); 使复制的节点也具有行为(绑定在该节点上的事件)

  如何绑定事件在节点上
  1)//将事件处理代码绑订到dom节点之上。
  var obj = document.getElementById('b1');
  obj.onclick=f1;
  2)
  
  <input type="button" value="ClickMe" id="b1"
  onclick="f1();"/>

复制例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
/*
  可以将这儿的代码放到.js文件里，然后引入
  该文件，这样做，可以将js代码与html代码完全
  分离，方便代码的维护。
*/
$(function(){
  /*
  $('#b1').click(function(){
   var $obj = $('ul li:eq(2)').clone();
   $('ul').append($obj);
  });
  */
  $('ul li:eq(2)').click(function(){
   alert('hello');
  });

  $('#b1').click(function(){
   var $obj = $('ul li:eq(2)').clone(true);
   $('ul').append($obj);
  });
});
</script>
</head>
<body style="font-size:30px;">
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<input type="button" value="clone方法" id="b1"/>
</body>
</html>

6.属性操作
  attr('');   读取属性
  设置:attr('','')
  或者一次设置多个attr({"":"","":""});
  删除:removeAttr('')

例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
  font-size:60px;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
  $('#b1').click(function(){
   //alert($('#d1').attr('id'));
   //$('#d1').attr('class','s1');

   //$('#d1').attr({'class':'s1',
   //'style':'color:red;font-style:italic;'});
   $('#d1').attr('class','s1').attr('style','color:blue');
  });
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello</div>
<input type="button" value="属性操作" id="b1"/>
</body>
</html>

7.样式操作
  attr("calss","") 获取和设置
  addClass('')  追加
  removeClass('') 移除
  或者removeClass('s1 s2')
  或者removeClass()  会删除所有样式
  toggleClass()    切换样式
  hasClass('')    是否有某个样式
  css('')      读取设置css('','')或者css({"":"","":""})//设置多个样式

例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
  font-size:80px;
}
.s2{
  color:blue;
}
.s3{
  font-style:italic;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
  /*
  $('#b1').click(function(){
   $('#d1').attr('class','s1');
  });
  */
  $('#b1').click(function(){
   //$('#d1').addClass('s2 s3');
   //$('#d1').removeClass('s1');
   //$('#d1').toggleClass('s1');
   //alert($('#d1').hasClass('s1'));
   //$('#d1').css('font-style','italic')
   //.css('color','red');
   $('#d1').css({'font-style':'italic','color':'blue'});
  });
});
</script>
</head>
<body style="font-size:30px">
<div id="d1" class="s1">hello</div>
<input type="button" value="样式操作" id="b1"/>
</body>
</html>

8.遍历节点
  children()   只考虑子元素,不考虑其他后代元素.
  next()
  prev()
  siblings();  兄弟节点
  find(selector)
例子:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
  $('#b1').click(function(){
   //var $obj = $('#d1').children();
   /*
   var $obj = $('#d1').children('div');
   $obj.css('font-size','60px');
   */
   //$('#d1').next('p').html('hello 555');
   //$('#d1').prev().html('hello 777');

   //$('#d1').siblings('span').css('font-size','80px');

   $('#d1').find('div').css('font-size','80px');
  });
});
</script>
</head>
<body style="font-size:30px;">
<span>hello7</span>
<div id="d1">
  <div>hello1</div>
  <div>hello2</div>
  <div>hello3</div>
  <div>
   <div>hello111</div>
  </div>
  <p>hello4</p>
</div>
<span>hello5</span><br/>
<p>hello6</p>
<input type="button" value="遍历" id="b1"/>
</body>
</html>

来源：https://www.cnblogs.com/hqr9313/archive/2012/08/06/2625024.html

标签

jquery选择器

html代码

脚本

font

jquery

dom