Skip to content

Latest commit

 

History

History
154 lines (102 loc) · 6.45 KB

jQuery.md

File metadata and controls

154 lines (102 loc) · 6.45 KB

  • jQuery中jQuery和jQuery.fn的区别

    你可以把jQuery理解为jQuery的类，把jQuery.fn理解为jQuery的实例(那些通过jQuery选择器选择的元素都可以理解为jQuery的实例)

  • jQuery.fn的init方法是否返回的this是指什么对象？为什么要返回this？

    当你使用jQuery去生成jQuery实例也就是$()的时候，你也就调用了jQuery.fn.init方法，其返回的this自然就是你找到的元素了，即jQuery.fn.init的实例，也就是一个类数组对象，至于为什么要返回this，不返回this，无法进行后续对jQuery元素的操作啊23333.

  • jQuery中如何将数组转化为json字符串，然后再转化回来?

    我印象中好像是没有这个方法，下次发现了再更新啦

     $.fn.stringifyArray = function(array) {
 	return JSON.stringify(array);	
 }

 $.fn.parseArray = function() {
 	return JSON.parse(array);	
 }

    这样就给jQuery的实例添加了两个方法，$("").stringifyArray(array)这样使用就行

  • 针对jQuery的优化方法？

    1. 基于class的选择器性能行对于ID选择器开销大得多，因为需要遍历所有DOM元素，因此，能用ID选择器的就不要用class选择器
    2. 频繁操作的DOM，先缓存起来再操作，用jQ的链式调用更好，反正我平时就特别喜欢链式调用233，我个人觉得链式调用更加清晰
    3. for (var i = size, len = arr.length; i < length; i++)for循环每一次都查找了arr数组的长度，如果在循环过程中长度不变的话，可以使用一个变量将其保存，这样循环可以跑的更快

  • $.extend()和$.fn.extend()的区别?

    上面有个题目讲到$是jQuery类，$.fn是jQuery实例，然后我们又知道extend是扩展方法，那么自然而然就能理解$.extend()扩展的是jQuery类的方法，可以理解为jQuery类的静态方法，$.fn.extend()自然就是扩展jQuery实例的方法，下面举两个栗子来加强记忆

     $.extend({
 	minValue: function(a, b) { return a > b ? b : a }
 })
 $.minValue(1, 2); //1

 $.fn.extend({
 	sayHello: function() {
 		console.log('Hello');
 	}	
 })
 $('#id').sayHello();  //$.fn是实例，那么该方法只能是实例来调用，$.sayHello会报错

  • jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝?

    看到这里，可能会有疑问，上面一个问题明明讲了$.extend()就是为JQuery类扩展方法的，这里又说道属性拷贝，其实没有冲突，上文只是为了抓住重点进行解释。

    $.extend(boolean, target, object1, object2)

    第一个boolean值是指定是否采用深拷贝的标志，可以显示的指示为true，不能显示的指定为false，假如不用深拷贝的话，这个属性不赋值就行；

    target是进行属性拷贝的源对象，加入未定义，就默认为jQuery

    object1/object2即为一个一个的对象，后面对象中假如有和前面对象重复的定义，则后面的覆盖前面定义的属性

  • jQuery的队列是如何实现的？队列可以用在哪些地方？

    说实话，我之前也没有用过jQuery的队列，正好借此机会，学习了一下关于队列的方法

    jQuery中，jQuery和jQuery.fn中都有queue相关的api，需要牢记的一点是队列中只能存函数

    首先我们看一下jQuery类中的队列

     function aaa() {
 	alert(1);
 }
 
 function bbb() {
 	alert(2);
 }
 
 $.queue(document, "q1", aaa);  //在document中创建一个队列q1，并往q1中添加aaa函数
 $.queue(document, "q1", bbb);  //在document下q1队列中添加bbb函数
 $.queue(document, "q1", [aaa, bbb]) //和上方代码效果一样，只是合起来写
 
 $.dequeue(document, "q1")  //取出document下q1队列中第一个函数并执行

    下面我们看一下jQuery实例中的队列

     $(document).queue("q1", aaa); //入队
 $(document).dequeue("q1") //出队
 $(document).clearQueue("q1") //清空队列

    至于队列有什么作用呢，大家可以想想，在接触jQuery动画的时候，是不是有动画依次执行的例子

     $(this).animate({ width: 300 }, 2000).animate({ left: 300 }, 2000);

  • 谈一下jQuery中的bind(), live(), delegate(), on()的区别?

    bind()方法用来给当前已经存在的元素绑定事件处理函数(click, change等)，我个人喜欢用click()这样的写法

    live()，delegate()，on()我认为他们的作用是用来给当前还未被添加到DOM中的元素绑定事件处理函数，他们使用的都是事件委托原理，其中live()效率底下已经被废弃

    $('selector').live(type, callback) //live是使用document的事件委托，因此效率非常低

    $('parent').delegate(selector, type, callback) //delegate使用的是父亲元素的事件委托

    $('parent').on(type, selector, callback)

  • jQuery的slideUp动画，如果目标元素是被外部事件驱动，当鼠标快速地连续触发外部元素事件，动画会滞后的反复执行，该如何处理呢？

    利用stop()方法，如$('#div').stop().animate({ width: 100 }, 100)

    这里再回忆一下jQuery的stop()方法

    stop(): 停止当前执行的动画，如果动画存在队列的话，只能停止当前的，无法停止后续的动画队列

    stop(true)：停止当前执行的动画随后所有动画，且不会跳转到当前动画的终态

    stop(true, true)：停止当前执行的动画随后所有的动画，然后跳转到当前动画的终态，要记住，jQuery是无法跳转到动画队列最后一个动画的终态的，无论什么方法都不行

  • jQuery一个对象可以同时绑定多个事件，这是如何实现的？

    1. 多个事件同一个函数：$('div').bind('click change', function() {});

    2. 多个事件不同函数：

      $('div').bind({
	click: function() {},
	change: function() {}
})

  • 使用jQuery，找到id位selector的select标签中有用data-target属性为isme的option的值

    $('#selector option[data-target=isme]')

  • 需要注意的是$('#id')获取的永远是对象，因此不能用if($('#id'))来判断，可以使用if($('#id').length > 0)或者if($('#id')[0])来判断

  • jQuery的遍历方法each中的index不能省略

  • jQuery的ajax操作在最后可以增加一个always操作，这样无论返回的结果是success还是error，都要执行该always中的语句

      $.ajax({
  }).always(function() {
  	... //必须执行的代码
  })

  • jQuery可以通过trigger来触发自定义事件

    $(window).on('', (custom:event) => {
    // pass
});
$(window).trigger('custom:event');