1、jQuery基础

Jquery它是一个库(框架),要想使用它,必须先引入!

jquery-1.8.3.js:一般用于学习阶段。

jquery-1.8.3.min.js:用于项目使用阶段

官网下载后,复制到当前WEB项目的js文件夹下,如下:

引入代码:<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>

2、JS和JQ页面加载的区别

传统的JavaScript页面加载函数是最后一个生效,它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】

jQuery的页面加载函数可以存在多个(不会发生覆盖),它会按照顺序进行执行。【dom数加载完成】

 <!DOCTYPE html>
<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>

3、JS和JQ方式获取的区别

JS:document.getElementById();

JQ:$(“#id”);

案例事先要创建一个名为“惊喜”的HTML文件,并放在同一个文件夹下。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS和JQ获取的区别</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.JS方式获取
/*document.getElementById("btn").onclick=function(){
location.href="惊喜.html"
}*/
//2.JQ方式获取
$("#btn").click(function(){
location.href="惊喜.html"
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜!" id="btn" />
</body>
</html>

4、DOM对象和JQuery对象的转换

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象与Jquery对象转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作,DOM对象无法操作JQ对象里面的属性和方法
document.getElementById("span1").innerHTML="萌萌哒!";
//document.getElementById("span1").html("萌萌哒!"); var spanEle=document.getElementById("span1"); //5.将DOM对象转换成JQuery对象
$(spanEle).html("胖胖哒!");
} $(function(){
$("#btn").click(function(){
//2.JQ的JQuery操作,JQ对象无法操作JS里面的属性和方法!!!
//$("#span1").innerHTML="呵呵哒!"
$("#span1").html("呵呵哒!"); //3.JQuery对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒!"; //4.JQuery对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒!";
});
});
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
男神:<span id="span1">你好帅!</span>
</body>
</html>

注意:JQ对象只能操作JQ里面的属性和方法

 JS对象只能操作JS里面的属性和方法。

jQuery学习(一)——jQuery入门的更多相关文章

  1. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  2. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  3. JQuery学习笔记---jquery对象和DOM对象的关系

    1.DOM(Document  Object Model,文档对象模型).DOM树 { html (head&&body),  head(meta && title) ...

  4. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  5. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  6. jQuery学习之jQuery Ajax用法详解(转)

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  7. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. 【转载】【JQuery学习】jQuery插件开发

    JQuery做得最好的就是他的闭包和扩展性.超级简单的扩展方法,让更多的人可以轻松的开发定制自己的jQuery插件.下面的东西是转载过来当做学习材料的.虽然貌似有点古老,但是jQuery的变更一直都不 ...

  9. jQuery学习笔记——jQuery常规选择器

    一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

随机推荐

  1. 当安装了ubuntu操作系统怎么也调用不出中文输入法时,可以用以下方式尝试解决。

    卸载 fcitx sudo apt-get remove fcitx 重启 sudo reboot 重新安装 fcitxsudo apt-get isntall fcitx 安装拼音输入法sudo a ...

  2. HDU 3830 Checkers(二分+lca)

    Description Little X, Little Y and Little Z are playing checkers when Little Y is annoyed. So he wan ...

  3. 后台通过Request取得多个含有相同name的控件的值

    string[] arrWeight = context.Request.Params.GetValues("Quantity");

  4. ​libz.so.1: cannot open shared object file: No such file or directory

    在虚拟机安装xtrabackup工具时候出现的报错:​​libz.so.1: cannot open shared object file: No such file or directory [ro ...

  5. 「JavaSE 重新出发」05.03 反射

    能够分析类能力的程序称为反射(reflection). 反射库(reflection library)提供了一个非常丰富且精心设计的工具集,以便编写能够动态操纵 Java 代码的程序. 反射机制可以用 ...

  6. Java开发就业形势和面试技巧

    如果从软件编程的就业来讲,如果你现在不懂架构,那么找到一份好工作还是比较难的,但是这里面有两点需要注意: 传统软件公司,这类公司还会使用最为原始的开发技术(SSH),但是这样的传统软件公司的招聘量已经 ...

  7. vuex中mutations与actions的区别

    要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...

  8. 设置PATH 环境变量、pyw格式、命令行运行python程序与多重剪贴板

    pyw格式简介: 与py类似,我认为他们俩卫衣的不同就是前者运行时候不显示终端窗口,后者显示 命令行运行python程序: 在我学习python的过程中我通常使用IDLE来运行程序,这一步骤太过繁琐( ...

  9. STM32 USB转串口驱动安装不成功出现黄色感叹号解决方法!

    相信很多人在做USB转串口时出现过串口驱动安装不成功,出现黄色感叹号问题, 出现这种问题一般是驱动安装不成功造成的. 这里我就这个问题总结几个简单的方法. 方法1: 插上USB,利用驱动人生安装驱动. ...

  10. WampServer更改或重置数据库密码

    WampServer安装后密码是空的, 修改一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用WAMP的MySql控制台修改. 第一种: ①在phpMyAdmin界面中点击[用户],将 ...