美文网首页我爱编程
《锋利的jQuery》读书笔记

《锋利的jQuery》读书笔记

作者: MVBin | 来源:发表于2017-05-23 11:01 被阅读11次

    引入jQuery文件

    例如:

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    

    jQuery文件可以去jQuery官网上进行下载。
    jQuery第一段程序


    <script type="text/javascript">
        $(document).ready(function() {
            alert("Hello World");
        });
    </script>
    

    刷新页面会出现Hello World的弹框。

    • $(document).ready(function() {//jQuery代码});即为Jquery代码的开端,所有的代码都在其中进行编写,其简写为$(function() {//jQuery代码});
    • 相当于window.onload = function() {//JS代码}

    jQuery代码风格

    • 对于同一对象不超过3个操作的,可以写一行,如:$("li").show().unbind("click");
    • 对于同一对象有很多操作的,可以每行写一个操作,如:
      $(this).removeClass("mouseout")
      .addClass("mouseover")
      .stop()
      .fadeTo("fast", 0.6)
      .click(function() {
      //其他代码
      });
    • 对于多个对象但少量操作的,可以每个对象写一行,若涉及子元素,则应考虑缩进,如:
      $(this).addClass("highlight")
      .children("li").show().end()
      .siblings().removeClass("highlight")
      .children("li").hide();

    jQuery对象与DOM对象

    • DOM对象:Document Object Model的简写,称为“文档对象模型”
    • jQuery对象:指通过jQuery包装DOM对象所产生的对象
    • 两者之间转换(以$开头的变量指的是jQuery对象)
      var $variable = jQuery对象;
      var ariable = DOM对象;
      //jQuery对象转DOM对象,根据索引
      var $adiv = $("#myDiv");
      var adiv1 = $adiv[0];
      //或
      var adiv2 = $adiv.get(0);
      //DOM对象转jQuery对象,使用$()包括起来DOM对象即可
      var adiv = document.getElementById("mydiv");
      var $adiv = $(adiv);

    jQuery选择器

    • 基本选择器
      • $("li") 选定所有的li标签
      • $("#mydiv") 选定id为mydiv的标签
      • $(".mydiv") 选定class为mydiv的所有标签
      • $("div,span,li") 选定所有的div、span、li标签
      • $("*") 选定所有的元素
    • 层次选择器
      • $("div span") 选定所有div标签中的span标签
      • $("div > span") 选定所有div标签下的子标签span,不包括孙子标签
      • $("#mydiv + div") 选定id为mydiv标签相邻的div标签,等价于$("#mydiv").next("div")
      • $("#mydiv ~ div") 选定id为mydiv标签下同辈的所有div标签,等价于$("#mydiv").nextAll("div")
    • 过滤选择器
      • $("div:first") 选定所有div标签中的第一个div标签
      • $("div:last") 选定所有div标签中的最后一个div标签
      • $("div:not(#mydiv)") 选定所有id不是mydiv的div标签
      • $("div:even") 选定索引为偶数的所有div标签,索引从0开始
      • $("div:odd") 选定索引为奇数的所有div标签,索引从0开始
      • $("div:eq(1)") 选定索引为1的div标签
      • $("div:gt(1)") 选定索引大于1的所有div标签
      • $("div:lt(3)") 选定索引小于3的所有div标签
      • $(":header") 选定所有的标题标签,如:<h1>
      • $(":animated") 选定当前正在执行动画的所有标签
      • $(":focus") 选定当前获取焦点的所有标签
    • XX选择器(未完待续)
    • 选择器使用时的注意事项
      • 对于特殊字符,. # () [] 这些字符应使用\进行转义
      • 注意选择器的空格问题

    相关文章

      网友评论

        本文标题:《锋利的jQuery》读书笔记

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