手记

读《犀利开发jQuery内核详解与实践》(1)

jQuery简介

  • jQuery设计宗旨是“Write Less,Do More”,就是说用更少的代码,做更多的事情。

  • jQuery项目主要由 jQuery Core(核心库)jQuery UI(界面库)Sizzle(CSS选择器)QUnit(测试套件) 四部分组成。

  • jQuery的特性:

    • jQuery为频繁的DOM操作,针对浏览器兼容性提供了解决方案,并封装了更为简约的API;

    • 支持链式操作,让JS代码书写更优雅;

    • jQuery将与之相关的方法和属性,都封装在jQuery对象中,避免造成全局变量污染;

    • 最后不得不提的是jQuery的扩展,即便现在angularJS、vueJS横行的年代,很多时候也不得不借助丰富的jQuery插件;

  • jQuery相关网址:

jQuery HelloWorld

<!DOCTYPE html><html>
    <head>
       <meta charset="UTF-8">
       <title>jq hello</title>
    </head>
    <body>
        <!-- 导入jQuery库 -->
        <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){               console.log('jquery is ready!'); 
            });        </script>
    </body></html>
  • $是jQuery的别名,$()等同于jQuery()

  • 由于jQuery无可避免需要操作DOM文档,所以应该在DOM载入之后再执行jQuery代码。换句话说,所有jQuery相关操作应该再DOM ready事件触发后才进行。

//匹配到document节点后,绑定ready事件(也可简写成以上helloworld的方式)$(document).ready(function(){    //jQuery do something});

jQuery对象和DOM对象

  • 很多初学者会在打开一个js文件后,困惑这究竟是JavaScript原生代码还是jQuery代码。是由于没区分JavaScript DOM API和jQuery API的差异,那什么是jQuery对象,什么是DOM对象呢?

区别
  • DOM(Document Object Model)文档对象模型主要依赖原生JavaScript暴露的接口来访问和操作。比如getElementByTagName()getElementById()等内置的方法。而jQuery对象是对DOM对象进行一层包装,更准确的说,jQuery对象将一个或多个DOM对象封装后产生一个新对象

  • 由于jQuery对象和DOM对象存在差异,所以直接用jQuery对象调用DOM对象的方法是错误的,反之亦然。

jQuery对象转DOM对象
  • 上面提到,jQuery对象是包含一个或多个DOM对象的类数组对象。所以直接通过数组下标从jQuery对象获取DOM对象:

//实际上jQuery validate表单验证插件的源码也是这么写的var li = $li[0];
  • 除此之外,还可以通过jQuery对象提供的get方法来获取:

var li = $li.get(0);
DOM对象转jQuery对象
  • 相对来说,DOM对象转成jQuery对象就比较简单了,直接调用jQquery的构造函数即可:

//可以传递单个或多个DOM对象var li = document.getElementByTagName('li');var $li = $(li);

jQuery ready()和JavaScript load()事件比较

HTML文档的加载顺序:
  1. 解析HTML结构

  2. 加载外部javascript脚本和css样式文件

  3. 解析并执行javascript脚本

  4. 构造HTML DOM模型

  5. 加载外部图片等外部文件

  6. 页面加载完毕

  • jQuery.ready()事件是DOM结构绘制完毕就触发,而原生的load()事件要等待所有资源准备好之后才触发。换句话说,如果页面需要加载大量的外部文件时,需要等待很长时间才执行load()方法,而jQuery.ready()则不需等待所有资源加载完毕。

  • 另外,jQuery.ready()事件可以定义多次。

jquery构造函数

  • jQuery把所有的操作都封装在一个jQuery构造函数中,形成了统一的操作入口,简化了操作门槛。jQuery构造函数主要的调用方式有如下四种:

/***
 *
 * 方式一:jQuery(expression)
 * 参数传入一个表达式的字符串,通过表达式匹配文档的元素,最终会把找到的元素封装成jQuery对象返回。
 */jQuery('#testDiv');/***
 *
 * 方式二:jQuery(html)
 * 参数传入HTML字符串,jQuery将创建一个对应结构的DOM节点的jQuery对象
 */jQuery('<input type="text">');/***
 *
 * 方式三:jQuery(elements)
 * 参数传入一个或多个DOM元素,jQuery将其封装成jQuery对象并返回
 */jQuery('li').css('backgroud-color','#FFF');/***
 *
 * 方式四:jQuery(fn)
 * 传入一个函数,其等价于`$(document).ready()`处理函数
 */$(function(){
    $('ul').css('color','red');
});

jQuery链式语法

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>jquery 链式操作</title>
        <style type="text/css">
            .txt{                display: block;
            }        </style>
    </head>
    <body>
        <span class="txt">我是一段文本内容</span>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script type="text/javascript">
            $(function(){                //创建四个按钮
                $('<input type="button" value="click me">'+                  '<input type="button" value="triggle click">'+                  '<input type="button" value="detach handler">'+                  '<input type="button" value="show/hide text">').appendTo($('body'));                //为第一个按钮绑定click事件
                $('input[type="button"]').eq(0).click(function(){
                    alert('click me!');                //为第二个按钮绑定click事件,触发第一个按钮的点击
                }).end().eq(1).click(function(){
                    $('input[type="button"]:eq(0)').trigger('click');                //为第三个按钮绑定click事件,解除第一个按钮的点击事件
                }).end().eq(2).click(function(){
                    $('input[type="button"]:eq(0)').unbind('click');                //为第四个按钮绑定toggle事件,隐藏或显示文本内容
                }).end().eq(3).click(function(){
                    $('.txt').toggle('slow');
                });
            });        </script>
    </body></html>
  • jQuery提供了end()eq()filter()等方法来进行链式操作。但为了代码的可阅读性,建议同一行调用的方法不超过3个,如果代码过长可考虑换行或者缩进。

jQuery选择器

  • 不可否认,强大的选择器也是jQuery能成为最流行的js框架的原因之一。试想如果jQuery的选择器仍像原生JSgetElementById()那么孱弱,你会在项目中使用jQuery吗?

  • jQuery选择器,实际上就是一个表示特殊语义的字符串,它支持id、tagName、css1~3和xpath表达式。然后调用jquery构造函数将该字符串传入,就能选择DOM对象,封装成jQuery对象。

jquery选择器的过滤和选择
  • jQuery过滤器按照功能主要分为 选择筛选

    $(':[title]');//等价于 $('*:[title]')
  1. 选择功能的选择器则不会有默认的范围。

  1. 过滤作用的选择器是从指定条件匹配到的元素中,通过冒号:来筛选元素,默认情况下,是从所有元素*中进行过滤。



作者:梁同学de自言自语
链接:https://www.jianshu.com/p/0c4d55d48537


0人推荐
随时随地看视频
慕课网APP