慕课网前端课程学习笔记

Posted on | Edited on | In | | Views:

学习慕课网上的一些重点记录。比较基础的，记录下来以免忘记，学而时习之！

关于CSS

  • css样式优先级?

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

  • 我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?

浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

权值的规则：继承的权值为0.1，标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

  • 如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

  • 有些特殊的情况需要为某些样式设置具有最高权值，怎么办？

我们可以使用!important来解决。

1
p{color:red!important;}

  • CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

  • 层模型有三种形式：

    1、绝对定位(position: absolute)

    2、相对定位(position: relative)

    3、固定定位(position: fixed)

  • 字体缩写:

    1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

    2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

eg:

1
2
3
body{
    font:12px/1.5em  "宋体",sans-serif;
}

  • 当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

  • 不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：

    加入 table 标签

    设置 display;inline 方法

    设置 position:relative 和 left:50%;

    通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中

  • 垂直居中-父元素高度确定的单行文本:父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

  • 父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

    方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

    说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。

    方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

关于JavaScript

  • 变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

  • 二维数组的定义方法一

1
2
3
4
5
6
7
var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }
  • 主要事件表:

主要事件表

  • 字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）

  • 获取属性elementNode.getAttribute(name)

  • 设置属性elementNode.setAttribute(name,value)

  • nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

  • nodeValue 属性：节点的值

    元素节点的 nodeValue 是 undefined 或 null

    文本节点的 nodeValue 是文本自身

    属性节点的 nodeValue 是属性的值

  • nodeName 属性: 节点的名称，是只读的。

    元素节点的 nodeName 与标签名相同

    属性节点的 nodeName 是属性的名称

    文本节点的 nodeName 永远是 #text

    文档节点的 nodeName 永远是 #document

  • node.firstChild等同于elementNode.childNodes[0]

  • node.lastChild等同于elementNode.childNodes[elementNode.childNodes.length-1]

  • 改变 HTML 元素的内容:document.getElementById(id).innerHTML=new HTML

JQuery

###基础选择器

ID选择器：$("#my_id")

元素选择器：$("element")根据元素的名称可以查找到该元素，并调用css()方法将设置该元素内容中文字显示的样式。eg:$("div").css("border","1px solid #CCC")

类选择器：$(".class")

选择器：`$(““),eg:$(“div *”)`获得div中所以子元素

sele1,sele2,seleN选择器：$("sele1,sele2,seleN"),选择任意多个指定的元素

层次性选择器：$("ance desc"),ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。

parent>child选择器：$("parent > child"),与ance desc选择器相比，parent>child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈。

prev+next选择器：$("prev+next"),找与“prev”元素紧邻的下一个“next”元素。

prev~siblings选择器：$("prev~siblings"),也是查找prev 元素之后的相邻元素，但$("prev+next")只获取第一个相邻的元素，而$("prev~siblings")则获取prev 元素后面全部相邻的元素。

过滤选择器

:first过滤选择器：过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。eg:$("li:first"),获取第一个li元素。

:last,同:first相反，获取最后一个元素。

:eq(index)过滤选择器：其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。

:contains(text)过滤选择器：选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

:has(selector)过滤选择器：获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

:hidden过滤选择器：获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。

:visible过滤选择器：获取的是全部可见的元素。

[attribute=value]属性选择器：获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。eg：$("li[title='我最爱']")

[attribute!=value]属性选择器：你懂得，和上一个相反！

[attribute=value]属性选择器：它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。eg：`$(“li[title=’最’]”)`

:first-child子元素过滤选择器：使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

:last-child子元素过滤选择器：类同上面的。

表单选择器

:input选择器：返回全部的表单元素。

:text表单文本选择器：获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。

:password表单密码选择器：获取表单中全部的密码输入文本框元素。

:radio单选按钮选择器：获取表单中的全部单选按钮元素。

:checkbox复选框选择器：快速定位并获取表单中的复选框元素。

:submit提交按钮选择器：获取表单中的这个提交按钮元素。eg：$("#frmTest input:submit")

:image图像域选择器：可以快速获取该类全部元素。

:button表单按钮选择器：获取且只能获取“type”属性值为“button”的和

:checked选中状态选择器：调用:checked可以获取处于选中状态的全部元素。

:selected选中状态选择器：只能获取

操作DOM元素

使用attr()方法控制元素的属性：attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。

操作元素的内容：使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。

操作元素的样式：通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。

移除属性和样式：使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名。

使用append()方法向元素内追加内容：append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

使用appendTo()方法向被选元素内插入内容：appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：$(content).appendTo(selector)。参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

使用before()和after()在元素前后插入内容：可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：$(selector).before(content)和$(selector).after(content),其中参数content表示插入的内容，该内容可以是元素或HTML字符串。

使用clone()方法复制元素：调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：$(selector).clone()其中参数selector可以是一个元素或HTML内容。

替换内容：replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：$(selector).replaceWith(content)和$(content).replaceAll(selector)参数selector为被替换的元素，content为替换的内容。

使用wrap()和wrapInner()方法包裹元素和内容：前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

使用each()方法遍历元素：遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：$(selector).each(function(index))参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

使用remove()和empty()方法删除元素：remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

事件与应用

页面加载时触发ready()事件：ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：$(document).ready(function(){})等价于$(function(){})。

使用bind()方法绑定元素的事件：$(selector).bind(event,[data] function)参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

使用hover()方法切换事件：当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：$(selector).hover(over，out)over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

使用toggle()方法绑定多个函数：toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：$(selector).toggle(fun1(),fun2(),funN(),...)其中，fun1，fun2就是多个函数的名称。（Ps：感觉这个方法好low欸，貌似新版本都已经不支持了。

使用unbind()方法移除元素绑定的事件：unbind()方法可以移除元素已绑定的事件，它的调用格式如下：$(selector).unbind(event,fun)其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。（Ps：这个应用场景也有点问题。不是特别理解。

使用one()方法绑定元素的一次性事件：one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：$(selector).one(event,[data],fun)参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。

调用trigger()方法手动触发指定的事件：trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：$(selector).trigger(event)其中event参数为需要手动触发的事件名称。（Ps：感觉没有什么用呀，手动测使用？

文本框的focus和blur事件：focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。 （Ps：常用于表单事件。

下拉列表框的change事件：当一个元素的值发生变化时，将会触发change事件。

调用live()方法绑定元素的事件：与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：$(selector).live(event,[data],fun)参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。（Ps：这个方法也没什么用，新版jquery已经移除了。。

动画特效

调用show()和hide()方法显示和隐藏元素：$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

调用toggle()方法实现动画切换效：$(selector).toggle(speed,[callback])其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

使用slideUp()和slideDown()方法的滑动效果：$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。（Ps：slideDown()仅适用于被隐藏的元素；slideup()则相反。

使用slideToggle()方法实现图片“变脸”效果：使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：$(selector).slideToggle(speed,[callback])其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

使用fadeIn()与fadeOut()方法实现淡入淡出效果：$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。

使用fadeTo()方法设置淡入淡出效果的不透明度：$(selector).fadeTo(speed,opacity,[callback])其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。

调用animate()方法制作简单的动画效果：$(selector).animate({params},speed,[callback])其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

调用animate()方法制作移动位置的动画：在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

调用stop()方法停止当前所有动画效果：停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：$(selector).stop([clearQueue],[goToEnd])其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

调用delay()方法延时执行动画效果：设置一个延时值来推迟动画效果的执行，它的调用格式为：$(selector).delay(duration)其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。

AJAX应用

使用load()方法异步请求数据：通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：load(url,[data],[callback])参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

使用getJSON()方法异步加载JSON格式数据：使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

使用getScript()方法异步加载并执行js文件：使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：jQuery.getScript(url,[callback])或$.getScript(url,[callback])参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

使用get()方法以GET方式从服务器获取数据：$.get(url,[callback])参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

使用post()方法以POST方式从服务器发送数据：用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

使用serialize()方法序列化表单元素值：将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：$(selector).serialize()其中selector参数是一个或多个表单中的元素或表单元素本身。

使用ajax()方法加载服务器数据：jQuery.ajax([settings])或$.ajax([settings])其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

使用ajaxSetup()方法设置全局Ajax默认选项：jQuery.ajaxSetup([options])或$.ajaxSetup([options])可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

使用ajaxStart()和ajaxStop()方法：ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

常用插件

（Ps：事实上并不推荐使用jQuery的插件，下面笔记仅供了解吧！

表单验证插件——validate：该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：$(form).validate({options})其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

表单插件——form：通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：$(form). ajaxForm ({options})其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

图片灯箱插件——lightBox：该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：$(linkimage).lightBox({options})其中linkimage参数为包含图片的元素名称，options为插件方法的配置对象。

图片放大镜插件——jqzoom：在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：$(linkimage).jqzoom({options})其中linkimage参数为包含图片的元素名称，options为插件方法的配置对象。

cookie插件——cookie：使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：保存：$.cookie(key，value);读取：$.cookie(key)，删除：$.cookie(key，null)其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

搜索插件——autocomplete：搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：$(textbox).autocomplete(urlData,[options]);其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。

右键菜单插件——contextmenu：右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：$(selector).contextMenu(menuId,{options});Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。

自定义对象级插件——lifocuscolor插件：自定义的lifocuscolor插件可以在

    元素中，鼠标在表项
  • 元素移动时，自定义其获取焦点时的背景色，即定义
  • 元素选中时的背景色，调用格式为：$(Id).focusColor(color)其中，参数Id表示
      元素的Id号，color表示
    • 元素选中时的背景色。（Ps：这个完全无力吐槽！

自定义类级别插件—— twoaddresult：通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：$.addNum(p1,p2) 和 $.subNum(p1,p2)上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。(PS：这个绝壁bug+无用。。。已经快被这撒比的题目逗哭了。。。)

UI型插件

拖曳插件——draggable：$(selector). draggable({options})，options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

放置插件——droppable：$(selector).droppable({options})selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

拖曳排序插件——sortable：$(selector).sortable({options})，selector参数为进行拖曳排序的元素，options为调用方法时的配置对象。

面板折叠插件——accordion：$(selector).accordion({options})其中，参数selector为整个面板元素，options参数为方法对应的配置对象。

选项卡插件——tabs：$(selector).tabs({options})，selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。（Ps：这些options参数可大有研究的地方呀。。

对话框插件——dialog：$(selector).dialog({options});selector参数为显示弹出对话框的元素，通常为

，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

菜单工具插件——menu：$(selector).menu({options})，selector参数为菜单列表中最外层

    元素，options为menu()方法的配置对象。（Ps：这个有点6！

微调按钮插件——spinner：$(selector).spinner({options});selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。（Ps：这个有意思~

工具提示插件——tooltip：$(selector).tooltip({options});其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

工具类函数

获取浏览器的名称与版本信息：在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。

检测浏览器是否属于W3C盒子模型：浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。

检测对象是否为空：$.isEmptyObject(obj);其中，参数obj表示需要检测的对象名称。

检测对象是否为原始对象：调用名为$.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：$.isPlainObject (obj);其中，参数obj表示需要检测的对象名称。

检测两个节点的包含关系：检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：$.contains (container, contained);参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。

字符串操作函数：调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：$.trim (str);参数str表示需要删除左右两边空格符的字符串。

URL操作函数：调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：$. param (obj);参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。

使用$.extend()扩展工具函数：调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：$. extend ({options});参数options表示自定义插件的函数内容。

使用$.extend()扩展Object对象：除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：$. extend (obj1,obj2,…objN);参数obj1至objN表示需要合并的各个原有对象。

jQuery总结

这课程到后面插件部分简直烂呀！不过好在jQuery最常用的就开始的那些选择器以及后面的ajax的东西，不过ajax这部份的内容已经很水很烂了！插件部分更是bug百出，慕课网的课程内容也是良莠不齐呀！

Yahoo军规

1 尽可能的减少http请求数

2 使用CDN(内容分发网络)

3 添加Expire/Cache-Control头：
expire头是一个时间值，值就是在本地的过期时间、存在本地。在本地缓存阶段，找到一个对应的资源值，当前时间没有超过资源的过期时间，就直接使用这一个资源，不发送http请求。个人理解就是看本地cache有没有过期，没有过期就不用再去请求了。
Cache-Control是http协议中常用的头部之一，负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，cache-control有更多的选项和处理方式。

4 启用Gzip压缩：就是先把文件放在服务器压缩然后再传输，下载到本地之后浏览器再解压缩。

5 将css放在页面最上面，避免页面出现空白或闪烁问题。

6 将script放在页面最下面，可以先将页面呈现出来，不会让用户等太久。（这个内容其实水挺深的，涉及到DOM加载顺序。

7 避免在css中使用 Expressinos。

8 把js和css文件放到外部文件中。写在页面内的情况：只应用于一个页面，不经常被访问到，脚本和样式很少。

9 减少DNS查询

10 压缩js和css，代码格式化、简写变量或方法名。

11 避免重定向，因为会增加服务器请求返回次数。

12 移除重复的脚本。

13 配置实体标签(ETag)，减轻服务器负担。ETag：Entity Tag实体标签，属于Http协议，受web服务支持。使用特殊的字符串来标识某个请求资源版本。

14 使用AJAX缓存。

＊YSlow插件，评估网站性能，并进行针对性优化。

坚持原创技术分享，您的支持将鼓励我继续创作！