多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
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); } ~~~