Python全栈之jQuery笔记
jQuery runnoob网址:
http://www.runoob.com/jquery/jquery-tutorial.htmljQuery API手册: http://www.runoob.com/manual/jquery/jQuery笔记笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理.JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套. 2. 找对象麻烦,方法少,还比较长. 3. 会有兼容性的问题. 4. 如果想要实现简单的动画效果,需要用 animate, 也存在兼容性问题. 5.js注册事件存在覆盖情况,需要使用addEventListener,比较麻烦.jQuery的优点: 1. 隐式遍历,不需要使用for循环; 2. 找对象比较容易,非常灵活; 3. 处理兼容性问题比较好; 4. 实现动画效果非常简单,而且功能强大. 5. 代码简单,粗暴.jQuery版本: 1.x版本: 能够兼容IE678浏览器 2.x版本: 不兼容IE678浏览器 1.x和2.x版本的jQuery都不再更新版本了,现在只更新3.x版本 3.x版本: 不兼容IE678,更加的精简(在国内不流行, 因为国内使用jQuery的主要目的就是兼容IE678)jQuery的入口函数: 方式一: $(document).ready(function () { 代码块 }); 方式二: $(function () { 代码块 });JS的入口函数: window.onload = function () { 代码块 };两种入口函数的区别: 1.jQuery的入口函数要比JS的入口函数先执行; 2.jQuery的入口函数会等待页面加载完成才执行,但不会等待图片的加载; 3.JS的入口函数会等待页面和图片都加载完成才执行.DOM对象: 使用JS的方式获取的元素就是JS对象(DOM对象).jQuery对象: 使用jQuery的方式获取的元素就是jQuery对象.DOM对象与jQuery对象是两类不同的对象,所以: DOM对象不能调用jQuery的方法; jQuery对象也不能调用DOM对象的方法; 但是DOM对象和jQuery对象之间可以相互转换.DOM对象转换为jQuery对象: $(DOM对象)jQuery对象转换成DOM对象: 将jQuery中封闭的DOM对象取出来即可.jQuery中的 $ 实际上就是一个函数.=================================================================jQuery中的选择器:jQuery的选择器基本兼容了CSS1到CSS3所有的选择器,并且还添加了很多复杂的选择器.用jQuery选择器选择一个对象,会有多种不同的方法可供选择.1.基本选择器(跟CSS选择器用法一模一样):名称 用法(示例) 描述ID选择器 $("#id名") 获取指定的ID元素类选择器 $(".class名") 获取同一类class元素标签选择器 $("标签名") 获取同一类标签的所有元素并集选择器 $("div,p,li") 使用逗号分隔,只要符合条件之一就会被选择交集选择器 $("div.redClass") 获取class为redClass的div元素其他选择器示例: $(document) 选择整个文档对象 $("input[name=first]")选择name属性等于first的input元素(标签) 注意:这么写也行:$("input[name='first']") $("[name]") 选择所有包含name属性的标签 $("[name=first]") 选择所有属性name等于first的标签 注意:这么写也行:$("[name='first']") $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素2.层级选择器(跟CSS选择器用法一模一样):名称 用法(示例) 描述子代选择器 $("ul>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的li元素,包括孙子辈3.过滤选择器(这种选择器都带冒号):名称 用法 描述:eq(index) $("li:eq(2)"); 获取li元素中索引号为2的元素(索引从0开始):odd $("li:odd"); 获取li元素中下标是奇数的元素(下标从0开始):even $("li:even"); 获取li元素中下标是偶数的元素(下标从0开始):gt $('#ul1 li:gt(2)') 选择id为ul1元素下的前三个之后的li:lt $('#ul1 li:lt(2)') 选择id为ul1元素下的前三个li:input $("#myForm :input") 选择表单中的input元素:visible $("div:visible") 选择可见的div元素4.表单对象属性选择器:enabled 匹配所有不可用的元素:disabled:checked:selected5.筛选选择器(方法):筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法.名称 用法 描述children(selector) $("ul").children("li") 相当于$("ul>li"),子代选择器find(selector) $("ul").find(".myClass"); 选择div内的class等于myClass的元素siblings(selector) $("#first").siblings("li"); 查找兄弟节点,不包括自己本身parent() $("#first").parent(); 查找父亲元素eq(index) $("li").eq(2); 相当于$("li:eq(2)"),index从0开始next() $("li").next(); 找下一下兄弟prev() $("li").prev(); 找上一个兄弟prev("p") $("div").prev("p"); 选择div元素前面的第一个p元素next("p") $("div").next("p"); 选择div元素后面的第一个p元素closest("from") $("div").closest("form"); 选择离div最近的那个form父元素=================================================================jQuery之遍历jQuery提供了多种遍历DOM的方法.遍历方法中最大的种类是树遍历(tree-traversal).1.jQuery遍历-祖先: parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历. parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>). 您也可以使用可选参数来过滤对祖先元素的搜索,示例:$("span").parents("ul"); 返回所有<span>元素的所有祖先,并且它是<ul>元素. parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素. $("span").parentsUntil("div"); 返回介于 <span> 与 <div> 元素之间的所有祖先元素(不包含div元素).2.jQuery遍历-后代后代是子、孙、曾孙等等.通过jQuery,您能够向下遍历DOM树,以查找元素的后代.下面是两个用于向下遍历DOM树的jQuery方法: children() 返回被选元素的所有直接子元素.该方法只会向下一级对DOM树进行遍历. $("div").children(); 返回每个<div>元素的所有直接子元素 您也可以使用可选参数来过滤对子元素的搜索: $("div").children("p.1"); 返回类名为"1"的所有<p>元素,并且它们是<div>的直接子元素. find() 返回被选元素的后代元素,一路向下直到最后一个后代. $("div").find("span"); 返回属于 <div> 后代的所有 <span> 元素. $("div").find("*"); 返回 <div> 的所有后代3.jQuery遍历-同胞(siblings)同胞拥有相同的父元素.通过jQuery,您能够在DOM树中遍历元素的同胞元素.在DOM树中水平遍历: siblings() 返回被选元素的所有同胞元素. $("h2").siblings(); 返回<h2>的所有同胞元素.注意:不包括<h2>元素. $("h2").siblings("p"); 返回属于<h2>的同胞元素的所有<p>元素. next() 返回被选元素的下一个同胞元素.该方法只返回一个元素. $("h2").next(); 返回<h2>的下一个同胞元素. nextAll() 返回被选元素的所有跟随的同胞元素 $("h2").nextAll(); 返回<h2>的所有跟随的同胞元素. nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素. $("h2").nextUntil("h6") 返回介于<h2>与<h6>元素之间的所有同胞元素.注意:不包括<h6>元素. prev(), prevAll(), prevUntil() prev(),prevAll()以及 prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已: 它们返回的是前面的同胞元素(在DOM树中沿着同胞之前元素遍历,而不是之后元素遍历).4.jQuery遍历-过滤缩小搜索元素的范围:三个最基本的过滤方法是:first(),last()和eq().它们允许您基于其在一组元素中的位置来选择一个特定的元素.其他过滤方法,比如filter()和not()允许您选取匹配或不匹配某项指定标准的元素. first() 返回被选元素的首个元素. $("div p").first(); 选取首个 <div> 元素内部的第一个 <p> 元素. last() 返回被选元素的最后一个元素. $("div p").last(); 选择最后一个<div>元素中的最后一个<p>元素. eq(index) 返回被选元素中带有指定索引号的元素.索引号从0开始,因此首个元素的索引号是0而不是1. $("p").eq(1); 选取第二个<p>元素(索引号 1). filter() 允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回. $("p").filter(".url"); 返回带有类名"url"的所有<p>元素. not() 返回不匹配标准的所有元素.提示:not()方法与filter()相反. $("p").not(".url"); 返回不带有类名"url"的所有<p>元素.=================================================================jQuery操作属性1.attr操作(设置单个属性): 第一个参数:需要设置的属性名 第二个参数:对应的属性值attr(name, value);示例: $("img").attr("title", "新名字"); $("img").attr("alt", "新说明");用attr设置多个属性: 参数是一个对象,包含所有需要设置的属性名与属性值 $("img").attr({ title: "新名字", alt: "新说明", style: "opacity: .5", # 设置透明度 });获取属性: 传入需要获取的属性名,返回对应的属性值 var 变量 = $(selector).attr("属性名");jQuery方法attr(),也提供回调函数.回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值.然后以函数新值返回您希望使用的字符串.示例如下: $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });删除属性:removeAttr()注意: 对于布尔类型(selected, checked, disabled等)的属性,不要用attr方法,使用prop方法; prop()函数的执行结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串. attr()函数的执行结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是undefined. 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()注意:1.1类比attr操作的css操作: jQuery通过CSS方法同时设置多种样式: $("li").css("backgroudColor", "pink").css("color", "red").css("fontSize", "14px");jQuery设置CSS样式的推荐方法: $("li").css({ backgroundColor: "pink", color: "red", fontSize: "14px", border: "1px solid black", ... });1.2 jQuery获取CSS样式的值: var 变量 = $(selector).css("样式的key,比如background或color等"); 特别注意: 选择器获取的多个元素,获取信息获取的是第一个,比如：$("div").css("width").获取的是第一个div的width. 原因:jQuery的隐式迭代导致 关于jQuery的隐匿迭代: jQuery进行设置操作时,会给符合条件的所有jQuery对象设置上相应的值; jQuery在进行值获取时,只会返回第一个元素对应的值.1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") //移除多个样式 $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式2.prop操作: 在jQuery1.6之后,对于checked, selected, disabled等这类boolean类型的属性来说,不能用attr方法,只能用prop方法.设置属性: $(selector).prop("checked", true);获取属性: $(selector).prop("checked"); # 返回true或false3.jQuery动画jQuery提供了三组基本动画,这些动画都是标准的,有规律的的效果,jQuery还提供了自定义动画的功能.3.1三组基本动画: 显示(show)与隐藏(hide)是一组动画,注意:show与hide动画效果如果不传speed参数是没有动画效果的; 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 滑入(slideUp)与滑出(slideDown)以及切换(slideToggle),注意:slide相关动画不传speed参数也有动画效果; 语法: $(selector).slideUp(speed,callback); $(selector).slideDown(speed,callback); $(selector).slideToggle(speed,callback); 淡入(fadeIn)与淡出(fadeOut)以及切换(fadeToggle),(fadeTo). 语法: $(selector).fadeOut(speed, easing, callback); $(selector).fadeIn(speed, easing, callback); $(selector).fadeToggle(speed, easing, callback); $(selector).fadeTo(speed, opacity, easing, callback); opacity为0-1之间,代表透明度.show([speed], [callback]); speed:可选参数,表示动画执行的时间,单位毫秒 1.如果不传,就没有动画效果,如果是slide和fade系列,会默认为normal; 2.推荐设置speed为1000毫秒; 3.固定字符串(即:show(slow)), slow(200), normal(400), fast(600).如果传其他字符串,则默认为normal. callback:可选参数,执行完动画后执行回调函数.3.2自定义动画:animate: 自定义动画:$(selector).animate({params}, [speed], [easing], [callback]);参数: {params}: 要执行动画的css属性,带数字(必选); speed: 执行动画的时长(可选); easing: 执行动画的效果,默认为swing(缓动), 可以是linear(匀速); callback: 动画执行完后立即执行的回调函数(可选).注意: 默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!3.3动画队列与停止动画: 在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画 执行完成才会执行.stop(clearQueue, jumpToEnd);参数: clearQueue:是否清除队列; jumpToEnd:是否跳转到最终效果.示例:$(selector).stop(); --> 等现于$(selector).stop(false, false);通常animate方法与stop方法会一同使用,语法如下:$(selector).stop().animate({params: values}, speed, easing, callback);=================================================================jQuery节点操作:1.创建节点: $(htmlStr) htmlStr: html格式的字符串 $("<span>这是一个span元素</span>");2.添加节点append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容 注意:append/prepend 是在选择元素内部嵌入;after/before 是在元素外面追加.appendToprependTo3.清空节点与删除节点:empty: 清空指定节点的所有元素,自身保留(清理门户) $("div").empty(); 清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码) $("div").html(""); 使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会清除.remove: 相比于empty,自身也删除注意:jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤: $("p").remove(".italic"); 删除所有具有属性class='italic'的元素.4.克隆节点:作用:复制匹配的元素复制$(selector)所匹配到的元素(深度复制) cloneNode(true)返回值为复制的新元素,和原来的元素没有任何关系.即修改新元素,不会影响到原来的元素 $(selector).clone();jQuery特殊属性操作1.1 val方法 val方法用于设置和获取"表单元素"的值,例如input,textarea的值(只针对表单元素) 设置值:$(selector).val("要设置的值"); 获取值:var 变量 = $(selector).val();1.2 html方法与text方法 html方法相当于innerHTML, text方法相当于innerText html方法的使用: 设置内容:$(selector).html("<span>要设置的内容</span>"); 获取内容:var 变量 = $(selector).html(); text方法的使用: 设置内容:$(selector).text("<span>这是要设置的内容</span>"); 获取内容:var 变量 = $(selector).text(); 区别:html方法会识别html标签, text方法会把内容直接当成字符串,并不会识别字符串内的html标签.补充说明:text()、html()以及val()的回调函数:上面的三个jQuery方法:text()、html()以及val(),同样拥有回调函数.回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值.然后以函数新值返回您希望使用的字符串.示例如下: $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); });1.3 width方法与height方法 设置或者获取高度 带参数表示设置高度:$(selector).height(200); 不带参数表示获取高度:$(selector).height(); innerWidth()方法,innerWidth()获取的是width+padding的值 outerWidth()方法,outerWidth(flase)获取的是width+padding+border的值 outerWidth(true)获取的是width+padding+border+margin的值 其他: $(window).height();获取可视区高度 $(document).height();获取页面高度1.4 scrollTop与scrollLeft: 设置或者获取垂直滚动条的位置 获取页面被卷曲的高度: $(window).scrollTop(); 获取页面被卷曲的宽度: $(window).scrollLeft();1.5 offset方法与position方法: offset方法获取元素距离document的位置,position方法获取的是元素距离有定位的父元素的位置. 获取元素距离document的位置,返回值为对象{left: 100, top: 100} $(selector).offset(); 获取相对于其最近的有定位的父元素的位置:$(selector).position();2 jQuery事件机制jQuery事件:事件函数列表： blur() 元素失去焦点 focus() 元素获得焦点 change() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击 当单击元素时,发生click事件. click()方法触发click事件,或规定当发生click事件时运行的函数. 触发被选元素的click事件: $(selector).click() 添加函数到click事件:$(selector).click(function) mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 mouseup() 松开鼠标 mousedown() 按下鼠标 mousemove() 鼠标在元素内部移动 keydown() 按下键盘 keypress() 按下键盘 keyup() 松开键盘 load() 元素加载完毕 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 select() 用户选中文本框中的内容 submit() 用户递交表单 toggle() 根据鼠标点击的次数，依次运行多个函数 unload() 用户离开页面注意事项:关于mouseover/mouseout事件与mouseenter/mouseleave事件的区别: mouseover/mouseout会在鼠标经过自己和自己的子元素时都会触发事件; mouseenter/mouseleave只会在鼠标经过自己时触发事件.主动触发事件:可使用jquery对象上的trigger方法来触发对象上绑定的事件.示例: 给element绑定hello事件 element.bind("hello",function(){ alert("hello world!"); }); 触发hello事件 element.trigger("hello");事件冒泡: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活), 或者它到达了对象层次的最顶层,即document对象(有些浏览器是window).事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件.阻止事件冒泡: 事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation()来阻止.示例(如果每个元素的父元素都定义了事件,则会从下到上依次触发):$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click(function(event) { alert('grandfather'); });})......<div class="father"> <div class="son"> <div class="grandson"></div> </div></div>阻止默认行为:阻止右键菜单:写入下列代码可阻止页面的右键菜单行为.$(document).contextmenu(function(event) { event.preventDefault();}); js中已经学习过了事件,但是jQuery对JS事件进行了封装,增加并扩展了事件处理机制, jQuery不仅提供了更加优雅的事件处理语法 ,而且极大的增强了事件处理的能力.2.1 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定 bind注册多个事件示例: $(selector).bind({ mouseenter: function(){ alert("mouseenter方法"); }, click: function() { alert("click方法"); }, ... }); bind为多种事件绑定同一函数示例: $(selector).bind("mouseenter click", function(){函数体}); delegate事件绑定: 示例: $(selector).delegate("p", "click", function(){函数体}); 参数: 第一个参数:事件最终由谁来执行(示例为事件最终由p标签来执行); 第二个参数:事件的类型(示例为click事件); 第三个参数:函数,需要做的事件 delegate事件绑定的优点: 动态创建的元素也能绑定事件; 注意: 委托事件只能给父元素以及祖先元素注册,不能给子元素注册,其实现原理为冒泡原理.2.2 on注册事件(重点) jQuery1.7之后,jQuery用on统一了所有事件的处理方法. 最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用.on注册简单事件:$(selector).on("click", function(){});表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定事件.on注册委托事件:$(selector).on("click", "span", function(){}); 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定.on注册事件的语法:第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或自定义事件)第二个参数:selector,执行事件的后代元素(可选),如果没有后代元素,那么事件将由自己执行.第三个参数:data:传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)第四个参数:handler,事件处理函数$(selector).on(event[, selector][, data], handler);2.3事件解绑unbind方式(不用) $(selector).unbind();解绑所有的事件 $(selector).unbind("click");解绑指定的事件undelegate方式(不用) $(selector).undelegate();解绑所有的delegate事件 $(selector).undelegate("click");解绑所有的click事件off方式(推荐): $(selector).off();解绑selector选中元素的所有事件 $(selector).off("click");解绑selector选中元素的click事件2.4 触发事件 $(selector).click();触发click事件; $(selector).trigger("click");2.5 jQuery事件对象 jQuery事件对象其实就是对JS事件对象的一个封装,处理了兼容性的问题 screenX和screenY:对应屏幕最左上角的值 clientX和clientY:距离页面左上角的位置(忽视滚动条) pageX和pageY:距离页面最顶部的左上角的位置(会计算滚动条的距离) event,keyCode:按下的键盘代码 event.data:存储绑定事件时传递的附加值 event.stopPropagation():阻止事件的冒泡行为(propagation英文:宣传; 传播,传输,蔓延,扩展,波及深度; 〔生〕繁殖法,〔地〕传导; 培养) event.preventDefault():阻止浏览器默认的行为 return false:既能阻止事件冒泡,又能阻止浏览器的默认行为.3. jQuery补充知识点3.1 链式编程 jQuery链式调用: jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写.下列的方法都返回jQuery对象,可链式调用: $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素 示例:$("#p1").css("color","red").slideUp(2000).slideDown(2000); 通常情况下,只有设置操作才能把链式编程延续下去. 因为获取操作的时候,会返回获取的相应的值,无法返回jQuery对象. end(); 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态.3.2 each方法 jQuery的隐匿迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要隐匿迭代了. each作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数 $(selector).each(function(index, element){}); 第一个参数表示当前元素所有匹配元素中的索引号 第二个参数表示当前元素(DOM对象)=================================================================jQuery-AJAX1.jQuery load()方法: load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); 必需的URL参数规定您希望加载的URL 可选的data参数规定与请求一同发送的查询字符串键/值对集合. 可选的callback参数是load()方法完成后所执行的函数名称.回调函数可以设置不同的参数: responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象 示例: $("#div1").load("demo_test.txt"); 把文件"demo_test.txt"的内容加载到指定的<div>元素中. $("#div1").load("demo_test.txt #p1"); 把"demo_test.txt"文件中id="p1"的元素的内容,加载到指定的<div>元素中. 报错示例:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https2.jQuery-AJAX get()和post()方法: jQuery get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据. $.get() 该方法通过 HTTP GET 请求从服务器上请求数据. 语法: $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL. 可选的 callback 参数是请求成功后所执行的函数名.第一个回调参数 data 存有被请求页面的内容,第二个回调参数 status 存有请求的状态. 示例: $.get("/try/ajax/demo_test.php",function(data,status){ 函数体 }); $.post() 该方法通过 HTTP POST 请求向服务器提交数据. 语法: $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL. 可选的 data 参数规定连同请求发送的数据. 可选的 callback 参数是请求成功后所执行的函数名.第一个回调参数 data 存有被请求页面的内容,而第二个回调参数 status 存有请求的状态. 示例: $("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });3.jQuery-Ajax $.ajax使用方法: 常用参数: 1、url 请求地址 2、type 请求方式,默认是'GET',常用的还有'POST' 3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html' 4、data 设置发送给服务器的数据 5、success 设置请求成功后的回调函数 6、error 设置请求失败后的回调函数 7、async 设置是否异步,默认值是'true',表示异步 以前的写法: $.ajax({ url: 'js/user.json', type: 'GET', dataType: 'json', data:{'aa':1} success:function(data){ ...... }, error:function(){ alert('服务器超时，请重试！'); } }); 新的写法(推荐): $.ajax({ url: 'js/user.json', type: 'GET', dataType: 'json', data:{'aa':1} }) .done(function(data) { ...... }) .fail(function() { alert('服务器超时，请重试！'); });=================================================================jQuery-noConflict()方法jQuery noConflict() 该方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了.虽然释放了 $ ,但依然可以用jQuery来代替 $ 执行jQuery所有的功能.示例: $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍然在工作!"); }); });您也可以创建自己的简写,noConflict()会返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用,示例如下: var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍然在工作!"); }); });如果你的jQuery代码块使用$简写,并且您不愿意改变这个快捷方式,那么您可以把$符号作为变量传递给ready方法.这样就可以在函数内使用$符号了 - 而在函数外,您依旧不得不使用 "jQuery" 示例如下: $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍然在工作!"); }); });=================================================================jQuery扩展:1 jQuery插件简介(不作展开):1.1 jQuery常用插件: 插件: jQuery不可能包含所有的功能,我们可以通过插件来扩展jQuery的功能 jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能.1.1.1jQuery.color.js animate不支持颜色的渐变,但使用jQuery.color.js后就可以支持. 使用该插件的步骤: 1.引入jQuery文件 2.引入插件(如果有用到css的) 3.使用插件1.1.2jQuery.lazyload.js 懒加载插件1.1.3jQuery.ui.js插件 jQueryUI专指由jQuery官方维护的UI方向的插件 官方API: http://api.jqueryui.com/category/all/ 其他教程:jQueryUI教程 基本使用: 1.引入jQueryUI的样式文件 2.引入jQuery 3.引入jQueryUI的JS文件 4.使用jQueryUI功能 使用jQuery.ui.js实现新闻模块的案例.1.2制作 jQuery插件 原理: jQuery插件其实就是给jQuery对象增加一个新的方法,让jQuery对象拥有某一个功能. 通过给$.fn添加方法就能够扩展jQuery对象 $.fn.pluginName = function(){};=================================================================2 移动端库和框架(不作展开):2.1 移动端js事件 移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1、touchstart: 手指放到屏幕上时触发 2、touchmove: 手指在屏幕上滑动式触发 3、touchend: 手指离开屏幕时触发 4、touchcancel: 系统取消touch事件的时候触发,比较少用.移动端一般有三种操作:点击、滑动、拖动.这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实现这三种操作,可以使用封装成熟的js库.2.2 zeptojsZepto是一个轻量级的针对现代高级浏览器的JavaScript库,它与jquery有着类似的api.如果你会用jquery,那么你也会用zepto.Zepto的一些可选功能是专门针对移动端浏览器的,它的最初目标是在移动端提供一个精简的类似jquery的js库.zepto官网: http://zeptojs.com/zepto中文api: http://www.css88.com/doc/zeptojs_api/zepto包含很多模块,默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块.如果还需要其他的模块,可以自定义构建.zepto自定义构建地址: http://github.e-sites.nl/zeptobuilder/touch模块封装了针对移动端常用的事件,可使用此模块进行移动端特定效果开发,这些事件有: 1.tap 元素tap的时候触发,此事件类似click,但是比click快. 2.longTap 当一个元素被按住超过750ms触发. 3.swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发.(可选择给定的方向)2.3 swiperswiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果.swiper分为2.x版本和3.x版本,2.x版本支持低版本浏览器(IE7),3.x放弃支持低版本浏览器,适合应用在移动端. 2.x版本中文网址:http://2.swiper.com.cn/ 3.x版本中文网地址:http://www.swiper.com.cn/swiper使用方法:<script type="text/javascript" src="js/swiper.min.js"></script>......<link rel="stylesheet" type="text/css" href="css/swiper.min.css">......<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div></div><script>var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', initialSlide :1, paginationClickable: true, loop: true, autoplay:3000, autoplayDisableOnInteraction:false});</script>swiper使用参数: 1、initialSlide:初始索引值,从0开始 2、direction:滑动方向 horizontal | vertical 3、speed:滑动速度,单位ms 4、autoplay:设置自动播放及播放时间 5、autoplayDisableOnInteraction:用户操作swipe后是否还自动播放,默认是true,不再自动播放 6、pagination:分页圆点 7、paginationClickable:分页圆点是否点击 8、prevButton:上一页箭头 9、nextButton:下一页箭头 10、loop:是否首尾衔接 11、onSlideChangeEnd:回调函数，滑动结束时执行2.4 bootstrapbootstrap是简单、直观、强悍的前端开发框架,让web开发更迅速、简单.来自Twitter,是目前很受欢迎的前端框架之一.Bootrstrap是基于HTML、CSS、JavaScript的,让书写代码更容易.移动优先,响应式布局开发.bootstrap中文网址: http://www.bootcss.com/bootstrap容器 container-fluid 流体 container 1170 970 750 100%bootstrap栅格系统bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统: 1、col-lg- 2、col-md- 3、col-sm- 4、col-xs-bootstrap响应式查询区间: 1、大于等于768 2、大于等于992 3、大于等于1200bootstrap表单: 1、form 声明一个表单域 2、form-inline 内联表单域 3、form-horizontal 水平排列表单域 4、form-group 表单组、包括表单文字和表单控件 5、form-control 文本输入框、下拉列表控件样式 6、checkbox checkbox-inline 多选框样式 7、radio radio-inline 单选框样式 8、input-group 表单控件组 9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式 10、form-group-lg 大尺寸表单 11、form-group-sm 小尺寸表单bootstrap按钮: 1、btn 声明按钮 2、btn-default 默认按钮样式 3、btn-primay 4、btn-success 5、btn-info 6、btn-warning 7、btn-danger 8、btn-link 9、btn-lg 10、btn-md 11、btn-xs 12、btn-block 宽度是父级宽100%的按钮 13、active 14、disabled 15、btn-group 定义按钮组bootstrap图片: img-responsive 声明响应式图片bootstrap隐藏类: 1、hidden-xs 2、hidden-sm 3、hidden-md 4、hidden-lgbootstrap字体图标: 通过字体代替图标,font文件夹需要和css文件夹在同一目录bootstrap下拉菜单: 1、dropdown-toggle 2、dropdown-menubootstrap选项卡: 1、nav 2、nav-tabs 3、nav-pills 4、tab-contentbootstrap导航条: 1、navbar 声明导航条 2、navbar-default 声明默认的导航条样式 3、navbar-inverse 声明反白的导航条样式 4、navbar-static-top 去掉导航条的圆角 5、navbar-fixed-top 固定到顶部的导航条 6、navbar-fixed-bottom 固定到底部的导航条 7、navbar-header 申明logo的容器 8、navbar-brand 针对logo等固定内容的样式 11、nav navbar-nav 定义导航条中的菜单 12、navbar-form 定义导航条中的表单 13、navbar-btn 定义导航条中的按钮 14、navbar-text 定义导航条中的文本 9、navbar-left 菜单靠左 10、navbar-right 菜单靠右bootstrap模态框: 1、modal 声明一个模态框 2、modal-dialog 定义模态框尺寸 3、modal-lg 定义大尺寸模态框 4、modal-sm 定义小尺寸模态框 5、modal-header 6、modal-body 7、modal-footer=================================================================3 前端自动化及优化(不作展开):3.1 less、sass、stylus它们是三种类似的样式动态语言,属于css预处理语言,它们有类似css的语法,为css赋予了动态语言的特性、如变量、继承、运算、函数等.这么做是为了css的编写和维护.它们使用的文件分别是: .less、.scss、*.styl,这些文件是不能再网页上直接使用的,最终要编译成css文件来使用,编译的方法有软件编译,或者用nodejs程序.less、sass编译软件:http://koala-app.com/index-zh.htmlless中文网址:http://lesscss.cn/less语法： 1、注释 // 不会被编译的注释 /* 会被编译的注释 */ 2、变量 @w:200px; .box{ width:@w; height:@w; background-color:red; } 3、混合 .border{ border:1px solid #ddd; } .box(@w:100px,@h:50px,@bw:1px){ width:@w; height:@h; border:@bw solid #ddd; } .box{ .border; background-color:red; } 4、匹配模式 .p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){ postion:fixed; } .box{ .p(f); } 5、运算 @w:300px; .box{ width:@w+20; } 6、嵌套 .list{ li{ ... } a{ ... &:hover{ ... } } span{ ... } } 7、导入 // 导入common.less,导入a.css文件 @import "common"; @import (less) "a.css";3.2 前端自动化Node.js Node.js可以理解为是一门后端脚本语言,使用了和JavaScript相同的语法,会使用JavaScript的程序员能很快上手node.js. nodjs在处理高并发方面性能卓越,目前许多公司都在使用nodejs作为后端数据服务和前端开发的中间层. node.js的中文网站:https://nodejs.org/zh-cn/前端自动化 前端开发的流程越来越复杂,其中有代码的合并和压缩、图片的压缩;对less、sass的预处理;文件操作等. 这些工作是重复乏味的,为了优化开发流程,提高工作效率,前端自动化工具就出现了,自动化工具可以通过配置,自动完成这些工作.grunt、gulp grunt和gulp是使用node.js编写的,前端首选的自动化工具,gulp在书写配置上比grunt更简洁,运行的性能更高,gulp逐渐成为主流.gulp的使用 gulp使用步骤: 安装nodejs->全局安装gulp->项目安装gulp以及gulp插件->配置gulpfile.js->运行任务 gulp网站:http://gulpjs.com/常用gulp插件： 压缩js代码(gulp-uglify) less的编译(gulp-less) css的压缩(gulp-minify-css) 自动添加css3前缀(gulp-autoprefixer) 文件改名字 (gulp-rename)3.3 前端性能优化从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度.网站的性能直接会影响到用户的数量,所有前端性能优化很重要.前端性能优化分为如下几个方面:一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息. 3、使用内容分发网络 CDN 4、为文件设置Last-Modified、Expires和Etag 5、使用GZIP压缩传送 6、权衡DNS查找次数(使用不同域名会增加DNS查找) 7、避免不必要的重定向(加"/")二、编码:html: 1、使用结构清晰，简单，语义化标签 2、避免空的src和href 3、不要在HTML中缩放图片css: 1、精简css选择器 2、把CSS放到顶部 3、避免@import方式引入样式 4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站: http://tool.css-js.com/base64.html 5、使用css动画来取代javascript动画 6、使用字体图标,图标库网站: http://fontawesome.io/icons/ 在线制作网站: www.iconfont.cn 7、使用css sprite 8、使用svg图形 9、避免使用CSS表达式 a {star : expression(onfocus=this.blur)} 10、避免使用滤镜javascript: 1、减少引用库的个数 2、使用requirejs或seajs异步加载js 3、JS放到页面底部引入 4、避免全局查找 5、减少属性查找 6、使用原生方法 7、用switch语句代替复杂的if else语句 8、减少语句数,比如说多个变量声明可以写成一句 9、使用字面量表达式来初始化数组或者对象 10、使用DocumentFragments或innerHTML取代复杂的元素注入 11、使用事件代理(事件委托) 12、避免多次访问dom选择集 13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover 14、使用Web Storage缓存数据 15、使用Array的join方法来代替字符串的"+"连接(先将要连接的字符串放进数组)=================================================================
