1. 什么是jquery
JQuery 对 js 做了封装。jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多,javascript 高手加入其 team。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的 js 库(压缩后只有 21k) ,还兼容各种浏览器 。jQuery 是一个快速的,简洁的 javaScript,库,使用户能更方便地处理 HTML documents、events、实现动画效果,并且方便地为网站提供 AJAX 交互。
jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
<br/>
2. jquery 的引入
JQuery 的 js 文件:(MyEclipse 中引入压缩版会报错,但可使用)
![](https://img.kancloud.cn/51/c4/51c44e7b6dcc679f16d18309b1e4fbe4_725x56.png)
Jquery 的引入:
~~~html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }">/c:set
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"> </script>
<!--强烈建议使用绝对路径-->
<title>Insert title here</title>
</head>
<body>
</body>
</html>
~~~
<br/>
3. jquery的主函数
第一种方式:
~~~html
<script type="text/javascript">//先来定义 jquery 的主函数。jquery 的主函数的含义在于把整个文档加载完毕后再去执行主函数。
$(document).ready(function()
var div1 = document.getElementById("div1");
alert(div1);
});
</script>
~~~
第二种方式(建议使用):
~~~html
<script type="text/javascript">
$(function(){
...
})
</script>
~~~
**4.Jquery 对象**
jQuery对象就是通过 jQuery包装 DOM 对象后产生的对象。Jquery对象能和 DOM 对象之间做一些转换。
jQuery对象是jQuery 独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法。虽然jQuery对象是包装 DOM 对象后产生的,
但是 jQuery无法使用 DOM 对象的任何方法,同理 DOM 对象也不能使用jQuery里的方法,乱使用会报错。
- **DOM 对象转成 jQuery 对象**
对于已经是一个 DOM 对象,只需要用$()把 DOM 对象包装起来,就可以获得一个 jQuery 对象了。$(DOM 对象) 。转换后就可以使用 jQuery 中的方法了。
~~~html
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function myclick(){
var myinput = document.getElementById("myinput");
var jq_myiput = $(myinput);
alert(jq_myiput.val());
}
</script>
</head>
<body>
<input type="text" id="myinput">
<input type="button" value="submit" onclick="myclick()">
</body>
//为什么点击触发事件后能获取到 myinput?因为当点击提交按钮时文档已经加载完。
~~~
<br/>
**JQuery 对象转换成 dom 对象(很少用)**
~~~js
function myclick(){
var div1 = document.getElementById("myinput"); //把dom转换成jQuery对象
var jdiv1 = $(div1); //jdiv是一个数组。
//把jQuery对象转换成dom对象方式1: jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
alert(jdiv1[0].value);
//把jQuery对象转换成dom对象方式2: jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
alert(jdiv1.get(0).value);
}
~~~