一、jQuery介绍
什么是jQuery ?
jQuery，顾名思义，也就是JavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想!!!它的核心思想是write less, do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery好处!!!
jQuery是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文格对象、选择DoOM元素、制作动画效果、事件处理、使用,Ajax 以及其他功能
二、初试jQuery
使用 jQuery 给一个按钮绑定单击事件
<!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"> <title>Insert title here</title> <script type="text/javascript" src="../Demo/script/jquery-1.7.2.js"></script> <script type="text/javascript"> // window.onload = function () { // var btnObj = document.getElementById("btnId"); // // alert(btnObj);//[object HTMLButtonElement] ====>>> dom对象 // btnObj.onclick = function () { // alert("js 原生的单击事件"); // } // } $(function () { // 表示页面加载完成 之后，相当 window.onload = function () {} var $btnObj = $("#btnId"); // 表示按id查询标签对象 $btnObj.click(function () { // 绑定单击事件 alert("jQuery 的单击事件"); }); }); </script> </head> <body> <button id="btnId">SayHello</button> </body> </html>
常见问题
1、使用 jQuery 一定要引入 jQuery 库吗？
是，必须
2、jQuery 中的$到底是什么？
它是一个函数
3、怎么为按钮添加点击响应函数的？
1、使用 jQuery 查询到标签对象
2、使用标签对象.click( function(){} )
三、jQuery 核心函数
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。( ) 就 是 调 用 ()就是调用()就是调用这个函数
1.传入参数为[函数]时：
在文档加载完成后执行这个函数。相当于 window.onload = function(){}
2.传入参数为[HTML字符串]时：
根据这个字符串创建元素节点对象
3.传入参数为[选择器字符串]时：
根据这个字符串查找元素节点对象
${"#id属性值"}，id选择器，根据id查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
4.传入参数为[DOM对象]时：
将DOM对象包装为jQuery对象返回
四、jQuery对象和dom对象的区别
什么是 jQuery 对象，什么是 dom 对象
Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom对象
Dom 对象 DOM 对象 Alert 出来的效果是：[object HTML 标签名Element]
jQuery 对象
通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
jQuery 对象 Alert 出来的效果是：[object Object]
jQuery 对象的本质是什么？
jQuery对象是dom对象的数组+jQuery提供的一系列功能函数
prototype 原型
jQuery对象和Dom对象使用区别
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法
// Dom对象的方法 document.getElementById("testDiv").innerHTML = "这是dom对象的属性InnerHTML"; // jQuery对象也不能用Dom对象的方法 $("#testDiv").innerHTML = "这是dom对象的属性InnerHTML";//不能用 $("#testDiv").click(function () { alert("click()是jQuery对象的方法"); }); document.getElementById("testDiv").click(function () { alert("click()是jQuery对象的方法"); });//不能用
Dom 对象和 jQuery 对象互转
dom转jQuery
alert( $(document.getElementById("testDiv")) );
jQuery转dom
alert( $(document.getElementById("testDiv"))[0]);
