jQuery技术学习总结

一、jQuery简介

• jQuery是一个JavaScript库，它能够简化JavaScript编程。
• jQuery是目前最流行的JS框架。
• jQuery能够兼容于目前所有主流的浏览器，包括IE6。
• jQuery能够对HTML元素进行选取和修改、实现JavaScript动画、选取操作dom对象、绑定事件、CSS操作、Ajax请求等。

二、第一个jQuery实例

/*$(document)：$是jQuery中的函数名称，document作为函数的参数作用是将document对象转化为jQuery库能用的对象ready 是jQuery中的函数 dom加载成功后会执行ready函数中的内容function是自定义函数，在onLoad之后执行*/$(document).ready(function () {alert(\"Hello jQuery\")})//与上述代码功能相同（是其简化写法）$(function(){alert(\"Hello jQuery\")})

三、dom对象与jQuery对象的相互转换

• dom对象转换为jQuery对象

/*dom对象：使用js创建的对象jQuery对象：使用jQuery语法创建的对象，jQuery对象是一个数组dom对象可以与jQuery对象相互转换dom对象转换为jQuery对象之后才可使用jQuery的函数*/function change() {//将dom对象转换为jQuery对象var obj = document.getElementById(\"id\");//使用dom的value属性性获取值alert(obj.value);//转换var jObj = $(obj);//显示结果alert(jObj.val());	//val()是jQuery中的函数，下文中有详细说明}

• jQuery对象转换为dom对象

function change() {//使用jQuery语法获取页面中的dom对象var obj = $(\"#id\").get(0);     //通过数组下标获取dom对象var n = obj.value;obj.value = n * n;			//更新dom中value的值}

四、jQuery选择器

• 基本选择器：id、class、标签、混合选择器等

function func1() {var obj = $(\"#one\");				//id选择器obj.css(\"background\",\"red\");		//更新css}function func2() {var obj = $(\".two\");				//class选择器obj.css(\"background\",\"red\");		//更新css}function func3() {var obj = $(\"span\");				//标签选择器obj.css(\"background\",\"red\");		//更新css}function func4() {var obj = $(\"*\");					//全局选择obj.css(\"background\",\"red\");		//更新css}function func5() {var obj = $(\"#one,.two\");			//混合选择器obj.css(\"background\",\"red\");		//更新css}

• 表单选择器：根据type属性值定位
  语法：$(\”:表单类型\”)

function func1() {var obj = $(\":text\");			//文本框alert(obj.val());}function func2() {var obj = $(\":radio\");			//单选按钮for (var i=0; i < obj.length; i++){var dom = obj[i];alert(dom.value);}}function func3() {var obj = $(\":checkbox\");			//复选框for (var i=0; i<obj.length; i++){var dom = obj[i];var jobj = $(dom);alert(jobj.val());}}

五、jQuery过滤器

• 基本过滤器：

  1.选择第一个first，保留数组中第一个dom对象     $(\"选择器:first\")2.选择最后一个last，保留数组中最后一个dom对象   $(\"选择器:last\")3.选择数组中指定对象        		           $(\"选择器:eq(索引)\")4.选择数组中小于索引的全部dom对象       		   $(\"选择器:lt(索引)\")5.选择数组中大于索引的全部dom对象       		   $(\"选择器:gt(索引)\")

//基本过滤器：$(function(){$(\"#btn1\").click(function(){var obj = $(\"div:first\");			//获取所有div中第一个dom对象obj.css(\"background\",\"red\");})$(\"#btn2\").click(function(){var obj = $(\"div:last\");			//获取所有div中最后一个dom对象obj.css(\"background\",\"red\");})$(\"#btn3\").click(function(){var obj = $(\"div:eq(2)\");			//获取所有div中下标等于2的dom对象obj.css(\"background\",\"red\");})$(\"#btn4\").click(function(){var obj = $(\"div:lt(2)\");			//获取所有div中下标小于2的所有dom对象obj.css(\"background\",\"red\");})$(\"#btn5\").click(function(){var obj = $(\"div:gt(2)\");			//获取所有div中下标大于2的所有dom对象obj.css(\"background\",\"red\");})})

• 表单属性过滤器：

/*表单属性过滤器*/$(function(){$(\"#btn1\").click(function(){var obj = $(\":text:enabled\");			//获取所有文本框中可编辑的obj.val(\"hello\");						//设置文本框的值})$(\"#btn2\").click(function(){var obj = $(\":checkbox:checked\");			//获取所有复选框中被选中的for(var i=0; i<obj.length; i++){				//输出获取的值alert(obj[i].value);}})$(\"#btn3\").click(function(){var obj = $(\"select>option:selected\");			//获取所有下拉列表框中被选中的for(var i=0; i<obj.length; i++){				//输出获取的值alert(obj[i].value);}})})

六、jQuery常用事件

$(function(){//1.鼠标单击事件$(\"#btn\").click(function () {//添加新的按钮$(\"div\").append(\"<input type=\'button\' id=\'newBtn\' value=\'新增按钮\'/>\")//为新增按钮添加监听事件$(\"#newBtn\").on(\"click\",function () {alert(\"新增的按钮被单击了\");})})//2.鼠标双击事件$(\"div\").dblclick(function () {$(\"div\").hide();})//3.表单事件$(\":text\").change(function(){alert(\"表单已被修改\")})})

七、jQuery函数

• 函数：val()；text()；attr()；

  val()：操作dom对象中的value属性，带参数时是给value赋值，不带参数时是取值text()：操作数组中所有dom对象的文字显示内容属性attr()：对val,text之外的其他属性进行操作$(选择器).attr(\"属性名\")：获取dom对象数组第一个对象的属性值$(选择器).attr(\"属性名\",\"属性值\")：设置数组所有dom对象的指定属性值

$(function(){$(\"#btn1\").click(function(){var obj = $(\":text\");//获取第一个文本框值alert(obj.val());//获取所有文本框值for(var i=0; i<obj.length; i++){var dom = obj[i];alert(dom.value);}})$(\"#btn2\").click(function(){$(\":text\").val(\"三国演义\");})$(\"#btn3\").click(function(){//text()函数用于获取所有div的文本值，连成一个字符串alert($(\"div\").text());})$(\"#btn4\").click(function(){//text(\"参数\")函数用于设置所有div的文本值$(\"div\").text(\"hahahahahah\");})$(\"#btn5\").click(function(){//attr()函数用于获取某标签指定属性的值alert($(\"img\").attr(\"src\"));})$(\"#btn6\").click(function(){//attr(\"属性名\",\"值\")函数用于设置指定属性的值$(\"img\").attr(\"src\",\"../img/t16.jpg\");})})

• 函数：remove(); empty(); append(); html(); each()；

$(function(){$(\"#btn1\").click(function(){//remove()去除所有父子对象$(\"select\").remove();})$(\"#btn2\").click(function(){//empty()只去除所有子对象$(\"select\").empty();})$(\"#btn3\").click(function(){//append(参数)为指定dom对象添加元素$(\"div\").append(\"<input type=\'button\' value=\'新增按钮\' />\");$(\"div\").append(\"<table style=\'border:1px solid black;\'><tr><td>第一列</td><td>第二列</td></tr></table>\")})$(\"#btn4\").click(function(){//html()获取标签内容alert($(\"span\").html());})$(\"#btn5\").click(function(){//html(参数)设置指定dom对象的内容$(\"span\").html(\"我是新的<b>元素</b>\");})$(\"#btn6\").click(function(){//each()循环普通数组var arr = [11,22,33];$.each(arr, function (i,n) {alert(\"i是索引：\"+i+\",n是值：\"+n);})})$(\"#btn7\").click(function(){//each()循环dom对象数组var arr = $(\":text\");$.each(arr, function (i,n) {alert(\"i是索引：\"+i+\",n是值：\"+n.value);})})$(\"#btn8\").click(function(){//each()循环json数组var json = {\"name\":\"张安\",\"age\":\"23\"};$.each(json, function (i,n) {alert(\"i是key：\"+i+\",n是值：\"+n);})})$(\"#btn9\").click(function(){//each()循环对象，jquery对象就是包含若干个dom对象的数组var obj = $(\":text\");$(\":text\").each(function (i,n) {alert(\"i=\"+i+\", n=\"+n.value);})})})

八、jQuery动画

• 隐藏、显示

$(function () {//隐藏元素$(\"#hide\").click(function () {$(\"#view\").hide();})//显示元素$(\"#show\").click(function () {$(\"#view\").show();})})

• 淡入、淡出
  语法： $(选择器).fadeIn(speed,callback)
  语法： $(选择器).fadeOut(speed,callback)
  语法： $(选择器).fadeToggle(speed,callback)
  参数speed：淡入淡出的速度，取值slow、空、数字(毫秒)
  参数callback：为淡入淡出后执行的函数。

$(function () {//淡入$(\"#in\").click(function () {$(\"#div1\").fadeIn();$(\"#div2\").fadeIn(\"slow\");$(\"#div3\").fadeIn(4000);})//淡出$(\"#out\").click(function () {$(\"#div1\").fadeOut();$(\"#div2\").fadeOut(\"slow\");$(\"#div3\").fadeOut(4000);})//fadeToggle$(\"#io\").click(function () {$(\"#div1\").fadeToggle();$(\"#div2\").fadeToggle(\"slow\");$(\"#div3\").fadeToggle(4000);})})

• 滑动

$(function () {//向下滑$(\"#slide1\").click(function () {$(\"#content\").slideDown();})//向上滑$(\"#slide2\").click(function () {$(\"#content\").slideUp(3000);})//slideToggle$(\"#slide3\").click(function () {$(\"#content\").slideToggle(\"slow\");})})

• 动画
  语法：$(选择器).animate({param},speed,callback)
  参数speed：取值slow、空、数字(毫秒)
  参数params： 参数定义形成动画的 CSS 属性
  参数callback：完成动画后执行的函数

$(function () {//演示动画$(\"#begin\").click(function () {$(\"#div1\").animate({left:\'200px\',width:\'100px\',heigth:\'100px\'},4000);})//停止动画$(\"#stop\").click(function (){$(\"#div1\").stop();})})

九、jQuery实现Ajax异步请求

• 见往期文章：使用jQuery实现Ajax请求