一、 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的比较的更多相关文章
	

    
						
  1. 【前端性能】必须要掌握的原生JS实现JQuery
		
    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
    
		
    2. 
						
  2. 移动端用js与jquery实时监听输入框值的改动
		
    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
    
		
    3. 
						
  3. label用js，jquery取值赋值，以及怎么在后台取值
		
    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...
    
		
    4. 
						
  4. JS与Jquery区别
		
    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...
    
		
    5. 
						
  5. js和jquery如何获取图片真实的宽度和高度
		
    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
    
		
    6. 
						
  6. JS和JQuery的总结
		
    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
    
		
    7. 
						
  7. js和jquery获取当前对象的子元素
		
    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
    
		
    8. 
						
  8. js+html+jquery 个人笔记
		
    js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...
    
		
    9. 
						
  9. prototype.js 和 jQuery.js中 ajax 的使用
		
    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
    
		
    10. 
						
  10. JS和JQuery总结
		
    目录目录    2js部分一.词法结构    1.区分大小写    2.注意   // 单行      /*  多行注释  */    3.字面量(直接量  literal)        12  / ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 微信 unionid 获取 解密数据
			
    1.申请注册微信开放平台  open.weixin.qq.com 2.绑定公众号或者小程序到微信开放平台 3.微信公众号的话,使用微信网页授权获取 unionid https://mp.weixin. ...
    
			
    2. 
						
  2. 在ERP软件行业项目应该怎么做？
			
    本人进入软件行业已经有5个年头了,主导实施和参与过的大大小小的项目有20余个.其中有些项目做的非常好,提升了客户企业的管理水平,也规范了企业的业务操作水平,优化了企业的流程,客户非常认同我们实施的价值 ...
    
			
    3. 
						
  3. An internal error occurred during: "Map/Reducelocation status updater".java.lang.NullPointerException
			
    当我们运行wordcount代码时,出现报错,如下所示: An internal error occurred during: "Map/Reducelocation status upda ...
    
			
    4. 
						
  4. 1041 Be Unique
			
    题意:找到一串数字序列中首个出现的不重复的数字. 思路:用哈希,因为数值大小在[1,10^4],所以可以直接开数组.输入数据时记录每个数字出现过的次数.然后遍历原序列,遇到第一个次数为1的数字就是所求 ...
    
			
    5. 
						
  5. 微信小程序之巧妙的封装
			
    巧妙的封装 暴露一个访问地址xapp.config.js module.exports = { api_host: `https://a.squmo.com/yizu` } 继续引入,加暴露api.c ...
    
			
    6. 
						
  6. IntelliJ IDEA 安装 Julia 插件
			
    打开 IntelliJ IDEA 点击 Configure 选择 Plugins 然后点击 Browse repositories 搜索 Julia,然后点击 Install 进行安装 安装完重启一下 ...
    
			
    7. 
						
  7. linux的学习在runoob.com网站
			
    学习位置: Shell 变量
    
			
    8. 
						
  8. Linux系统SCSI磁盘扫描机制解析及命令实例(转)
			
    转载请在文首保留原文出处:EMC中文支持论坛 介绍 Linux系统扫描SCSI磁盘有几种方式?Linux新增LUN之后,能否不重启主机就认出设备?如果安装了PowerPath,动态添加/删除LUN的命 ...
    
			
    9. 
						
  9. 黑客工具包ShadowBrokers浅析
			
    臭名昭著的方程式组织工具包再次被公开,TheShadowBrokers 在 steemit.com博客上提供了相关消息. 本次被公开的工具包大小为117.9MB,包含23 个黑客工具,其中部分文件显示 ...
    
			
    10. 
						
  10. Spring Cloud Eureka 4 (高可用服务注册中心)
			
    在微服务这样的分布式环境中,我们需要充分考虑发生故障的情况,所以在生产环境中必须考虑对各个组件进行高可用部署,对于服务注册中心也是一样. Eureka Server 的高可用实际上就是讲自己作为服务向 ...
    
			
    11.