一 . 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>