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 / ...
随机推荐
- linux下PS1命令提示符设置
linux下PS1命令提示符设置 在此文件最后一行添加:vim /etc/profileexport PS1='[\u@\h \W]\$ ' #这里必须用单引号. \d :代表日期,格式为 ...
- ONVIF、RTSP/RTP、FFMPEG的开发实录
前言 本文从零基础一步步实现ONVIF协议.RTSP/RTP协议获取IPC实时视频流.FFMPEG解码.开发环境为WIN7 32位 + VS2010. 最终成功获取浩云.海康.大华的IPC实时视频流. ...
- selenium 看有啥api 的文件(文件用编辑器 or 浏览器打开就可以看到有什么 api)
- 【转】JMeter远程测试
详解JMeter远程测试(1) 如果运行JMeter客户端的机器性能不能满足测试需要,那么测试人员可以通过单个JMeter GUI客户端来控制多个远程JMeter服务器,以便对服务器进行压力测试,模拟 ...
- 源码编译安装ceph
标签(空格分隔): ceph,ceph安装,ceph运维 centos7系统,aarch64架构下安装最新版本的ceph(13.0.0),x86架构的环境无需修改脚本即可. 一,物理环境: 内核版本: ...
- 注册驱动时如何调用probe函数 ？
platform_driver_register driver_register bus_add_driver //把驱动放入总线的驱动链表里 ...
- JavaScript笔记——基础知识（一）
<Script>标签属性 <script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法.它主要有以下 几个属性: charse ...
- Fragment的陷阱:概述
现在主流的APP都会使用到Fragment,相信你也一定使用过,今天为大家介绍一下我曾经踏过的一个关于Fragment的坑. 以前做过的一个项目,Fragment嵌套高德地图,当再次进入Fragmen ...
- babel-preset-latest使用介绍
本文介绍babel中的babel-preset-latest插件 简介 该插件的作用是包含了每年的js代码转换规则 默认包含es2015,es2016,es2017,默认对这些代码都会进行转码,从而方 ...
- 第十九章 MySQL Cluster（待续）
··········