jq的复习

JQ

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

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

  • HTML 元素操作                jQuery attr() 方法用于获取属性值。
  •  1 $(document).ready(function(){
 2   $("#btn1").click(function(){
 3     $("#test1").text("Hello world!");
 4   });
 5   $("#btn2").click(function(){
 6     $("#test2").html("<b>Hello world!</b>");
 7   });
 8   $("#btn3").click(function(){
 9     $("#test3").val("Dolly Duck");
10   });
    我们将学习用于添加新内容的四个 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 特效和动画
  •  1 jQuery 拥有下面四种 fade 方法：
 2 
 3 fadeIn()  
 4 fadeOut()
 5 fadeToggle()
 6 fadeTo()  多了一个透明度
 7 $("button").click(function(){
 8   $("#div1").fadeIn();
 9   $("#div2").fadeIn("slow");
10   $("#div3").fadeIn(3000);
11 });
    1 jQuery 拥有以下滑动方法：
2 
3 slideDown()
4 slideUp()
5 slideToggle()
6 
7 $("#flip").click(function(){
8   $("#panel").slideToggle();
9 });
    1 $(document).ready(function(){
2   $("button").click(function(){
3     var div=$("div");  
4     div.animate({left:'100px'},2000);
5     div.animate({fontSize:'3em'},"slow");
    jQuery 动画：
    6  });
         7 });

     

  • HTML DOM 遍历和修改
  • AJAX
  • Utilities
posted @ 2019-02-19 22:42  山外已有山  阅读(215)  评论(0)  编辑  收藏  举报