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 / ...
随机推荐
- ffmpeg超详细综合教程——摄像头直播
本文的示例将实现:读取PC摄像头视频数据并以RTMP协议发送为直播流.示例包含了1.ffmpeg的libavdevice的使用2.视频解码.编码.推流的基本流程具有较强的综合性.要使用libavdev ...
- PHP中的use、命名空间的理解
看.Net中的命名空间和using using Ddd.Core; using Ddd.Core.Caching; using Ddd.Core.Data; using Ddd.Core.Domain ...
- PHP面向对象深入研究之【继承】，减少代码重复
继承 先看两个类 <?php class CdProduct { public $playLength; // 播放时间 public $title; public $producerMainN ...
- ILMerge最佳实践
背景 为了生成的代码更加简捷,复制方便,常常会把多个可执行文件合并成一个. 方案 Project=>Properties=>Build Events=>Edit Post-build ...
- java 高并发解决方案
对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并发问题是绝大部分的程序员头疼的问题, 但话又说回来了,既然逃避不掉,那我们就坦然面对吧~今天就让我们一起来研 ...
- EasyUI应用总结
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncod ...
- [原创]Spring boot 框架构建jsp web应用
说明 Spring boot支持将web项目打包成一个可执行的jar包,内嵌tomcat服务器,独立部署 为支持jsp,则必须将项目打包为war包 pom.xml中设置打包方式 <packagi ...
- Mycat主从模式下的读写分离与自动切换
1. 机器环境 192.168.2.136 mycat1 192.168.2.134 mydb1 192.168.2.135 mydb2 2在mysql1.mysql2上安装mysql 更改root用 ...
- peerconnection_client分析笔记
Windows版本的peerconnection_client demo是一个win32程序,入口函数为main.cc里面的wWinMain,程序整体流程就从这个入口函数下手开始分析. 1.peer ...
- 英语单词state和status的区别
state:比较常用,各种状态都可以用它,但是它更着重于一种心理状态或者物理状态. Status:用在人的身上一般是其身份和地位,作"状态,情形"讲时,多指政治和商业. state ...