1、JQuery 介绍
什么是jQuery?
jQuery，顾名思义，也就是JavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想!!!
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
Query流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用 jQuery。
jQuery好处!!!
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择D0M元素、制作动画效果、事件处理、使用Ajax以及其他功能
2、jQuery的初体验
需求:使用jQuery给一个按钮绑定单击事件?
注：jquery.js要自己搜
http://www.htmleaf.com/js/jquery/jquery-1.7.2.html
01 HelloWorld.html
<!DOCTYPE html PUBLIC "-//WBCI/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/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="../script/jquery.js"></script> <script type="text/javascript"> // window.οnlοad=function () { // var btnObj=document.getElementById("btnId"); // alert(btnObj);//[object HTMLButtonElement]--->>dom对象 // btnObj.οnclick=function () { // alert("js原生的单击事件"); // } // // } $(function () {//相当于 window.οnlοad=function () {} var $btnObj=$("#btnId");//表示按id查询标签对象 $btnObj.click(function () {//绑定单击事件 alert("JQuery的单击事件"); }) }); </script> </head> <body> <button id="btnId">SayHello</button> </body> </html>
3、jQuery 核心函数
$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数
1、传入参数为[函数]时;
表示页面加载完成之后。相当于window.onload =function()}
2、传入参数为[HTML字符串]时:
会为我们创建这个html标签对象
3、传入参数为[选择器字符串]时:
$("#id属性值");id选择器，根据id查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
${(.class属性值");类型选择器，可以根据clas属性查询标签对象
4、传入参数为[DOM对象]时:
会把这个dom对象转换为jQuery对象
03 核心函数.html
<!DOCTYPE html PUBLIC "-//WBCI/DTD HTML 4.01 Transitional//EN" > <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <title> Insert title here</title> <script type="text/javascript" src="../script/jquery.js"></script> <script type="text/javascript"> //核心函数的4个作用 $(function () { // alert("页面加载完成之后，自动调用"); $("<div>" + " <span>div-span1</span>" + " <span>div-span2</span>" + "</div>").appendTo("body"); // alert($("button").length); var btnObj=document.getElementById("btn01"); alert(btnObj); alert($(btnObj)); // $("#id属性值");id选择器，根据id查询标签对象 // $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象 // ${(".class属性值");类型选择器，可以根据clas属性查询标签对象 }); </script> </head> <body> <button id="btn01">按钮1</button> <button>按钮2</button> <button>按钮3</button> </body> </html>
4、jQuery对象和dom对象区分
4.1、什么是jQuery对象，什么是dom对象
Dom对象
1.通过getElementByld()查询出来的标签对象是Dom对象
2.通过getElementsByName(/查询出来的标签对象是Dom对象
3.通过getElementsByTagName(/查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象，是Dom对象
Dom对象 alert()出来的是[object HTMLButtonElement]
jQuery对象
5.通过JQuery提供的API创建的对象，是JQuery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7.通过JQuery提供的API查询到的对象，是JQuery对象
jQuery对象 alert()出来的是[object Object]
4.2、问题:jQuery对象的本质是什么?
jQuery对象是dom对象的数组+jQuery提供的一系列功能函数。
4.3、jQuery对象和Dom对象使用区别
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法
4.4、Dom对象和jQuery对象互转
1、dom对象转化为jQuery对象(*重点)
1、先有DOM对象
2、$(DOM对象)就可以转换成为jQuery对象
2、 jQuery对象转为dom对象(*重点)
1、先有jQuery对象
2、jQuery对象[下标]取出相应的DOM对象
5、选择器
1、基本选择器（***重点)
#ID选择器： 根据id查找标签对象
.class选择器: 根据class查找标签对象
element 选择器: 根据标签名查找标签对象
*选择器:表示任意的，所有的元素
selector1, selector2 组合选择器:合并选择器1，选择器2的结果并返回
01基本选择器_.html
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: 55 px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery.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的元素" id="btn1"/> <input type="button" value="选择class为mini的所有元素" id="btn2"/> <input type="button" value="选择元素名是div的所有元素" id="btn3"/> <input type="button" value="选择所有的元素" id="btn4"/> <input type="button" value="选择所有的span元素和id为two的元素" id="btn5"/> <br> <div class="one" id="one"> id为one,class 为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="..." class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div <input type="hidden" size="8"> </div> <span class="one" id="span">^^span元素^^</span> </body> </html>
2、层级选择器(****重点)
ancestor descendant
后代选择器:在给定的祖先元素下匹配所有的后代元素
parent > child
子元素选择器:在给定的父元素下匹配所有的子元素
prev+next
相邻元素选择器:匹配所有紧接在prev元素后的next元素
prev ~sibings
之后的兄弟元素选择器:匹配prev元素之后的所有siblings元素
02层级选择器_.html
<!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: 55 px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { // $(function () { //的全写 //1.选择body内所有div元素 $("#btn1").click(function () { //css() 方法可以设置或获取样式 $("body div").css("background-color","#bbffaa"); }); //2.在body选择div子元素 $("#btn2").click(function () { $("body>div").css("background-color","#bbffaa"); }); //3.选择id为one的下一个div元素 $("#btn3").click(function () { $("#one+div").css("background-color","#bbffaa"); }); //4.选择id为two的元素后面的所有兄弟元素 $("#btn4").click(function () { $("#two~div").css("background-color","#bbffaa"); }); }); </script> </head> <body> <!-- <div> <h1>层级选择器:根据元案的层级关系选择元案</h1> ancestor descendant parent > child prev t next prev ~ siblings </div> --> <input type="button" value="选择body内所有div元素" id="btn1"/> <input type="button" value="在body选择div子元素" id="btn2"/> <input type="button" value="选择id为one的下一个div元素" id="btn3"/> <input type="button" value="选择id为two的元素后面的所有兄弟元素" id="btn4"/> <br> <div class="one" id="one"> id为one,class 为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="..." class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div <input type="hidden" size="8"> </div> <span class="one" id="span">^^span元素^^</span> </body> </html>
