美文网首页
jQuery基础

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);
        });
    });
});

相关文章

  • 2019-02-13jQuery

    一 jQuery基础 先导入jQuery文件

  • jQuery

    jQuery框架 一、jQuery基础 添加jQuery到网页 jQuery基本语法 二、jQuery 选择器 示...

  • Day19--JQuery

    JQuery 基础：

  • jQuery

    jQuery基础

  • JQuery 基础

    JQuery 基础：

  • 学jQuery:这些就够了！

    废话不多说，进入正题下面就是有关jQuery的语法和基础操作。 jQuery语法基础 一、使用JQuery必须先导...

  • JQuery

    JQuery 基础：概念快速入门JQuery对象和JS对象区别与转换选择器DOM操作案例 JQuery 基础： 概...

  • JQuery学习笔记

    JQuery基础语法 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（s...

  • 25.jQuery基础

    内容 jQuery 基础：

  • JQuery知识总结

    JQuery基础 jquery获取元素的方法：$()在 jQuery 中，只有一个全局变量 $,这是 jQuery...

网友评论

      本文标题：jQuery基础

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|jQuery基础|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！