菜鸟教程jquery学习记录笔记源码2没有加入插件-原创手记-慕课网

<script>
$(document).ready(function(){
    $("span").parent().css({"color":"blue","border":"2px solid black "}); 
});
</script>

<script>
$(document).ready(function(){
    $("span").parents().css({"color":"red","border":"2px solid black"});
});
</script>
<script>
$(document).ready(function(){
    $("span").parentsUntil("div").css({"color":"red","border":"3px solid red"});
});
</script>
<script>
$(document).ready(function(){
  $("div").children().css({"color":"red","border":"2px solid black"});
});
</script>
<script>
$(document).ready(function(){
  $("div").children("p.2").css({"color":"red","border":"2px solid red"});
});
</script>
<script>
$(document).ready(function(){
    //找到子元素
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
<script>
$(document).ready(function(){
    //兄弟
  $("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
$(document).ready(function(){
    //过滤p标签
  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
<script>
$(document).ready(function(){
  $("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
<script>
$(document).ready(function(){
    //剩下的所有
  $("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
<script>
$(document).ready(function(){
    //直到
  $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
    //前面一个
    //$("h2").prev().css({"color":"red","border":"2px solid black"});
    //前面所有
    //$("h2").prevAll().css({"color":"red","border":"2px solid black"});
    //前面直到
    $("h2").prevUntil("p").css({"color":"red","border":"2px solid blue"});
});
</script>
<script>
$(document).ready(function(){
//第一个
  $("div p").first().css("background-color","blue");
});
</script>
<script>
$(document).ready(function(){
  $("div p").last().css("background-color","yellow");
});
</script><script>
$(document).ready(function(){
  $("p").eq(0).css("background-color","yellow");
});
</script>
<script>
$(document).ready(function(){
   //过滤出类别
  $("p").filter(".intro").css("background-color","blue");
});
</script>
<script>
$(document).ready(function(){
    //不是类别的
  $("p").not(".intro").css("background-color","yellow");
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      //加载
      $("#div1").load("/try/ajax/demo_test.txt");
  //  $("#div1").load("/try/ajax/demo_test.txt");
  });
});
</script>
$(document).ready(function(){
  $("button").click(function(){
      $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt){
      //如果
          if(statusTxt=="success"){
          alert("ajax加载成功");
      }
        if(statusTxt=="error"){
        alert("Error:"+xhr.status+":"+xhr.statusText);
        }
      });

  });
});
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("/try/ajax/demo_test.php",function(data,status){
      alert("数据: " + data + "\n状态: " + status);
    });
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
           {name:"yq",sex:"man"},
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery is still working!");
  });
});
</script>
<script>
//释放$符号冲突
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery is still working!");
  });
});
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery is still working!");
  });
});
</script>
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

属于其父元素的第二个子元素的所有 <p> 元素
<script>
$(document).ready(function(){
    //第三个孩子
  $("p:nth-child(2)").css("background-color","yellow");
});
</script>
<script>
//属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数
$(document).ready(function(){
  $("p:nth-last-child(2)").css("background-color","yellow");
});
</script>
<script>
$(document).ready(function(){
    //delegate
  $("div").on("p","click",function(){
    $("p").css("background-color","pink");
  });
});
</script>
$(document).ready(function(){
    //delegate
  $("div").on("p","click",function(){
    $("p").css("background-color","pink");
  });
});
</script>
<script>
$(document).ready(function(){
  $("h1,h2,p").click(function(event){
   alert(event.currentTarget === this);
 });  
});
</script>
<script>
$(document).ready(function(){
  var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
//追加
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }
  };
//代理激活
  $("button").click($.proxy(objPerson,"test"));
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
//延迟加载
    $("#div1").delay("slow").fadeIn();
    $("#div2").delay("fast").fadeIn();
    $("#div3").delay(800).fadeIn();
    $("#div4").delay(2000).fadeIn();
    $("#div5").delay(4000).fadeIn();

  });
});
</script>
detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。
提示：如需移除元素及它的数据和事件，请使用 remove() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
<script>
$(document).ready(function(){
    //unwrap() 方法移除被选元素的父元素。
  $("button").click(function(){
    $("p").unwrap();
  });
});
</script>
<script>
$(document).ready(function(){
  $("h1").add("p").add("span").css("background-color","blue");
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $("li").each(function(index,ele){
      alert($(this).text()+","+index);
      });
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $.ajax({url:"demo_ajax_load.txt",async:true,success:function(result){
      $("div").html(result);
      }});

  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"demo_ajax_script.js",dataType:"script"});
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"wrongfile.txt",error:function(xhr){
      alert("错误提示： " + xhr.status + " " + xhr.statusText);
    }});
  });
});
</script>
<script>
$(document).ready(function(){
  personObj=new Object();
  personObj.firstname="John";
  personObj.lastname="Doe";
  personObj.age=50;
  personObj.eyecolor="blue"; 
  $("button").click(function(){
    $("div").text($.param(personObj));
  });
});
</script>
<script>
$(document).ready(function(){
  $("button").on("click",function(){ 
    var version = $().jquery; 
    alert("You are running jQuery version: " + version); 
  });
}); 
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
    alert("Greeting is: " + $("div").data("greeting"));
  });
  $("#btn2").click(function(){
    $("div").removeData("greeting");
    alert("Greeting is: " + $("div").data("greeting"));
  });
});
</script>
<script>
$(document).ready(function(){
  $("p").html("This browser can create XMLHttpRequest object: " + jQuery.support.ajax);
  });
</script>
<script>
$(document).ready(function(){
  $("#toggle").on("click",function(){
    $("div").toggle(5000);
  });
  $("#interval").on("click",function(){
      //改变以毫秒计的动画运行速率
      jQuery.fx.interval=5000;
  });
});
</script>