一 . JQuery教程
- jQuery是一个JavaScript库
- jQuery极大的简化了JavaScript编程
- jQuery很容易学习
1.jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
2.向自定义页面中添加jQuery库
知识补充：alert();表示会在界面弹出一个框 ，
定义一个function函数： function hello(){ this is my first function };
CDN：表示内容分发网络，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。
jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记把jQuery添加到网页中：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>hellojQuery.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </script>
//此处添加的为本地下载好的jQuery，如没有下载，可以使用CDN，定义网站，从网站中获取
<script type="text/javascript" src="jquery-2.2.4.js"></script> <script type="text/javascript"> alert($); </script> </head> <body> This is my HTML page. <br> </body> </html>
3.js中dom元素的初始化和过程
3.1js 与html中加载的过程是从上往下依次执行的。
演示代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>init.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 此处是不能直接获取名称为mydiv的元素内容的，因为代码是从上往下执行的 --> <script type="text/javascript"> var mydiv=document.getElementById("mydiv"); alert(mydiv); </script> </head> <body> <div id="mydiv"> hello world; </div> </body> </html>
3.2如上述所示，要想获取上述div中的元素，可以使用事件，让该元素加载完成之后再获取，需要如下操作：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>init.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--第一种： 此处要是想加载dom中的元素，需要事件完成，如下事件表示先加载div中的元素，然后在获取 --> <script type="text/javascript" src="hello.js"></script> <script type="text/javascript"> window.onload=function(){ var mydiv=document.getElementById("mydiv"); alert(mydiv); } function loadCallBack(){ var mydiv=document.getElementById("mydiv"); alert(mydiv); } </script> </head> <body onload="loadCallBack()"> <div id="mydiv">hello world</div> </body> </html>
3.3使用JQuery语法，去读取元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>init.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--第一种： 此处要是想加载dom中的元素，需要事件完成，如下事件表示先加载div中的元素，然后在获取 --> <script type="text/javascript" src="../jquery-2.2.4.js"></script> <!-- 此处使用jQuery获取div中的元素 --> <script type="text/javascript"> $(function(){ var mydiv=document.getElementById("mydiv"); alert(mydiv); }) $(document).ready(function(){ var mydiv=document.getElementById("mydiv"); alert(mydiv); }) </script> </head> <body> <div id="mydiv">hello world</div> </body> </html>
拓展：此处要是jquery的文件不在同一级目录在上一级目录下，可以使用../ 表示上一级目录
3.4 Css中的选则器：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>css.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 以下使用css样式中的id选则器，为div中的元素设置颜色 --> <!-- 以下第二个使用css样式中的类选则器，为div中的元素设置颜色 --> <style type="text/css"> #mydiv{color:red} .mycalss{color:green} </style> </head> <body> <div id="mydiv">hello world</div> <div id="mydiv1" class="mycalss">hello world</div> </body> </html>
3.5jQuery中的选则器：
jquery的选则器沿用了css3的选则器语法， 并增强了功能，作用是为了获取满足选择器的dom元素集合，（返回值就是数组）
具体的测试代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>css.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- jquery的选择器 沿用css3的选择器语法 并增强 作用 是为了获取满足选择器条件的dom元素集合(返回值就是数组) 通过jquery选择器获取到的数组 并不是一个js的数组 是jquery拓展后的数组 该数组中集成jquery的所有方法 css html cache --> <script type="text/javascript" src="../jquery-2.2.4.js"></script> <script type="text/javascript"> $(function() { //此处使用标准选则器 var spanArray = $("span"); alert(spanArray.length); //此处使用类选则器进行匹配 var spanArray=$("*.myclass"); alert(spanArray.length); //从处使用id选则器进行匹配 var spanArray=$("#mydiv"); alert(spanArray.length); //属性选则器，为下表中的基数行变为灰色 偶数行变为蓝色，第二行变为黄色 $("tr:odd").css("backgroundColor","gray"); $("tr:even").css("backgroundColor","green"); $("tr:first").css("backgroundColor","yellow"); //属性选则器进行匹配 $("[href='my']").text("跳转到csdn"); //&组合选则器，下述选则器要根据标签和属性进行匹配 $("a[href='my']").text("跳转到sdfgdagagr"); //||组合选则器，隔离，下述选则器会进行添加判断匹配，只要一个条件匹配则进行匹配 $("a,[href='my']").text("跳转到sdsafasfafafawefgagr"); }) </script> </head> <body> <div id="mydiv">hello world</div> <div id="mydiv1" class="myclass">hello world</div> <span> this is hello world; </span> <span class="myclass"> this is hello world; </span> <!-- 以下标签进行属性选则器，组合选则器，组合隔离选则器的演示 --> <a href="my">跳转到你好</a> <!-- 以下表格演示属性选则器，其中包括奇偶行的表色，第一行的表色等 --> <table border="1" width="500" height="80"> <tr> <th>nifdsag</th> <th>nifdsag</th> <th>nifdsag</th> </tr> <tr> <td>nifdsag</td> <td>nifdsag</td> <td>nifdsag</td> </tr> <tr> <td>nifdsag</td> <td>nifdsag</td> <td>nifdsag</td> </tr> <tr> <td>nifdsag</td> <td>nifdsag</td> <td>nifdsag</td> </tr> <tr> <td>nifdsag</td> <td>nifdsag</td> <td>nifdsag</td> </tr> <tr> <td>nifdsag</td> <td>nifdsag</td> <td>nifdsag</td> </tr> </table> </body> </html>
注：使用选则器的语法 $( function() { 定义选则器语法 })
3.6 jQuery对象和js对象之间的区别
初学jQuery，会对jquery对象和DOM对象心存很大的疑惑，因此有必要明白他们之间的区别和联系。DOM对象是我们用传统的方法（JavaScript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；
var mydiv=document.getElementById("mydiv");
alert(mydiv)
如下是dom对象，jquery对象，dom转jquery jquery转dom的具体代码解析：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>obj.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../jquery-2.2.4.js"></script> <script type="text/javascript"> /** jquery对象和dom对象的区别 dom对象document.getElementById dom对象只能访问dom中预定义的 方法 value innerHTML innerText style.样式名=样式值 jquery对象就是通过$()对象处理返回的对象，该对象是数组，只能调用jquery提供的方法，比如 css text html val(相当于value) **/ $(function (){ //dom对象 var myvar = document.getElementById("mydiv"); //将获取到的对象的内容变为红色 mydiv.style.color="red"; var myvar1= document.getElementById("uname"); //获取id 为uname的值，将值赋给myvar对象 //myvar.innerText=myvar1.value; //jquery对象不能调用dom对象的方法 //通过jquery对象的id选则器，将字体的颜色设置为绿色 $("#mydiv").css("color","green"); //获取到jquery对象中id名为uname的属性，将该属性的值赋给id名为mydiv的属性值 $("#mydiv").text($("#uname").val()); //jquery对象和dom对象的相互转换 //1jquery对象转换为dom对象 var divdom=$("#mydiv")[0]; //此处的[0] 也可以是get(0); alert(divdom.innerText); //2dom对象转换成jquery对象 var mydiv=document.getElementById("mydiv"); var jquerydiv=$("#mydiv"); }) </script> </head> <body> <div id="mydiv">hello jquery</div> <input type="text" id="uname" value="jiaozi"/> </body> </html>