jq的复习

JQ

• HTML 元素选取

• 获得内容 - text()、html() 以及 val()
  三个简单实用的用于 DOM 操作的 jQuery 方法：
  
  text() - 设置或返回所选元素的文本内容
  html() - 设置或返回所选元素的内容（包括 HTML 标记）
  val() - 设置或返回表单字段的值   //input

  $("#btn1").click(function(){
  alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
  });

• HTML 元素操作                jQuery attr() 方法用于获取属性值。

• $(document).ready(function(){
    $("#btn1").click(function(){
      $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
      $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
      $("#test3").val("Dolly Duck");
    });

  我们将学习用于添加新内容的四个 jQuery 方法：
  
  append() - 在被选元素的结尾插入内容
  prepend() - 在被选元素的开头插入内容
  after() - 在被选元素之后插入内容
  before() - 在被选元素之前插入内容
  
  function appendText()
  {
  var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
  var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
  var txt3=document.createElement("p");
  txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
  $("body").append(txt1,txt2,txt3);        // 追加新元素
  }
  // after & before
   $("#btn1").click(function(){
      $("img").before("<b>Before</b>");
    });
  
    $("#btn2").click(function(){
      $("img").after("<i>After</i>");
    });

• CSS 操作
• HTML 事件函数

•  $("button").bind({
      click:function(){$("p").slideToggle();},
      mouseover:function(){$("body").css("background-color","red");},  
      mouseout:function(){$("body").css("background-color","#FFFFFF");}  
    });

• JavaScript 特效和动画

• jQuery 拥有下面四种 fade 方法：
  
  fadeIn()  
  fadeOut()
  fadeToggle()
  fadeTo()  多了一个透明度
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });

  jQuery 拥有以下滑动方法：
  
  slideDown()
  slideUp()
  slideToggle()
  
  $("#flip").click(function(){
    $("#panel").slideToggle();
  });

  $(document).ready(function(){
    $("button").click(function(){
      var div=$("div");  
      div.animate({left:'100px'},2000);
      div.animate({fontSize:'3em'},"slow");

  jQuery 动画：

   });
   7 });

• HTML DOM 遍历和修改
• AJAX
• Utilities