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 / ...
随机推荐
- 复制书稿(book) (二分,贪心+dp)
复制书稿(book) 时间限制: 1 Sec 内存限制: 128 MB提交: 3 解决: 1[提交][状态][讨论版][命题人:quanxing] 题目描述 现在要把m本有顺序的书分给k个人复制( ...
- web.config 权限设置
<system.web> <authorization> <!--未登陆用户不可以访问--> <deny users="?" /> ...
- git版本控制-详细操作
- git,软件帮助使用者进行版本的管理 阶段一git 命令: git init 初始化 git config --global user.email "you@example.com&qu ...
- List和Map常用的几种遍历方式
遍历一个List有以下几种方法: /*//1.普通for循环的方式: List<String> list=new ArrayList<String>(); list.add(& ...
- verilog 之语法学习
1.使用非基数表示的十进制视为有符号数.使用基数表示的十进制被视为无符号数. 2.线网中的值被解释为无符号数,整型寄存器中的值被解释为有符号的二进制补码数,. 3.如果选择表达式的值为 x.z,或越界 ...
- Python类(二)-类的继承
单继承 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" class People: def __init__(self,name ...
- sourceTree免密码校验
1.ssh请求:参考:http://www.ithao123.cn/content-1584888.html 步骤1:检查你的电脑上是否已经生成了SSH Key 在git bash下执行如下命令 cd ...
- infos
C++文件流 iostream 提供了cin cout 分别用于从标准输入读取流和向标准输出写入流cout 标准输出 屏幕 输出写入fstream文件流 cin 从标准输入读取cout 向标准输入写入 ...
- Halcon学习之一:查询图像参数
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.get_grayval ( Image : : Row, Column : Grayval ) 计算Image图像中坐标为(Row,Colum ...
- php SqlServer 中文汉字乱码
php SqlServer 中文汉字乱码,用iconv函数转换 查询显示的时候,从GB转换为UTF8 <?php echo iconv('GB2312','UTF-8',$row['Name'] ...