菜鸟教程jquery学习记录笔记源码1-原创手记-慕课网

<script
src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">
</script>
<script>
    //文档就绪
$(function myFunction()
{
    $("#h01").html("Hello Jquery");

})
//$(myFunction());
//$(document).ready(myFunction);

</script>
<script>
function myFunction()
{
    //修改属性和内容
    $("#h01").attr("style","color:red").html("hello yq");
}
$(document).ready(myFunction);
</script>
    $(function(){
    $("button").click(function(){
    $("p").hide();
    });
    });
$("#test").hide()
 $(".test").hide();
$("*").hide(); 
$(this).hide();
 $("p.intro").hide();
  $("p:first").hide();
$("ul li:first").hide();
 $("ul li:first-child").hide();
//所有属性的都隐藏
  $("[href]").hide();
  //a的属性选择
 $("a[target='_blank']").hide();
 $("a[target!='_blank']").hide();
//
 $(":button").hide();
<script>
$(document).ready(function(){
//奇数 偶数
    $("tr:even").css("background-color","red");
  $("tr:odd").css("background-color","yellow");
});
</script>
$(document).ready(function(){
    $("#p1").hover(function(){
        alert("你进入p1！");
    },function(){
    alert("你离开p1！");
    });
});
$("p").click(function(){
  $(this).hide();
});
$("p").dblclick(function(){
  $(this).hide();
});
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});
$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});
$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});
//覆盖 两个函数
$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});
$("p").hide(1000);
 $("p").toggle();
<script>

$(document).ready(function(){
    //渐入
  $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
  });
});
</script>

<script>
$(document).ready(function(){
    //溅出
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

<script>
$(document).ready(function(){
  $("button").click(function(){
//切换
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("middle");
    $("#div3").fadeToggle(3000);
  });
});
</script>

<script>
$(document).ready(function(){
  $("button").click(function(){
//速度 透明度
    $("#div1").fadeTo("slow",0.2)
    $("#div2").fadeTo("mid",0.4);
    $("#div3").fadeTo("fast",0.8);
  });
});
</script>
  // "slow" "mid"
    $("#panel").slideDown(4000);
 $("#panel").slideUp("slow");
 $("#panel").slideToggle("mid");

 $("div").animate({left:'250ps'},"slow");
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
      div.animate({top:'50px'},"mid");
      div.animate({fontSize:'5em'},"fast");
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
      div.animate({height:'200px',opacity:'0.5'},"mid");
      div.animate({width:"100px",opacity:"0.4"},"fast");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
      $("div").animate({height:'toggle'});   
  });
});
</script> 
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    },"slow");
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("mid");
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });

  $("#stop").click(function(){
    $("div").stop();
  });

  $("#stop2").click(function(){
      //停止所有
    $("div").stop(true);
  });

  $("#stop3").click(function(){
      // 停止 完成
    $("div").stop(true,true);
  });

});
</script> 
<script>
$(document).ready(function(){
  $("button").click(function(){
    //回调函数
      $("p").hide("slow",function(){
      alert("隐藏完成");
      });
  });
});
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
      $("#p1").css("color","blue").slideUp("slow").slideDown("mid");

  });
});
</script>
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("1234");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>456</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("789");
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href","http://www.baidu.com");
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("#w3s").attr({
      "href":"http://www.baidu.com",
          "title":"yq"
      });
  });
});
</script>

<script>
$(document).ready(function(){
  $("button").click(function(){
      //回调函数
      $("#w3s").attr("href",function(i,old){
      return old+"/jquery";
      }
      );
  }); 
});
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
      $("p").append("<b>yyyy</b>"); 
  });
  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
      $("ol").append("<li>yqqy</li>");
  });
});
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
      $("p").prepend("<b>yqyqyq</b>");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
      $("ol").prepend("<li>yeqing</li>");
  });
});
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>yeqing</b>");
  });
  $("#btn2").click(function(){
    $("img").after("<i>yyyyy</i>");
  });
});
</script>
<script>
function appendText()
{
var txt1="<p>Text.</p>";    
    // Create text with HTML
var txt2=$("<p></p>").text("Text.");  // Create text with jQuery
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // Create text with DOM
$("body").append(txt1,txt2,txt3);       // Append new elements
}
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      //移除
    $("#div1").remove();
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      //清空
    $("#div1").empty();
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      //删除哪一类
      $("p").remove(".italic");
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("blue important");
  });
});
</script>
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("h1,h2,p").removeClass("blue");
  });
});
</script>
$(document).ready(function(){
  $("button").click(function(){
   //类 切换
      $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      //获取css属性
      alert("background color ="+$("p").css("background-color"));
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  //两个赋值
      $("p").css("background-color","yellow");
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      //多个css 大括号
      $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      var txt="";
      //高度 宽度
      txt+="width:"+$("#div1").width()+"</br>";
      txt+="heigth:"+$("#div1").height();
      $("#div1").html(txt);
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>