初学JQuery 2

 JQuery DOM（Document Object Model 文档对象模型）操作

1.获得或设置内容

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括HTML标记）
  • val() - 设置或返回表单字段的值
View Code 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("#btn3").click(function(){
    alert("Name: " + $("#name").val());
  });
});
</script>
</head>

<body>
name:<input id = "name" type = "text" value = "name"/>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示 name</button>
</body>

</html>

 

这三个函数拥有回掉函数
2.attr() 获取或设置属性

$(".btn7").click(function(){
       $(".setHref").attr({
                             "href":"http://www.google.com.hk/",
                            "title":"改变之后的标题"
                          });

 

3.添加元素

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

4.删除内容

  • remove()
  • empty()

 

 

 

 

 

posted @ 2013-04-20 12:27  Java_Code  阅读(153)  评论(0)  编辑  收藏  举报