关于jQuery和js的区别

jq的预加载?

  ①页面加载完之前执行,与嵌入的js加载方式一样(写jquery插件的时候使用)

(function ($) {

    alert('start');

})(jQuery);

②页面加载后执行。

$(document).ready(function(){

    alert('jquery ready');

});

③页面加载后执行。

$(function(){

    alert('jquery onload');

});

④页面加载后执行。

jQuery(function($) {

    alert('jQuery ready ');

});

与window.onload 区别?

window.onload():

加载时机:必须等待网页全部加载完毕(包括图片等),然后再执行JS代码;

执行次数:只能执行一次,如果第二次,那么第一次的执行会被覆盖;

  $(document).ready():

加载时机:只需要等待网页中的DOM结构加载完毕,就能执行JS代码;

执行次数:可以执行多次,第N次都不会被上一次覆盖;

简写:$(function () {});

 

2.jq与js对象的互相转换;

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,$(DOM 对象) ;

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);

jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。

jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象;

3.jq的链式调用什么意思?

节约JS代码;所返回的都是同一个对象,可以提高代码的效率;通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用。利用JS下的简单工厂方法模式,来将所有对于同一个DOM对象的操作指定同一个实例。

4.jq的事件监听

1.bind:

bind(type,[data],function(eventObject))  bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,

参数函数如下:

type:事件类型,如click、change、mouseover等;

data:传入监听函数的参数,通过event.data取到;

function:监听函数,可传入event对象,这里的event是jquery封装的event对象。

2.live

live(type, [data], fn)   live的参数和bind一样,它又有什么蹊跷呢,我们还是先瞄一眼源码:

live: function( types, data, fn ) {

    jQuery( this.context ).on( types, this.selector, data, fn );

    return this;

}

可以看到live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素),使用事件委托的优点一目了然,新添加的元素不必再绑定一次监听器。

注意:live方法在在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除,官方建议使用on代替。

3.delegate

将监听事件绑定在就近的父级元素上,源码:     

delegate: function( selector, types, data, fn ) {       

    return this.on( types, selector, data, fn );    

}

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

这下,我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。代码,实现效果,点击div,两个p标签的文字颜色都发生变化。

4、on

on(type,[selector],[data],fn)参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。代码,实现效果同上,把delegate改为on,第一个参数为click,第二个参数p可写可不写,第三个参数同上。

5.jq的on 、live、delegat、bind 区别?

相同点:

1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

6.jq的ajax

7.如何解决$符号的冲突?

方案1:引入noConflict(),将$替换为其他符号

代码如下:

var $j = jQuery.noConflict();

$j(document).ready(function(){

    $j("#btn1").click(function(){

        alert("Text: " + $j("#test").text());

    });

});

缺点:引入了这段代码后,不仅是当前的js文件,该html引用的所有js中,如果有用到jquery中的$,都得用$j来代替之前的$ ;

方案2:

ready函数是jquery的入口函数,可以将

$(document).ready(function(){})

替换成

jQuery( document ).ready(function( $){}

缺点:只对ready嵌套内的代码有效,对嵌套外的代码是无效的。如果你所有的逻辑,都在写ready函数中,那没问题。但我们一般都会在ready函数之外写一些子函数,然后ready函数再去调用这些函数。这个方案对这些函数是无效的,因此这套方案有局限性。

方案3(推荐,特别是开发js插件时):

给js内容包上一个函数

代码如下:

jQuery(function($){

//你的js代码放在这里(例如第二个方案提到的ready函数和子函数)

//如果是js文件,其实就是在文件头部和尾部各加一行代码

}

或者代码如下:

(function($) {

//你的js代码

})(jQuery);

8.jq需不需要做兼容?

jQuery新版本已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。

如果项目需要兼容IE低版本,需要使用jQuery1.x版本,从2.x开始已经不兼容IE6、7、8了。

9. jq.js和jq.min.js 区别  开发时用那种 上线后用那种

1、jquery的不同的下载方式。2、文件名不完全相同

一、区别:

1.jquery.min.js:是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化。

2.jquery.js:是完整的未压缩的jQuery库,文件比较大。

二、应用:

1、jquery.min.js(上线后):这个版本一般用于网站引用使用,减小文件体积,降低网站流量,提升访问速度等。

2、jquery.js(开发时):一般用于阅读学习源码或修改源码,一般不用于线上项目。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章