JS和JQuery的比较
一、 Jquery它是javascript的一个轻量级框架，是对javascript进行封装。
二、JQuery和JS都有加载函数，但表达方式不同。
1、JS中的加载函数：
//整个文档加载完毕后执行
function init(){
alert("张三");
}
//整个文档加载完毕后(包括图片)执行
window.onload= function(){
alert("张三");}
2、JQuery中的加载函数：
//dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完
jQuery(document).ready(function(){
alert("李四");
});
可简化为：
$(function(){
alert("王五");
});
3、2种加载方式的比较
<html>
<head>
<meta charset="UTF-8">
<title>JS与JQ页面加载区别</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("张三");
} //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
window.onload = function(){
alert("老王");
} //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
}); //JQ不存在覆盖问题，加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
}); //简写方式
$(function(){
alert("汾九");
}); </script>
</head>
<body>
</body>
</html>
三、获取元素
JS: document.getElementById();
JQ: $(“#id”);
四、Jquery对象与DOM对象转换
function JSWrite(){
//document.getElementById("span1").innerHTML="美美哒！";
var spanEle = document.getElementById("span1");
$(spanEle).html("美美哒！");
}
$(function(){
/*document.getElementById("btn1").onclick = function(){
document.getElementById("span1").innerHTML="帅帅哒！";
}*/
$("#btn1").click(function(){
//JQ对象转换成DOM对象的第一种方式
//$("#span1")[0].innerHTML="呵呵哒！";
//JQ对象转换成DOM对象的第二种方式
$("#span1").get(0).innerHTML="呵呵哒！";
});
});
注意：JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。
JS和JQuery的比较的更多相关文章
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- label用js，jquery取值赋值，以及怎么在后台取值
label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...
- JS与Jquery区别
很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- js+html+jquery 个人笔记
js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- JS和JQuery总结
目录目录 2js部分一.词法结构 1.区分大小写 2.注意 // 单行 /* 多行注释 */ 3.字面量(直接量 literal) 12 / ...
随机推荐
- WIN10运行软件，窗口不显示（移动到屏幕外无法复原）的解决办法 Lebal:bug10解决方案
双显示器切换回单显示器的时候,可能会遇到窗口移动到屏幕外不显示的情况 像这样虽然有缩略图但是点击无反应,并且平铺窗口也不管用,这个时候单击该窗口,Alt+space 执行最小化以及最大化操作即可复原
- Java中的阻塞和非阻塞IO包各自的优劣思考（经典）
Java中的阻塞和非阻塞IO包各自的优劣思考 NIO 设计背后的基石:反应器模式,用于事件多路分离和分派的体系结构模式. 反应器(Reactor):用于事件多路分离和分派的体系结构模式 通常的,对一个 ...
- mysql数据增删查授权
一 介绍 MySQL数据操作: DML ======================================================== 在MySQL管理软件中,可以通过SQL语句中的 ...
- python---mysql 学习笔记
数据库------mysql 安装: linux----centos7: 在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可 ...
- 真是服了：.EndEdit(); 如果没哟这个一句（c#更新ACCESS，datagridview无法更新第一行）
//保存 this.jbbBindingSource3.EndEdit(); this.jbbTableAdapter3.Update(this.databaseDataSet3.jbb);
- latex中如何引用公式
在使用latex编辑文章时,经常会需要引用公式.图表等等. 如果我们人为地对这些公式.图表进行编号1-2-3-4,然后在文章中使用Eq(1)-Eq(2)-Eq(3)-Eq(4)去引用这些公式,固然是可 ...
- java定时任务调度工具Timer与Quartz的区别
Timer与Quartz的区别有三点: 1.出身不同:Timer由jdk直接提供,调用方式简单粗暴,不需要其它jar包支持.Quartz并非jdk自带,需要引入相应的jar包 2.能力区别:主要体现在 ...
- centos7 安装erlang rabbitMQ
环境: 虚拟机 centos7 minimal 一.安装Erlang 1.安装依赖 yum install build-essential openssl openssl-devel unixODBC ...
- map两种插入方法解析（insert() 与 下标[]操作）
insert 含义是: 如果key存在,则插入失败,如果key不存在,就创建这个key-value. 实例: map.insert((key, value)) 利用下标操作的含义是: 如果这个key存 ...
- [bzoj3223]文艺平衡树(splay区间反转模板)
解题关键:splay模板题. #include<cstdio> #include<cstring> #include<algorithm> #include< ...