深入分析JQuery和JavaScript的异同

ps:LZ觉得这个标题有点大了，超出了能力范围，不喜勿碰。目前只记录LZ能力范围内的，日后持续补充。

一、JQuery对象和DOM对象的相互转化（《锋利的JQuery》）

JQuery转化为DOM：

1、var jq = $(‘#selector');   var dom = jq[index];

2、var jq1 = $(‘#selector1');  var dom1 = jq1.get(index) 或者 var dom1 = jq1.get()[index];

DOM转化为JQuery：

假设cr是一个DOM对象，转为JQuery，jqcr = $(‘cr');

二、JQuery的$(document).ready()和JavaScript的window.onload()的区别（《锋利的JQuery》）

1、执行时机

window.onload必须等待网页中所有资源(包括图片)加载完成后才能执行，而$(document).ready()在所有DOM结构绘制完毕后就执行，但是可能与DOM相关联的资源还没有加载完毕。

2、编写个数

一个文档中，window.onload只有是一个，而$(document).ready()可以有多个

3、简化方法

window.onload没有简写形式，$(document).ready()可以简写为$(function(){}).

三、JQuery和JavaScript中访问属性名称的区别（《JQuery实战》）

JQuery规范名称                             DOM规范
       cellspacing                                    cellSpacing
       class                                                className
       colspan                                          colSpan
       cssFloat                                         IE中是styleFloat，其他浏览器是cssFloat
       float                                               IE中是styleFloat，其他浏览器是cssFloat
       for                                                  htmlFor
       frameborder                                frameBorder
       maxLength                                  maxLength
       readonly                                      readOnly
       rowspan                                       rowSpan
       stylefloat                                      IE中是styleFloat，其他浏览器是cssFloat
       tabindex                                       tabIndex
       usemap                                         useMap

四、冲突

DOM理论上不会有冲突产生，JQuery防止冲突产生的两种解决方法：（《锋利的JQuery》）

1、JQuery库在其他库之后导入

调用JQuery。noConflict()方法将$控制权给其他库使用，或者自定义快捷方式，$j = JQuery.noConflict();

2、JQuery库在其他库之前导入

直接使用JQuery代替$工作，同时$可以作为其他库的快捷方式。

赞 (0)

相关推荐

  • Javascript jquery css 写的简单进度条控件

    通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

  • 用javascript实现jquery的document.ready功能的实现代码

    实现jQuery的document.ready功能 document.ready (function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 1) return; if (ie) (function () { try { d.documentElement.doScroll(

  • javascript/jquery获取地址栏url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 复制代码 代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情 首先看看单纯的通过javascript是如何来获取url中的某个参数 复制代码 代码如下: function

  • jquery和javascript的区别(常用方法比较)

    jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQuery 常用方法比较 1.加载DOM区别 JavaScript: window.onload function first(){ alert('first'); } function second(){ alert('second'); } window.onload = first; window

  • Javascript Jquery 遍历Json的实现代码

    复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj; var __db_cp=vCp; var vCp={"cppage":[ {"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","enam

  • javascript jQuery $.post $.ajax用法

    jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示. callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法). type (String) : (可选)官方的说明是:Type o

  • JavaScript/jQuery 表单美化插件小结

    JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

  • javascript的onchange事件与jQuery的change()方法比较

    改变一下思路变成键盘按键事件,如下: <asp:TextBox ID="txtName" runat="server" onkeyup="fNameChange();"></asp:TextBox> 这里有一点毛病是,你复制粘贴的内容,无法触发这个事件.下面是相关的一些代码: 复制代码 代码如下: function fNameChange(){ if($('#txtName').val().length<6){ jQ

  • javascript和jquery修改a标签的href属性

    javascript: 复制代码 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 复制代码 代码如下: $("#myId").attr("href"

  • Javascript/Jquery——简单定时器的多种实现方法

    第一种方法: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

随机推荐