前端學習之-Jquery

jquery簡介:jQuery由美國人John Resig建立，至今已吸引了來自世界各地的衆多 javascript高手加入其team.尋找元素(重要的選擇器和篩選器)選擇器2.1.1 基本選擇器      $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")2.1.2層級選擇器       $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")2.1.3 基本篩選器      $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")2.1.4 屬性選擇器      $('[id="div1"]')   $('["alex="sb"][id]')2.1.5 表單選擇器      $("[type='text']")----->$(":text")                     注意只適用於input標籤$("input:checked")篩選器2.2.1  過濾篩選$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")2.2.2  查找篩選器$("div").children(".test")    $("div").find(".test")$(".test").next()    $(".test").nextAll()   $(".test").nextUntil()$("div").prev()  $("div").prevAll()  $("div").prevUntil()$(".test").parent()  $(".test").parents()  $(".test").parentUntil()$("div").siblings()操做元素(屬性 CSS 和 文檔處理).1 屬性操做val:價值  attr:屬性$("p").text()    $("p").html()   $(":checkbox").val()$(".test").attr("alex")   $(".test").attr("alex","sb")$(".test").attr("checked","checked")  $(":checkbox").removeAttr("checked")$(".test").prop("checked",true)$(".test").addClass("hide")CSS操做3.23.2.1(樣式)css("{color:'red',backgroud:'blue'}")3.2.2(位置)offset()position()scrollTop()scrollLeft()3.2.3(尺寸)height()width()3.3 文檔處理內部插入  $("#c1").append("<b>hello</b>")     $("p").appendTo("div")                   prepend()    prependTo()外部插入  before()  insertBefore()  after insertAfter()                     replaceWith()   remove()  empty()  clone()3.4 事件3.4.1    $(document).ready(function(){}) -----------> $(function(){})3.4.2    $("p").click(function(){})    $("p").bind("click",function(){})    $("ul").delegate("li","click",function(){})3.6 擴展(插件機制) jquery.extend({}) jquery.fn.extend({})####################################################################運用jquery:方法一：對須要處理的地方綁定onclick函數：例如：<div class="div1" onclick="show(this)"><div/>jquery的地方寫法：<script>    function show(self){    $(self).next().removeClass("hide");    $(self).parent().siblings().children(".con").addClass("hide");}<script/>方法二：不在html文件裏進行綁定函數，而是在jquery裏統一進行處理：例如：<script src="js/jquery-2.2.3.js"><script/><script>    $(document).ready(function(){        $("hide").click(function(){            $("p").hide(1000);});        $("#show").click(function(){            $("p").hide(1000);})})<script/>方法三：<script src="/static/js-3.1.1.js"><script/><script>    $(document).ready(function){        bindAddEvent();        bindDelEvent();}    function bindAddEvent(){        $(".calss").click(function(){            $("p").addclass("hide");})}    function  bindDelEvent(){        $("#id").click(function(){            $("name").removecalss("hide");})}<script/>