一、 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. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  3. label用js,jquery取值赋值,以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  4. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  5. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  6. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. js+html+jquery 个人笔记

    js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...

  9. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  10. JS和JQuery总结

    目录目录    2js部分一.词法结构    1.区分大小写    2.注意   // 单行      /*  多行注释  */    3.字面量(直接量  literal)        12  / ...

随机推荐

  1. new JSONObject()报错

    如果缺少下列依赖包会报错: 1.commons-beanutils-1.7.0.jar 2.commons-collections-3.2.1.jar 3.commons-lang-2.3.jar 4 ...

  2. 从ROS bag文件中提取图像

    从ROS bag文件中提取图像 创建launch文件,如下: export.launch <launch> <node pkg="rosbag" type=&qu ...

  3. 城市间紧急救援(25 分)(dijstra变形)

    城市间紧急救援(25 分) 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道路长度都标 ...

  4. 1140 Look-and-say Sequence

    题意:略 思路:第1个数是1(读作“1有1个”),因此第2个数就是11(读作“1有2个”),因此第3个数就是12(读作“1有1个,2有1个”),因此第4个数是1121(读作“1有2个,2有1个,1有1 ...

  5. python学习(十三) 数据库支持

    13.1 Python数据库编程接口(API) 13.1.1 全局变量 13.1.2 异常 13.1.3 连接和游标 13.1.4 类型 13.2 SQLite和PySQlite 13.2.1 入门 ...

  6. C#三层架构实例

    对于三层的概念查也查了,看也看了,下面是我找的一个关于三层的简单实例,真正看一下它是如何具体实现的. 我们先来一起看看 实体类-Model 实质:实体类就是在完成数据库与实体类对应的功能,一个类是一张 ...

  7. 点击jQuery Mobile的按钮改变颜色

    jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ t ...

  8. How to Change Master Page @ Run-time

    This tip will give complete knowledge of how to change master page, render controls and accessing it ...

  9. JanusGraph : 图和图数据库的简介

    JanusGraph:图数据库系统简介 图(graph)是<数据结构>课中第一次接触到的一个概念,它是一种用来描述现实世界中个体和个体之间网络关系的数据结构. 为了在计算机中存储图,< ...

  10. 十二.filter

    Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是 ...