一、jQuery初体验
使用jQuery给一个按钮绑定单击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://www.likecs.com/script/jquery-1.7.2.js"></script> <script type="text/javascript"> // window.onload = function () { // var butObj = document.getElementById("butId"); // butObj.onclick = function () { // alert("js 单机事件") // } // } // 1. 表示页面加载完成之后，类似于 window.onload = function () { $(function () { var $butObj = $("#butId"); // 2. 按照id查询标签对象 $butObj.click(function () { // 3. 绑定单击事件 alert("jQuery 单击事件") }); }); </script> </head> <body> <button> hello </button> </body> </html>注意：
使用 jQuery 一定要引入 jQuery 库
jQuery 中的$到底是什么？ 答案： 它是一个函数
怎么为按钮添加点击响应函数的？
使用 jQuery 查询到标签对象
使用标签对象.click(function(){});
二、jQuery 核心函数$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数
传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 window.onload=function(){}
传入参数为 [HTML 字符串 ] 时：
会对我们创建这个 html 标签对象
传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
传入参数为 [DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象
三、jQuery 对象和 dom 对象区分 1. 什么是 jQuery 对象，什么是 dom 对象Dom对象
通过 getElementById()查询出来的标签对象是 Dom 对象
通过 getElementsByName()查询出来的标签对象是 Dom 对象
通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象 Alert 出来的效果是：[object HTML 标 签 名 Element]
jQuery对象
通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
jQuery 对象 Alert 出来的效果是：[objectObject]
2. jQuery 对象的本质是什么？jQuery 对象是 dom 对象的数组 +jQuery 提供的一系列功能函数
3. jQuery 对象和 Dom 对象使用区别jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法
4. Dom 对象和 jQuery 对象互转dom对象转化为 jQuery 对象
先有 DOM 对象
$(DOM 对象 ) 就可以转换成为 jQuery 对象
jQuery 对象转为 dom 对象
先有 jQuery 对象
jQuery 对象[下标]取出相应的 DOM 对象
ID 选择器：根据 id 查找标签对象
.class 选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回
p.myClass
表示标签名必须是 p 标签，而且 class 类型还要是 myClass
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="http://www.likecs.com/script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { //1.选择 id 为 one 的元素 "background-color","#bbffaa" $("#btn1").click(function () { // css() 方法 可以设置和获取样式 $("#one").css("background-color","#bbffaa"); }); //2.选择 class 为 mini 的所有元素 $("#btn2").click(function () { $(".mini").css("background-color","#bbffaa"); }); //3.选择 元素名是 div 的所有元素 $("#btn3").click(function () { $("div").css("background-color","#bbffaa"); }); //4.选择所有的元素 $("#btn4").click(function () { $("*").css("background-color","#bbffaa"); }); //5.选择所有的 span 元素和id为two的元素 $("#btn5").click(function () { $("span,#two").css("background-color","#bbffaa"); }); }); </script> </head> <body> <!-- <div> <h1>基本选择器</h1> </div> --> <input type="button" value="选择 id 为 one 的元素" /> <input type="button" value="选择 class 为 mini 的所有元素" /> <input type="button" value="选择 元素名是 div 的所有元素" /> <input type="button" value="选择 所有的元素" /> <input type="button" value="选择 所有的 span 元素和id为two的元素" /> <br> <div> id 为 one,class 为 one 的div <div>class为mini</div> </div> <div title="test"> id为two,class为one,title为test的div <div title="other">class为mini,title为other</div> <div title="test">class为mini,title为test</div> </div> <div> <div>class为mini</div> <div>class为mini</div> <div>class为mini</div> <div></div> </div> <div> <div>class为mini</div> <div>class为mini</div> <div>class为mini</div> <div title="tesst">class为mini,title为tesst</div> </div> <div>style的display为"none"的div</div> <div>class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span>^^span元素^^</span> </body> </html> 2. 层级选择器ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
parent>child 子元素选择器：在给定的父元素下匹配所有的子元素
prev+next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素