Python全栈之jQuery笔记
py3study
发布
于
2020-01-19 15:26:56
发布
于
2020-01-19 15:26:56
jQuery runnoob网址:
http://www.runoob.com/jquery/jquery-tutorial.html
jQuery 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
:selected
5.筛选选择器(方法):
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法.
名称 用法 描述
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或false
3.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 是在元素外面追加.
appendTo
prependTo
3.清空节点与删除节点:
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>
阻止默认行为:
阻止右键菜单:写入下列代码可阻止页面的右键菜单行为.
$(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-AJAX
1.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, https
2.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 zeptojs
Zepto是一个轻量级的针对现代高级浏览器的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 swiper
swiper.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 class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></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 bootstrap
bootstrap是简单、直观、强悍的前端开发框架,让web开发更迅速、简单.来自Twitter,是目前很受欢迎的前端框架之一.
Bootrstrap是基于HTML、CSS、JavaScript的,让书写代码更容易.移动优先,响应式布局开发.
bootstrap中文网址: http://www.bootcss.com/
bootstrap容器
container-fluid 流体
container
bootstrap栅格系统
bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:
1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-
bootstrap响应式查询区间:
1、大于等于768
2、大于等于992
3、大于等于1200
bootstrap表单:
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-lg
bootstrap字体图标:
通过字体代替图标,font文件夹需要和css文件夹在同一目录
bootstrap下拉菜单:
1、dropdown-toggle
2、dropdown-menu
bootstrap选项卡:
1、nav
2、nav-tabs
3、nav-pills
4、tab-content
bootstrap导航条:
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.html
less中文网址:http://lesscss.cn/
less语法：
// 不会被编译的注释
/* 会被编译的注释 */
@w:200px;
.box{
width:@w;
height:@w;
background-color:red;
.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);
@w:300px;
.box{
width:@w+20;
.list{
&:hover{
span{
// 导入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中缩放图片
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、使用事件代理(事件委托)