JQuery整体简化学习
一、 简介:
1 关于jQuery
jQuery是一个轻量的js库，提供了dom选择、操作、兼容完善的事件机制和Ajax的封装，使之有更为简便和简捷的去开发js程序。JQuery的底层是JavaScript、由于JavaScript操作不太方便、选择器较少、浏览器兼容是个问题、JavaScript原生的Ajax交互比较繁琐。jQuery是JavaScript众多框架之一。
2 关于JavaScript
其实JavaScript非常强大, 作为后台开发、我的理解是这样的。JavaScript由三部分组成: ECMAScript、Bom、DOM。ECMAScript是原生的基于对象语言、BOM是浏览器的处理、DOM是一套接口,JavaScript支持,同样DOM同样可以被xml等使用,是一套标准接口而已,不能说就是JavaScript的一部分。jQuery是前端框架、主要运用了DOM和BOM。而ECMAScript相关的框架包括node.js, 这是后台语言。所以很多资料介绍JavaScript说是支持前后台的语言,嗯,的确是这样子的!
很多前端学习者在纠结到底先学习JavaScript、还是直接jQuery? 这就像后台学习者问道:跳过servlet、直接学习框架怎么样? 我认为学习应该循序渐进、看完以上介绍,不妨先学习JavaScript。
接着、我们一起来学习jQuery怎么样（我也不太会）!
jQuery参考文档:http://tool.oschina.net/apidocs/apidoc?api=jquery
二、JQuery的使用
1、前端编辑器
前端开发工具真不少,下面推荐几款。Visual Studio Code：https://code.visualstudio.com/ 、WebStorm、HBuilder; 支持国产、用HBulider吧。
2、jQuery库
先要使用jQuery,必须要有库文件才能使用。下载JQuery开发库文件到本地,直接引用（推荐）;或者使用在线库文件。
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
通过前面的介绍、我们了解了JQuery和JavaScript、也准备了库和开发工具。到了学习jQuery的时候了,先要说明: 我不是纯正的前端开发者,我只负责介绍总结基本的知识、方便日后继续和深度学习。
三、JQuery和JavaScript对象
很多后台人员傻傻分不清JavaScript和jQuery对象, JavaScript对象: var divElement = document.getElementById("a");
jquery对象: var e=$("#a") ---按照id查询 jQuery的选择器都有一个明显的标志"$"。对象转换.
//1、jQuery对象->JavaScript对象
var $div = $("#divID");//jquery对象(注意这是一个数组,尽管是通过id获取的)
var divElement = $div[0];//js对象(方式一)
var divElement 2= $div.get(0);//js对象(方式二)
//2、JavaScript对象->jQuery对象
var inputElement = document.getElementById("inputID");//js对象
var $input = $(inputElement);//jquery对象
四、强大的JQuery选择器
通过选择器，能定位web页面中的任何标签。jQuery有丰富的选择器（9共类）
1、基本选择器
也就是最常用的id或者class或者标签等选择器,类似JavaScript选择器。
“#” 代表ID查询、“.”代表class查询、“标签名”代表标签查询。
//1)查找ID为"div1ID"的元素
$("#div1ID"); //“#” 代表ID查询
//2)查找DIV元素的个数
$("div").size() ; //div元素查询
//3)查找所有样式是"myClass"的元素
$(".myClass"); //class查询
//4)查找所有ID为div1ID,CLASS为myClass,P元素的
$('#div1ID,.myClass,p'); //综合查询
通过基本选择器查询不是可以找所有的元素了吗, 为什么还需要其他选择器? 是的、理论上只要给一个元素ID,都可以定位到元素,那如果我要选择表格中1、3、5行呢? 继续。
2、层次选择器
父子,兄弟关系的选择器
（1）ancestor descendant 在给定的祖先元素下匹配所有的后代元素（子孙）
（2）parent > child 在给定的父元素下匹配所有的子元素（子）
（3）prev + next 匹配所有紧接在 prev 元素后的 next 元素
（4）prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
$("form input"); // 选择form中所有input子元素（包括孙子） //结果[ <input name="name" />, <input name="newsletter" /> ] $("form > input")； //选择子元素 [ <input name="name" /> ] $("label + input") ; //匹配所有跟在 label 后面的next input 元素 name="name" />, <input name="newsletter" /> ] $("form ~ input"); //匹配所有跟在 form 后面的所有input 元素[ <input name="none" /> ]
3、加强的基本选择器
处理前后左右关系的选择器。
- :first //获取第一个元素
- :last // 获取最后个元素
- :not(selector) //去除所有与给定选择器匹配的元素
- :even //匹配所有索引值为偶数的元素，从 0 开始计数
- :odd //匹配所有索引值为奇数的元素，从 0 开始计数
- :eq(index) //匹配一个给定索引值的元素
- :gt(index) //匹配所有大于给定索引值的元素
- :lt(index) //匹配所有小于给定索引值的元素
- :header //匹配如 h1, h2, h3之类的标题元素
- :animated //匹配所有正在执行动画效果的元素
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
$('li:first'); //[ <li>list item 1</li> ]
<input name="apple" /> <input name="flower" checked="checked" />
$("input:not(:checked)")
4、内容选择器
按照内容选择元素。
- :contains(text) //内容中包含text的元素
- :empty //内容为空的元素
- :has(selector) // 具有selector选择器的元素
- :parent //父母节点
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn
$("div:contains('John')")；//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
5、属性选择器
根据style属性选择元素。
- [attribute] //匹配包含给定属性的元素。比如id
- [attribute=value] //匹配包含给定属性值的元素。 比如 $("input[id='div']");
- [attribute!=value] //匹配所有不含有指定的属性
- [attribute^=value] //匹配给定的属性是以某些值开始的元素
- [attribute$=value] //匹配给定的属性是以某些值结尾的元素
- [attribute*=value] //匹配给定的属性是以包含某些值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />
$("input[name='accept']");//<input type="checkbox" name="accept" value="Evil Plans" />
"$(input[name^='newsletter']");//[<input type="checkbox" name="accept" value="Evil Plans" />]
这里就介绍以上5种选择器、这样你就知道接着应该怎么学习剩下的 。查看文档“选择器”内容 http://tool.oschina.net/apidocs/apidoc?api=jquery
好的、恭喜你。你学完了jQuery最常用、很重要的一个部分。
五、文档处理-DOM
对JavaScript-DOM部分的进一步封装,进而对功能增强和简化操作。学会看着文档学习,文章下面实例都是最常见、使用的方法。
1、内部插入
append（content）经常用于ajax中处理数据使用。
<!DOCTYPE html> <html> <head> <!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)--> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Jquery-DOM演示</title> <!--引入jQuery在线库--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <!-- 作者：972606984@qq.com 时间：2018-07-15 描述：JavaScript代码块-JQueryDOM演示 --> <script type="application/javascript"> //$(function(){}); 页面初始化 $(function(){ var str="<a id='baidu' href='http://www.baidu.com'>百度</a>" //内部追加内容 $("#a").append(str); }); </script> </head> <body> <div id='a'> <!--<a id="baidu" href='http://www.baidu.com'>百度</a>--> </div> </body> </html>
2、外部插入
方法有这几个、after(content|fn)、before(content|fn)、insertAfter(content)、insertBefore(content)。演示:
<!DOCTYPE html> <html> <head> <!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)--> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Jquery-DOM演示</title> <!--引入jQuery在线库--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <!-- 作者：972606984@qq.com 时间：2018-07-15 描述：JavaScript代码块-JQueryDOM演示 --> <script type="application/javascript"> //$(function(){}); 页面初始化 $(function(){ var str="<a id='baidu' href='http://www.baidu.com'>百度</a>" //1、内部追加内容 $("#a").append(str); //2、外部插入 var htmlstr="<p>hello 我在你下面</p>"; var str2="hello 我在你上面!" $("#a").after(htmlstr); $("#a").before(str2); }); </script> </head> <body> <div id='a'> <!--<a id="baidu" href='http://www.baidu.com'>百度</a>--> </div> </body> </html>
3、删除节点
删除方法 empty():清空指定元素的内容,彻底删除,不能恢复。
remove([expr])：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但是在HTML中不可见。
detach([expr])：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入jQuery在线库--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> </head> <script type="application/javascript"> //初始化 $(function(){ //清空u1 $("#u1").empty(); //删除u2的第一个元素、加强的基本选择器 $("#u2 li:first-child").remove(); }); </script> <body> <ul id="u1"> <li>live1-1</li> <li>live1-2</li> </ul> <ul id="u2"> <li id="li1">live2-1</li> <li>live2-2</li> </ul> </body> </html>
该部分剩下的内容还有包裹、替换、复制,不一一测试。到这里、你已经学完了jQuery的选择器和DOM操作。剩下的重点还有：属性操作、CSS操作、事件、AJax（动画方面简单介绍）
六、属性操作
使用最多的有attr(), 特别注意这个方法添加的是HTML标签属性, 如img的src、a标签的href，不能是style属性。removeAttr()，对应的删除属性。addClass()/removeClass() 添加/删除class属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入jQuery在线库--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script type="application/javascript"> $(function(){ //给a标签添加HTML熟悉 $("#baidu") .attr("href","www.baidu.com");
//$("#baidu").attr("class","baidu");也是一样子的. $("#baidu").addClass("baidu"); }); </script> </head> <body> <a id="baidu">baidu</a> </body> </html>
七、CSS操作
css() 获取或者添加css属性、height()设置height或者获取height值。width() 获取或者设置width的值。
$('#a').css('fontSize',"14px");// 设置属性 $('#a').css('fontSize') //获取font-size属性。css的大部分方法都是同时具有"获取"和“设置”性质的。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <title></title> <!--引入jQuery在线库--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script type="application/javascript"> $(function(){ //给div添加内容 $('#dx').text("1234abcd"); //给div添加color属性 $('#dx').css("color","chocolate"); //控制台打印width和heigth、color console.info("heigth: "+ $('#dx').height()+" width: "+$('#dx').width()); console.info($('#dx').css("fontSize"));//font-size或者fontSize都是可以的 }); </script> <!-- 描述：引入css片段 --> <style type="text/css"> #dx{ background: blueviolet; width: 100px; height: 200px; font-size: 14px; } </style> </head> <body> <div id="dx"></div> </body> </html>
八、JQuery事件
事件大概可以分为几种。jQuery事件、所有标签都有的事件、标签特定的事件。举例
（1）ready要在DOM就绪时执行的函数
$(document).ready(function(){
// 在这里写你的代码...
});
（2）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。
$("p").bind("click", function(){
alert( $(this).text() );
});
（3）bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
$("p").unbind();//把所有段落的所有事件取消绑定
九、Ajax交互
我们都知道ajax用于前后台交互、相比JavaScript原生的ajax操作更加简单。ajax相关的方法有如下。其中$.ajax()最底层、其他函数都是给予它改造。
- $.ajax(url,[settings])
- load(url,[data],[callback])
- $.get(url,[data],[fn],[type])
- $.getJSON(url,[data],[fn])
- $.getScript(url,[callback])
- $.post(url,[data],[fn],[type])
这里来讲解$.ajax()
API的解释: 通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
关于回调函数
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
- beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
- error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
- dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
- success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
- complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
数据类型
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。其中JSON数据使用最为广泛。
个人非常喜欢用$.ajax()、他可以实现其他函数的所有功能, 只不过有时操作比较繁琐一点。
<form> <span class="teach_word">Schools list:</span> <select id="region" name="region" onchange="ajax_index_Upload(this.value);"> <option value="Eastern China" selected>Eastern China</option> <option value="Southwestern China">Southwestern China</option> <option value="North & NW China">North & NW China</option> <option value="Southern & Central">Southern & Central</option> <option value="Northeastern China">Northeastern China</option> <option value="Others">Others</option> </select> <select name="provinces" id="provinces" onchange="get_linkage_val()"> <!--<option value="zhejiang">Anhui</option>--> </select> <a href="/dede/a/Teach_in_China" style="margin-left:370px;"> <input class="teach_sub" type="button" value="search"> </a> </form>
function ajax_index_Upload( val )
{
var $region = $( "#region" );
var $provinces = $( "#provinces" );
$.ajax( {
type: "POST", // 请求类型 Get或者Post二种
dataType: "json", //请求数据类型json, 另外也支持jsonp、xml、html
url: "/dede/templets/default/china_city.php", //请求路径、服务器路径
data: {
"region": val //请求数据、json
},
success: function( data ){//数据处理}, //success回调函数
error: function( XMLHttpRequest, textStatus ) // 异常回调函数
{
alert( XMLHttpRequest.status );
alert( XMLHttpRequest.readyState );
alert( textStatus );
}
} );
}
尾声: 本文章介绍了jQuery的大部分重要知识, 应该根据API文档进行细化学习。
