jQuery基础

作者: 鹿丸眼中的云 | 来源:发表于2017-09-06 14:23 被阅读26次

该文章为菜鸟教程jQuery精华知识点摘录，如要学习详细案例知识，请移步菜鸟教程

jQuery选择器：

实例

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

知识点

选择器实例.png

jQuery 事件

实例

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});

$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});

知识点

事件.png

jQuery 效果

隐藏显示

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

淡入淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

实例

$("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

滑动

slideDown()
slideUp()
slideToggle()

示例

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

动画

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    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");
  });
});

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

停止动画

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

jQuery Callback 方法

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数,speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});

链(Chaining)

$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});

jQuery_html

获取内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

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

$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});

设置内容和属性

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

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
    // 通过修改的 title 值来修改链接名称
    title =  $("#runoob").attr('title');
    $("#runoob").html(title);
  });
});

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

function appendText(){
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
});

function afterText(){
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});

获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("body div:first").addClass("important blue");
  });
});

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
    font-weight:bold;
    font-size:xx-large;
}
.blue
{
    color:blue;
}
</style>

css() 方法

$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});

尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});

jQuery 遍历

祖先

parent()
parents()
parentsUntil()

$(document).ready(function(){
  $("span").parents("ul").css({"color":"red","border":"2px solid red"});
});

$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});

后代

children()
find()

$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});

$("div").find("span").css({"color":"red","border":"2px solid red"});
});

$("div").find("*").css({"color":"red","border":"2px solid red"});
});

同胞

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

$(document).ready(function(){
    $("h2").siblings().css({"color":"red","border":"2px solid red"});
});

$(document).ready(function(){
    $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});

$(document).ready(function(){
    $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});

过滤

$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});

$(document).ready(function(){
    $("div p").last().css("background-color","yellow");
});

$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});

$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});

$(document).ready(function(){
   $("p").not(".url").css("background-color","yellow");
});

ajax

$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php",function(data,status){
            alert("数据: " + data + "\n状态: " + status);
        });
    });
});

$(document).ready(function(){
    $("button").click(function(){
        $.post("/try/ajax/demo_test_post.php",{
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
        });
    });
});

网友评论

本文标题：jQuery基础

本文链接：https://www.haomeiwen.com/subject/wximjxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！