对于jQuery的初步印象

2024年5月30日 199次阅读 来源: 来自卡冈图雅

主要是阐述一些对jQuery的初步印象！

What? 什么是jQuery?

— 引用自百度百科

“jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计宗旨是“write Less, Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、 Safari 2.0+、 Opera 9.0+等。”

更多详细介绍请点击
百度百科-jQuery链接

Why? 为什么要用jQuery?

原生的DOM API

  • 难用
  • 存在各种兼容性问题
  • 功能太少，不能与时俱进

jQuery

  • 轻量级
  • 简洁优雅，减少代码量， 写得少，做得多， 链式调用
  • 兼容性好，
  • API友好，符合人类直觉
  • 功能强大，与时俱进

youmightnotneedjquery

这个网站可视化的展示了jQuery的优势

When? 什么时候用jQuery?

  • DOM操作较多（事件监听）
  • 简单的AJAX
  • 需要兼容多款浏览器

什么时候不用jQuery?

  • 页面交互极为简单
  • 页面对流量有苛刻的要求
  • 团队已经有了jQuery的替代品

能用jQuery做什么？

  • Selectors, 方便快捷地选择DOM元素

    使用原生JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码。jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById、getElementsByTagName，getElementsByClassName等等。

    $('div.content')
//找到所有应用.content clss样式的div中所有的p标签
//简洁优雅

//当然javaScript的Selectors API也很强大，也支持通过CSS选择符查询DOM文档获得元素的引用。但是也要考虑到浏览器的兼容，这也就是jQuery的优势。
//document.querySelecor('div.content')
  • Traversing, DOM遍历

    提供各种强大的过滤器对结果进行筛选，缩小选择结果。

    遍历封装的相关方法 .eq(), .first(), .last(), .find(), .has(), .next(), .parent(), .parents()。

  • Manipulation， DOM元素的操作

    创建复制增加删除元素封装的相关方法：例如 $(‘htmlElemtn’),.add(), .remove()，.empty(), .clone()。

    样式封装的相关方法: .addClass(), removeClass(), toggleClass(), hasClass()等等。

    属性封装的相关方法: .attr(), removeAttr()等等。

    位置封装的相关方法: .before(), .after(), insertBefore(), insertAfter(), .append(), .appendTo(), prepend(), prependTo()等等。

    元素取值赋值封装的相关方法：.text(), html()。

  • Utilities，实用程序(工具方法)

    例如： jQuery.each(), jQuery.isArray(), jQuery.trim()等等

  • Events, 事件操作

    事件封装的相关方法: .on(), .off(), .load(), .bind(), .blur()等等

  • Effects, 特殊效果

    特殊效果封装的相关方法： .animate(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .slideToggle()等等

  • AJAX

    Ajax封装的相关方法： jQuery.get(), jQuery.post(), .ajaxStart(), .ajaxSend(), .ajaxSuccss(), .load(), jQuery.getJSON(), jQuery.getScript() 等等

jQuery官方文档

Difference?

jQuery对象和DOM原生对象有什么区别？ 如何转化？

jQuery选择器得到jQuery对象和原生JavaScript中的选择符得到的DOM对象是不同类型的，不等价。

jQuery无法使用原生DOM对象的任何方法，同理Dom对象也不能使用jQuery里的方法。

<div class="content">
        <p>1</p>
        <p>2</p>
        <p>3</p>
</div>

<script>
    var $aDiv = $('div').find('p');
    var aDiv = document.querySelectorAll('div p');
    var bDiv = document.getElementsByTagName('p'); 

    console.log($aDiv); // prevObject: jQuery.fn.init(3) 

    console.log(aDiv);  // _proto_: NodeList(3) 

    console.log(bDiv); //  _proto_: HTMLCollection(3)

    //三者得到的对象都是不同的 
    //$aDiv === aDiv false 
    //$aDiv === bDiv false 
    //aDiv === bDiv false 

    //通过[index]中括号语法可以在两者之间进行转化。 
    //$aDiv[0] === aDiv[0]  true 
    //$aDiv[0] === bDiv[0]  true
    //aDiv[0] === bDiv[0]   true

</script>

从以上代码可以看出

$aDiv = $(‘div’).find(‘p’) 是jQuery特有的对象 prevObject: jQuery.fn.init(3)。

aDiv = document.querySelectorAll(‘div p’)的原型是NodeList。

bDiv = document.getElementsByTagName(‘p’)的原型是HTMLCollection。

三者之间都不等价。

jQuery中有一个包装集概念，包装集就是用伪数组实现的。

    var $objArr = {
        0: '<p>1</p>',
        1: '<p>2</p>',
        2: '<p>3</p>',
        length: 3
    }

    for(var i = 0; i < $objArr.length; i++) {
        console.log($objArr[i])
    }
    // <p>1</p> , <p>2</p>, <p>3</p>

以上代码以对象字面量的形式定义了一个对象$objArr,通过这个对象模拟数组，即伪数组对象。JavaScript中获取一个对象的属性值， 可以使用obj.propery 或者 obj[‘property’]，对象中的property属性以数字开头的时候，用中括号obj[‘propery’]获取值的时候可以不加引号，即obj[property]。 在上面的例子中就是，$objArr[1]，$objArr[2]， $objArr[3]。

是不是很熟悉？

jQuery对象转化为原生DOM对象的其中一种方式就是：$jQueryObj[index]。

所以

  //通过[index]中括号语法可以在两者之间进行转化。 
    //$aDiv[0] === aDiv[0]  true 
    //$aDiv[0] === bDiv[0]  true
    //aDiv[0] === bDiv[0]   true

有了上面的了解， 原生DOM对象转jQuery对象理解起来就简单多了，$(原生DOM对象)的方法，将原生DOM对象转化为jQuery对象。 $是一个方法，调用该方法，将原生DOM对象作为参数传入，$方法内部对原生DOM对象做进一步的加工，使其成为一个包装集，即伪数组对象。

jQuery如何绑定事件？

jQuery有很多绑定事件的方法。

  • .bind( eventType [, eventData ], handler ), bind(捆绑) 为每个匹配元素的特定事件绑定事件处理函数。As of jQuery 3.0, .bind() has been deprecated. jQuery官方文档指出3.0版本中该方法已弃用。
  • .unbind( eventType [, handler ] )，unbind(解开)，bind(捆绑)的反向操作，从每一个匹配的元素中删除绑定的事件。As of jQuery 3.0, .unbind() has been deprecated. jQuery官方文档指出3.0版本中该方法已弃用。
  • .delegate( selector, eventType, handler ), delegate(委派) 为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。jQuery官方文档指出3.0版本中该方法已弃用。
  • .live( events, handler )， jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。jQuery官方文档指出1.7版本中该方法已弃用。
  • .on( events [, selector ] [, data ], handler )， 在选定的元素上绑定一个或者多个事件处理函数（Attach an event handler function for one or more events to the selected elements.）
  • .off( events [, selector ] [, handler ] )， 在选择元素上移除一个或多个事件的事件处理函数。

推荐使用on 或off绑定或者移除事件处理函数， 可以对元素动态绑定，运行速度快，效率高。

$('div').on('click', 'p', (event) => {
    console.lg($(this));
})

jQuery的一些常用API

jQuery展示/隐藏元素

  • show([speed,[easing],[fn]]) 显示隐藏的匹配元素。

    这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

    speed: 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

    easing: (Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

    fn:在动画完成时执行的函数，每个元素执行一次。

  • hide([speed,[easing],[fn]])
    隐藏显示的元素。

    这个就是 ‘hide( speed, [callback] )’ 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

    speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

    easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

    fn:在动画完成时执行的函数，每个元素执行一次。

    <div class="content">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <script>
    var $divP = $('.content').find('p');
    $divP.hide(5000, 'linear', () => {
        alert('Hiden Done!');
    });

    $divP.show(5000, 'linear', () => {
        alert('Show Done!!');
    });

    </script>

jQuery的动画

  • animate(params,[speed],[easing],[fn])， 用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性， 如height、top、opacity。注意：所有指定的属性必须用驼峰命名的形式，如：marginLeft 代替 margin-left。

而每个属性的值表示这个样式属性到多少动画结束， 如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”、“toggle”这样字符窜值， 则会为属性调用默认的动画形式。

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.

fn:在动画完成时执行的函数，每个元素执行一次。

.delay()设置一个定时器，以延迟 执行队列中后续的项目。

.clearQueue()从队列中删除所有还没有运行过的项目。

.stop()在匹配的元素上停止当前正在运行的动画。

.finish()针对匹配的元素 停止当前 正在运行的动画，删除所有 队列中的动画，并结束所有 动画

    <button id="go">Run</button>
    <div id="block">Hello!</div>

    <script>
    $('#go').on('click', (event) => {
        $('#block').animate( {
            width: "90%",
            height: "100%",
            fontSize: "10em",
            borderWidth: 10
        }, 5000 )
    });
    </script>

jQuery设置和获取元素内部HTML内容，设置和获取元素内部文本。

  • .html([val|fn]), 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

    无参数， 返回第一个匹配元素内容。

    参数 val，设置所有匹配元素的内容。

    参数 回调函数fn，设置所有匹配元素的内容。

    <p>hello</p>
    <p>how are you?</p>


    <script>

        console.log($('p').html()); //hello

        $('p').html('Hello<b>World</b>!');
        //HelloWorld!

        $('p').html((n) => {
            console.log('这个p元素的index是:' + n);
        });
        //这个p元素的index是:0, 这个p元素的index是:1

    </script>
  • text([val|fn])， 取得所有匹配元素的内容。

    结果是由所有匹配元素包含的文本内容组合起来的文本。

    无参数，返回元素的文本内容。

    参数val，设置所有匹配元素的文本内容。

    回调函数fn， 使用函数来设置所有匹配元素的文本内容。

 <p>hello </p>
    <p>how are you?</p>

    <script>
        console.log($('p').text()); //hello how are you?
        
        $('p').text('Hello World!!');// <p>Hello World!!</p> , <p>Hello World!!</p>

        $('p').text((n) => {
            console.log('the index of this p element is ' + n);
        }); //the index of this p element is 0, the index of this p element is 1
    
    </script>

jQuery 设置和获取表单用户输入或者选择的内容，以及设置和获取元素属性。

  • val([val|fn|arr])， 获得匹配元素的当前值。

    在jQuery1.2中，可以返回任意元素的值。 包括select。如果多选，将返回一个数组，其包含所选的值。

    无参数， 获取文本框中的值。
    参数val，设定文本框的值。
    回调参数fn, 设定文本框的值。
    参数array, 设定一个select和一个多选的select的值。

    <div>
        输入框 <input type="text" value ="hello" placeholder="hello">
    </div>

    <script type="text/javascript">
        console.log($('div > input').val());//hello

        $('div > input').val('hello world');

        console.log($('div > input').val());//hello world
        
        $('div > input').val(() => {
            return 'how are you?'
        }) //how are you?
        
    </script>


    <p></p>
    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <script>
    
    function displayVals() {
        var singleValues = $('#single').val(); // Single
        var multipleValues = $('#multiple').val() || []; // ["Multiple","Multiple3"]
        $('p').html('<b>Single:</b> ' + singleValues + ' <b>Multiple:</b> ' + multipleValues.join(','));

    }
    displayVals(); //<p><b>Single:</b> Single <b>Multiple:</b> Multiple,Multiple3</p>
    
    </script>
  • attr(name|properties|key,value|fn), 设置或返回被选元素的属性值。

    参数name： 返回元素的属性值。

    参数properties： 可为元素设置多个属性及属性值。

    参数key，value： 为元素设置属性和值。

    参数key，回调函数： 为元素属性设置属性和值。

    <img src="./01.png" alt="Sunny">

    <script>
        var $img = $('img');
        console.log($img.attr('src')); // ./01.png
        
        var setImage = $img.attr({
            src: './test.jpg', alt: 'test Image'
        }) // <img src="./test.jpg" alt="test Image">


        var setImageSrc = $img.attr('src', './test1.jpg');
        //<img src="./test1.jpg" alt="test Image">
        
        $img.attr('title', () => {
            return 'this is a photo!'
        }); //<img src="./test1.jpg" alt="test Image" title="this is a photo!">

    </script>
    原文作者：来自卡冈图雅
    原文地址: https://segmentfault.com/a/1190000016152082
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞