4_jquery

Posted 2020-08-14 疏影桐歌

官网：www.jquery.com

兼容：

1.jquery-3.1.0.js ：form.attr("checked","false")无效

2.firefox:console.log($("input:checked").length);

attr("checked",true);失效

jquery-1.11.3.js

jQuery1.x：体积较大，兼容老IE，功能有缺失

jQuery2.x：体积稍小，放弃老IE，功能比较多

jQuery3.x：放弃老IE，功能更加丰富

javascript类库：jQuery,MooTools,Prototype,Dojo

jQuery 2.x开始不再支持IE 6,7,8

jQuery无法使用DOM对象的任何方法，反之

<script type="text/javascript" src="jquery.js"></script> 添加jQuery库

  (1)在head标签内引入

  (2)在body标签的最后引入——推荐在body后引入和自定义的JS代码

 

jQuery特性：几乎所有函数都自带循环功能，可以对选中的元素进行遍历；

几乎所有的函数都返回jQuery对象

 

DOM对象(W3C DOM标准)：每个html标签在浏览器中都对应一个DOM对象。 

jQuery对象（jQuery函数返回的对象）： $()/jQuery()函数的返回值是一个"jQuery对象"——典型的类数组对象，其中封装着所有选定的DOM对象。

DOM对象转换为jQuery对象：

$(DOM对象);  $(this)

jQuery对象转换为DOM对象：

$obj.get(i)  /  $obj[i]; /类数组操作         //i下标 

 

jQuery("选择器")/$("选择器")：

Basic基本选择器：

#id  .class  element  *  s1,s2,s3

Hierarchy层级选择器：

后代 ，子代>，相邻兄弟+，通用兄弟~

Basic Filter基本过滤选择器：

-:first                    第一个元素

-:last                            最后一个元素

-:not(selector)              排除selector                -:not(:last)

-:even                   挑选偶数行，1开始

-:odd                    奇数行

-:eq(i)                   下标=i的元素，下标从0开始

-:gt(i)                   下标>i

-:lt(i)                 <i

Content Filter内容过滤选择器：

-:contains(text)     包含给定文本的元素

-:empty                所有不包含子元素或文本的空元素

-has(selector)        含有选择器所匹配的元素

-:parent                含有子元素或文本的元素

Child Filter子元素过滤选择器：

-:first-child           每个父元素的第一个子元素

-:last-child                       最后一个

-:only-child           父元素中的唯一子元素

-:nth-child(i/even/odd/3n+1)每个父元素下的第i个子元素/偶/奇/表达式如3n+1元素，下标从1开始

Attribute属性选择器：

-[att]                           匹配有att属性的元素

-[att=value]          匹配属性值等于value的元素

-[att!=value]         匹配属性值不等于value的元素

-[att^/$/*=value]   匹配属性以...开始/结尾/包含的元素

-[att1][att2]          复合属性过滤选择器

Visibility Filter可见性过滤选择器：

-:hidden                所有不可见的元素：display:none ;  type="hidden";  opacity:0;  visibility:hideen;

-:visible                所有的可见元素

From表单元素选择器：

-:input                  选取所有<input>、<textarea>、<select>、<button>

-:text                    所有的单行文本框

-:password            密码框

-:radio                  单选

-:checkbox            复选

-:submit               提交按钮

-:image                 图像按钮，<input type="image">

-:reset                   重置按钮

-:button                所有的按钮，type="button"

-:file                            所有的上传域

-:hidden                所有不可见元素,type="hidden"

-:enabled              选取所有可用元素，无disabled属性

-:disabled                     选取所有不可用元素，有disabled属性

-:checked                     选取所有被选中的元素(单选/多选框)，有checked属性

-:selected                     选取所有被选中的元素(下拉列表)，有selected属性,常用option:selected

 

面试题：jQuery中有哪些选择器是css中所没有的？http://api.jquery.com/category/selectors/jquery-selector-extensions/

 

$("selector").action(),$node.action()：

html( [val|fn] )             读取/修改节点的HTML内容，≈innerHTML,返回的是DOM内容

text( [val|fn] )             读取/修改节点的文本内容，≈textContent   

val( [val|fn|arr] )    读取/修改节点的值

属性：

.prop(“checked/selected/disabled”) 添加属性，只有这三个必须用prop

attr("attr","value")               参数1/2，读取/修改节点属性

removeAttr("attr")              删除节点属性

attr("class","")                            获取/设置class

addClass("classname")         追加class

removeClass("classname")/()      删除1个/所有class

toggleClass("classname")     切换class:有则删除，无则添加

hasClass("classname")         是否有某个class

jquery读取元素的扩展属性：

<li data-car-type=lt30”>

$(‘li’).data(‘car-type’);        //读取

$(‘li’).data(‘car-type’，‘lt300’);               //设置    

样式：

css("name")/("name","value")            读取/设置样式，cssname可以-连接/驼峰命名,可对jq类数组一次性设置

css("name","value","name2","value2"...);设置多个样式

css("name","value").css("name2","value2")...; 

css( {name:"value", name:"value"}... )

css(name,function(index, value))              index为元素在对象集合中的索引位置，value是原先的属性值。

$(this).css({

          width: function(index, value) {

            return parseFloat(value) * 1.2;

          },

          height: function(index, value) {

            return parseFloat(value) * 1.2;

          }

        });

查找节点：

parent()                父节点(没有选择器)

find(selector)        满足选择器的所有子元素

children()/(selector)/([s])直接子节点

next()/(selector)    下一个兄弟节点

nextAll()              后面所有的兄弟

prev()/(selector)    上一个兄弟节点

prevAll()               上面所有的兄弟

siblings()/(selector)      上面+下面所有的兄弟

创建节点：

var child=$("<...>...</...>");               允许通过HTML代码字符串直接创建节点

内部插入：可能会移除child的html的标签以及内容

parent.append(child/html标签);        追加到parent子节点最后

child.appendTo((parent)                          child追加到parent中，返回值是所有被追加的内容，

选择先前选中的元素要使用end()方法

prepend(child/html标签)                 追加到子节点最开始

child.prependTo((parent)

外部插入：

after(child/html标签)                      追加到节点后

before(child/html标签)                    追加到节点前

insertAfter(parent)                                 把所有匹配的元素插入到另一个、指定的元素元素集合的后面

insertBefore(parent)

删除元素：

.remove()/(selector)                    移除当前元素

.empty()                             清空当前选定元素的内容

.html( "" );                          清空当前选定元素的内容

替换元素：

oldChild.replaceWith( newChild/"HTML");      返回oldChild，移动目标位置替换oldChild,可能会移除html的标签

newChild.replaceAll( oldChild );              返回newChild，颠倒的replaceWith()方法

克隆元素：

clone()/(false/true)                                   不填/false:复制节点；true:克隆元素以及其身上所有的监听函数

类数组操作：jQuery对象即为类数组对象

length

[i]                  返回封装的第i个DOM对象

eq(i)                     将下标i的DOM对象取出来

get(i)             返回封装的第i个DOM对象

get()                     返回一个DOM对象组成的数组

$(类数组).index(obj)    返回DOM/jQuery对象在类数组的下标

each(fn)         遍历类数组，fn处理DOM对象，this表正在被遍历的那个DOM对象

jq中两个each函数区别：i下标，v为obj/arr对应i下标的值

$.each(arr/obj,fn(i,v))：jq全局函数，遍历指定arr/obj的每个元素，fn为arr/{x1:x,x2:x...}内每个元素执行的回调函数

$(..).each(fn(i))：    jq对象函数，遍历封装的每个DOM对象

 

多库共存：

jQuery.noConflict();     //将$控制权交给其他JS库

(function($) { .... })(jQuery);     //定义匿名函数并设置形参为$，重新获取$的控制权

<==>jQuery(function($){....});//使用jQuery设定页面加载时执行的函数重新获取$的控制权

事件处理：

多个元素 逗号,分隔；绑定多个fn  逗号,分隔

一个元素绑定多个事件 事件名可用空格分开("事件1  事件2",function(){})

$obj.bind("click",fn);           简写$obj.click(fn);

unbind(type,[data|fn]])        bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

one(‘事件名‘, fn)                 绑定一个一次性的事件处理函数。

delegate(‘子元素‘,子元素‘,事件名‘,fn)事件委派，被选元素的子元素添加一/多个事件处理程序，this->子元素

undelegete

live /die                              已废弃

on(‘事件名‘,fn)                  把监听函数直接绑定在事件源上

$(‘parent‘).on(‘事件名‘,‘元素‘, fn) 把多个元素的监听函数委托给父元素

off

trigger(事件类型)               触发某类事件，模拟操作，比如模拟用户点击按钮触发

blur                                    元素失去焦点时触发

change                               只适用文本域（text field），以及 textarea 和 select 元素

click

dbclick

error

focus

keydown

keypress

keyup

load

mousedown

mouseover                          鼠标穿过元素及其任何子元素，都会触发

mouseout

mouseenter                         当鼠标指针穿过元素时触发

mouseleave                         离开mouseenter();+mouseleave();<==>.hover().hover

resize

scroll                                  滚动指定的元素时触发

select                                  textarea /文本类型的 input 元素中的文本被选择时

submit

unload

 $(‘btn‘).bind( ‘click‘, fn )==btn.addEventListener(‘click‘, fn, false)

事件对象e    不能用e.nodeName∵nodeName是DOM的节点属性

e常用属性：

target/srcElement                事件源对象

eventPhase                         事件所处的传播阶段

screenX/screenY                 屏幕左上角

clientX||x，.clientY||y         浏览器显示区的左上角

pageX/pageY                             网页左上角，IE9+，未滚动时，client与page值相等

offsetX/offsetY                   目标元素左上角，IE属性

which/keyCode/charCode： 键盘事件中按下的按键

button：                            鼠标哪个按键被按下了

cancelBubble=true;                    是否取消事件冒泡，IE

returnValue=false；            是否阻止事件默认行为

e.preventDefault();             阻止默认行为

e.stopPropagation();     取消 事件冒泡：子元素->父元素依次触发事件函数

 

页面载入：

$(document).ready(fn)：在DOM加载后就可以调用，HTML + JS，操作网页的元素时,可能关联文件未加载完毕

同一个页面中无限次地使用$(document).ready()事件，则先后顺序依次执行。

①$(document).ready(function(){

//jQuery functions

});

②$().ready( fn );

③$( fn );

底层的实现是:window.addEventListener(‘DOMContentLoaded‘, fn, false)//DOMContentLoaded:DOM内容加载完成触发

$(document).ready()可以先后绑定多个监听函数，而window.onload只能绑定一个监听函数

window.onload=f; 网页所有的元素(包括元素所有关联文件HTML + CSS + JS + 图片 + 视频/音频 + Flash...

)完全加载到浏览器后执行

或<body onload="f()"><body> 元素的onload事件中有注册函数，则不会触发+$(document).ready()事件。

 

前端实现动画的技术有哪些？

(1)CSS3 Transition

(2)CSS3 Keyframes

(3)JS 定时器：  setInterval 或 setTimeout 修改样式；jQuery1&2

(4)requestAnimationFrame —— 效率最高；jQuery3

注：所有的jQuery动画函数都会自动排队

 

动画效果：

jQuery 1.11.3动画函数底层都是定时器动画(seTimeout)

show/hide( [time，[fn]] )                  基本显示/隐藏，通过同时改变元素的width,height.opacity来实现显示/隐藏效果

time：show,normal,fast,毫秒数

fn：动画执行完毕后要执行的函数

slideDown/slideUp/slideToggle( [time，[fn]] ) 滑动式动画，通过改变height来实现显示/隐藏/切换两个效果

fadeIn/fadeOut([time，[fn]])                    淡入淡出式动画，通过改变不透明度opacity来实现显示/隐藏

animate( {css:value,...}，time，fn );              js对象：{"css":"value",...}；time：毫秒数                         

animate(js对象, { duration:time, complete:fn });

默认情况下，animate函数可以对width / height / opacity / left / top等数字型的属性可以执行动画；

非数字型属性不能执行动画，如display / position。此外，颜色类型的属性也不能执行动画

排队效果：.animate().animate();             多个动画先后顺序执行

并发效果：.animate({...多个});        多个动画同时执行

 

jQuery UI：插件库http://plugins.jquery.com

导入css文件：<link rel="stylesheet" href="jquery-ui.min.css" type="text/css">

class="ui-icon ui-icon-xxx"        选择图标

导入jquery UI：<stript src="xxxx.js"></script>             //在jQuery源文件之后导入

①Effect效果：

扩展颜色属性动画：

$(...).animate({"属性":".... ",},time);

属性：

backgroundColor:

borderBottomColor

borderLeftColor

borderRightColor

borderTopColor

Color

outlineColor

effect()

show()/hide()支持更多特效:

$(...).toggle("特效名称",time)：最后元素都->display:none

特效名称：

blind：          变盲，width,height,opacity->0

bounce：              弹跳，上下抖动后消失

clip：            裁剪，上下->中间，height->0

drop：           放下，向左滑动，opacity->0

explode：      爆炸，分割几部分扩散，opacity->0

fade：           褪色，枯萎

fold：            折叠

highlight：    高亮

puff：           张开

pulsate：              脉搏

scale：          缩放

shake             摇动

size：            改变大小，向中心缩小

slide：           滑动，右->左收缩，width->0

②Interactions交互组件：

$(..).draggable()          让一个元素可以在页面中任意拖动

$(..).resizable()                        让一个元素可以由用户改变大小

$("ol").selectable()      让一个列表中的元素可以被选中,选中class为ui-selectee.ui-selected，未选中为.ui-selectee

$("ol").sortable()          让一个列表中的元素可以被排序,可拖动

③Widget部件：页面小部件

Accordion Widget 手风琴组件,把一对标题和内容面板转换成折叠面板

$(".parent").accordion()              //div.parent>(h3/div)*3

选项：animate：是否使用动画改变面板，且如何使用动画改变面板

方法：option()：为accordion设置一个/多个选项

  widget()：返回一个包含accordion的jQuery对象

事件：activate：面板被激活后触发事件

Autocomplete Widget  自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择

$(input).autucomplete({

source:[‘...’ , ’  ’ , ’  ’ , ’  ’ , ’  ’ ]

})                  //<input>

选项：source:定义要使用的数据，必须指定

方法：option():为autocomplete设置1/多个选项

  widget():返回一个包含菜单元素的jQuery对象

事件：open:当打开建议菜单/更新建议菜单时触发

Datepicker Widget       日期拾取器，从弹出框/在线日历选择一个日期

$("input").datepicker();       //<input type="text">

选项：dateFormate:描述/显示日期的格式

  minDate:最小的可选日期，当设置为null时，没有下限

  maxDate:最大的可选日期，当设置为null时，没有上限

  autoSize:如果设置为true,将自动调整输入字段

方法：setDate():为datepicker设置日期

  getDate():返回一个datepicker中当前日期，如果没有日期被选中的话返回null

Dialong Widget            对话框组件，在一个交互覆盖层中打开内容,显示一个对话框

$(div).dialog();             //<div title="对话框标题">

选项：autoOpen:当设置为ture时，dialog会在初始化时自动打开

  buttons:指定那些按钮已改在dialog上显示

  width/height:设置dialog的宽度/高度

方法：open():打开dialog

事件：open:当对话框打开后，触发此事件

Tabs Widget          标签页组件，是一种多面板的但内容区，每个面板与列表中的标题相关

$(.parent).tabs()；              //div.parent> (ul>li*3+div*3)

选项：hide:panel(面板)隐藏时的动画效果

  show:panel(面板)显示时的动画效果

方法：load():加载远程选项卡的面板内容

事件：load：远程选项卡加载后触发该事件

Tooltip Widget      工具提示组件，可自定义的、可主体化,替代元素的工具提示框,

$(document).tooltip()；             //<ANY title="提示文字的内容">

选项：hide:tooltip(工具提示框)关闭/隐藏时的动画效果

  show:tooltip(工具提示框)打开/显示时的动画效果

方法：open():以变成方式打开一个tooltip，这仅供非委派的tooltip调用

事件：open:当tooltip打开，显示时，触发此事件，触发的事件为focusin/mouseover

 

插件：Plugin

日期插件：Datepicker、My97等

layDate日期插件：兼容包括IE6在内的所有主流浏览器,firefox位置不正确,

http://laydate.layui.com；基于原生JS,不基于jQuery。

laydate({...:... ,  ...});

选项：

elem:"#id",           需显示日期的元素选择器

event:"click",        触发事件

format:"YYYY-MM-DD hh:mm:ss",//日期格式

istime:false,          是否开启事件选择

isclear:true,           是否显示清空

istoday:true,         是否显示今天

issure:true,           是否显示query

festival:true,         是否显示节日

min:"1900-01-01 00:00:00"/laydate.now(-365*60),最小日期，laydate.now(-1/0/1)昨天/今天/明天

max:"2099-12-31 23:59:59",最大日期

start:"2016-6-15 23:00:00",开始日期

fixed:false,            是否固定在可视区域

zIndex:99999999,  css z-index

choose:function(dates){      //选择好日期的回调 }

 

表单验证插件：针对表单元素的值进行验证，并给出相应的图形以及文字提示

常用插件：

formValidator

jQuery.validator

easyForm

validate.js

jQuery.validator插件：http:jqueryvalidation.org/;可验证网址、电子邮件，自定义验证方法

validate()

$("form").validate({

        rules:{           //规则

          userPwd:{

            required:true,

            minlength:6,

          },

        },

        messages:{    //提示

          userPwd:{

            required:"密码不能为空",

            minlength:"不能少于6位",

          },              //userPwd:"请输入正确的密码",

        }

      });

选项：

debug:设置是否为调试模式，如果为调试模式表单不会被提交

submitHandler:表单提交时的回调函数，一般用于提交当前表单

rules:设置表单元素的验证规则，格式为key:value

messages:设置表单元素验证不通过时的错误提示信息

errorClass:自定义错误提示信息的样式

ignore:设置哪些表单元素不进行验证

自定义验证方法：jQuery.validator.addMethod("name",method[,message])方法

name:设置验证方法的名称

method:回调函数,function(value,element,param){}

value:元素的值

element:元素本身

param:参数

message:设置验证不通过的错误提示信息

 

瀑布流插件：参差不齐的多栏布局，随着页面滚动条向下滚动，不断加载数据并附加至当前尾部

Masonry插件：布局插件，css的浮动布局，根据网格先垂直排列元素，再水平排列元素

http://masonry.desandro.com/

 $(‘.container‘).masonry({

    itemSelector: ‘.box‘,

    columnWidth: 260,

    gutter: 8,  //槽宽

    transitionDuration: ‘1s‘,  //重设位置动画持续时间

  });

options选项：

itemSelector:        指定使用项目中哪些子元素进行布局

columnWidth:             设置每列的宽度

layout布局：

gutter:                  设置每列直接的宽度

percentPosition:    值为true,使用百分之，而不是像素值

stamp:                  在布局中标记元素,Masonry将在这些标记的元素下进行布局

isFitWidth：         基于容器的父元素大小设置容器的宽度以适应可用的列数

isOriginLeft:         设置布局的水平对齐，默认为true时，从左到右

isOriginTop:         设置布局的垂直对齐，默认为true时，从上到下

设置：

containerStyle:     对容器中的元素使用css样式

transitionDuration:      设置改变位置/外观的过渡时间，默认0.4s

isResizeBound:     是否根据窗口大小调整大小和位置

isInitLayout:         是否初始化布局，为false时，可以在初始化布局前，使用方法/绑定事件

methods方法：

布局：

masonry():布局容器中所有的元素，当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局

layoutItems():布局指定元素

添加/删除元素：

appended():在布局的最后添加并布局新的元素

remove():从Masonty对象中/DOM中删除指定元素

事件：

on:添加一个..事件的监听器

off:删除.............

使用jq的on()/off()绑定Masonry插件的事件：

layoutComplete:布局完成后触发该事件

removeComplete:删除元素完成后触发该事件

 

jQuery全局插件函数：有命名冲突的风险，

一般创建常用的函数$.ajax()

向jq命名空间添加一个函数：

jQuery.xxx=function(){....};

$/jQuery.extend({

xxx1:function(){...},

xxx2:function(){...}

});

调用：$/jQuery.xxx(); 

区别：

jQuery.extend(object)方法：全局函数

$.each(arr,function(index,domEle){})

jQuery.fn.extend(object)方法：对象方法

$().each(function(index,domEle){})

jQuery对象插件函数：把所有全局函数封装到一个对象中

jQuery.fn.xxx1=function(){...};

调用：$(...).xxx1();     //xxx3内有this且指向jQuery对象

对任何插件方法内部，this都引用当前的jQuery对象，因此可以在this上面调用任何内置的jQuery方法/DOM节点

 

实现左侧固定，右侧占剩余全部box1{width..;float:left;} box2{margin-left:..,}

 

 

 

jQuery.param(url/obj)   将url/obj序列化

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

官网：www.jquery.com

兼容：

1.jquery-3.1.0.js ：form.attr("checked","false")无效

2.firefox:console.log($("input:checked").length);

attr("checked",true);失效

jquery-1.11.3.js

jQuery1.x：体积较大，兼容老IE，功能有缺失

jQuery2.x：体积稍小，放弃老IE，功能比较多

jQuery3.x：放弃老IE，功能更加丰富

JavaScript类库：jQuery,MooTools,Prototype,Dojo

jQuery 2.x开始不再支持IE 6,7,8

jQuery无法使用DOM对象的任何方法，反之

<script type="text/javascript" src="jquery.js"></script> 添加jQuery库

  (1)在head标签内引入

  (2)在body标签的最后引入——推荐在body后引入和自定义的JS代码

 

jQuery特性：几乎所有函数都自带循环功能，可以对选中的元素进行遍历；

几乎所有的函数都返回jQuery对象

 

DOM对象(W3C DOM标准)：每个HTML标签在浏览器中都对应一个DOM对象。 

jQuery对象（jQuery函数返回的对象）： $()/jQuery()函数的返回值是一个"jQuery对象"——典型的类数组对象，其中封装着所有选定的DOM对象。

DOM对象转换为jQuery对象：

$(DOM对象);  $(this)

jQuery对象转换为DOM对象：

$obj.get(i)  /  $obj[i]; /类数组操作         //i下标 

 

jQuery("选择器")/$("选择器")：

Basic基本选择器：

#id  .class  element  *  s1,s2,s3

Hierarchy层级选择器：

后代 ，子代>，相邻兄弟+，通用兄弟~

Basic Filter基本过滤选择器：

-:first                    第一个元素

-:last                            最后一个元素

-:not(selector)              排除selector                -:not(:last)

-:even                   挑选偶数行，1开始

-:odd                    奇数行

-:eq(i)                   下标=i的元素，下标从0开始

-:gt(i)                   下标>i

-:lt(i)                 <i

Content Filter内容过滤选择器：

-:contains(text)     包含给定文本的元素

-:empty                所有不包含子元素或文本的空元素

-has(selector)        含有选择器所匹配的元素

-:parent                含有子元素或文本的元素

Child Filter子元素过滤选择器：

-:first-child           每个父元素的第一个子元素

-:last-child                       最后一个

-:only-child           父元素中的唯一子元素

-:nth-child(i/even/odd/3n+1)每个父元素下的第i个子元素/偶/奇/表达式如3n+1元素，下标从1开始

Attribute属性选择器：

-[att]                           匹配有att属性的元素

-[att=value]          匹配属性值等于value的元素

-[att!=value]         匹配属性值不等于value的元素

-[att^/$/*=value]   匹配属性以...开始/结尾/包含的元素

-[att1][att2]          复合属性过滤选择器

Visibility Filter可见性过滤选择器：

-:hidden                所有不可见的元素：display:none ;  type="hidden";  opacity:0;  visibility:hideen;

-:visible                所有的可见元素

From表单元素选择器：

-:input                  选取所有<input>、<textarea>、<select>、<button>

-:text                    所有的单行文本框

-:password            密码框

-:radio                  单选

-:checkbox            复选

-:submit               提交按钮

-:image                 图像按钮，<input type="image">

-:reset                   重置按钮

-:button                所有的按钮，type="button"

-:file                            所有的上传域

-:hidden                所有不可见元素,type="hidden"

-:enabled              选取所有可用元素，无disabled属性

-:disabled                     选取所有不可用元素，有disabled属性

-:checked                     选取所有被选中的元素(单选/多选框)，有checked属性

-:selected                     选取所有被选中的元素(下拉列表)，有selected属性,常用option:selected

 

面试题：jQuery中有哪些选择器是css中所没有的？http://api.jquery.com/category/selectors/jquery-selector-extensions/

 

$("selector").action(),$node.action()：

html( [val|fn] )             读取/修改节点的HTML内容，≈innerHTML,返回的是DOM内容

text( [val|fn] )             读取/修改节点的文本内容，≈textContent   

val( [val|fn|arr] )    读取/修改节点的值

属性：

.prop(“checked/selected/disabled”) 添加属性，只有这三个必须用prop

attr("attr","value")               参数1/2，读取/修改节点属性

removeAttr("attr")              删除节点属性

attr("class","")                            获取/设置class

addClass("classname")         追加class

removeClass("classname")/()      删除1个/所有class

toggleClass("classname")     切换class:有则删除，无则添加

hasClass("classname")         是否有某个class

jquery读取元素的扩展属性：

<li data-car-type=lt30”>

$(‘li’).data(‘car-type’);        //读取

$(‘li’).data(‘car-type’，‘lt300’);               //设置    

样式：

css("name")/("name","value")            读取/设置样式，cssname可以-连接/驼峰命名,可对jq类数组一次性设置

css("name","value","name2","value2"...);设置多个样式

css("name","value").css("name2","value2")...; 

css( {name:"value", name:"value"}... )

css(name,function(index, value))              index为元素在对象集合中的索引位置，value是原先的属性值。

$(this).css({

          width: function(index, value) {

            return parseFloat(value) * 1.2;

          },

          height: function(index, value) {

            return parseFloat(value) * 1.2;

          }

        });

查找节点：

parent()                父节点(没有选择器)

find(selector)        满足选择器的所有子元素

children()/(selector)/([s])直接子节点

next()/(selector)    下一个兄弟节点

nextAll()              后面所有的兄弟

prev()/(selector)    上一个兄弟节点

prevAll()               上面所有的兄弟

siblings()/(selector)      上面+下面所有的兄弟

创建节点：

var child=$("<...>...</...>");               允许通过HTML代码字符串直接创建节点

内部插入：可能会移除child的html的标签以及内容

parent.append(child/html标签);        追加到parent子节点最后

child.appendTo((parent)                          child追加到parent中，返回值是所有被追加的内容，

选择先前选中的元素要使用end()方法

prepend(child/html标签)                 追加到子节点最开始

child.prependTo((parent)

外部插入：

after(child/html标签)                      追加到节点后

before(child/html标签)                    追加到节点前

insertAfter(parent)                                 把所有匹配的元素插入到另一个、指定的元素元素集合的后面

insertBefore(parent)

删除元素：

.remove()/(selector)                    移除当前元素

.empty()                             清空当前选定元素的内容

.html( "" );                          清空当前选定元素的内容

替换元素：

oldChild.replaceWith( newChild/"HTML");      返回oldChild，移动目标位置替换oldChild,可能会移除html的标签

newChild.replaceAll( oldChild );              返回newChild，颠倒的replaceWith()方法

克隆元素：

clone()/(false/true)                                   不填/false:复制节点；true:克隆元素以及其身上所有的监听函数

类数组操作：jQuery对象即为类数组对象

length

[i]                  返回封装的第i个DOM对象

eq(i)                     将下标i的DOM对象取出来

get(i)             返回封装的第i个DOM对象

get()                     返回一个DOM对象组成的数组

$(类数组).index(obj)    返回DOM/jQuery对象在类数组的下标

each(fn)         遍历类数组，fn处理DOM对象，this表正在被遍历的那个DOM对象

jq中两个each函数区别：i下标，v为obj/arr对应i下标的值

$.each(arr/obj,fn(i,v))：jq全局函数，遍历指定arr/obj的每个元素，fn为arr/{x1:x,x2:x...}内每个元素执行的回调函数

$(..).each(fn(i))：    jq对象函数，遍历封装的每个DOM对象

 

多库共存：

jQuery.noConflict();     //将$控制权交给其他JS库

(function($) { .... })(jQuery);     //定义匿名函数并设置形参为$，重新获取$的控制权

<==>jQuery(function($){....});//使用jQuery设定页面加载时执行的函数重新获取$的控制权

事件处理：

多个元素 逗号,分隔；绑定多个fn  逗号,分隔

一个元素绑定多个事件 事件名可用空格分开("事件1  事件2",function(){})

$obj.bind("click",fn);           简写$obj.click(fn);

unbind(type,[data|fn]])        bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

one(‘事件名‘, fn)                 绑定一个一次性的事件处理函数。

delegate(‘子元素‘,子元素‘,事件名‘,fn)事件委派，被选元素的子元素添加一/多个事件处理程序，this->子元素

undelegete

live /die                              已废弃

on(‘事件名‘,fn)                  把监听函数直接绑定在事件源上

$(‘parent‘).on(‘事件名‘,‘元素‘, fn) 把多个元素的监听函数委托给父元素

off

trigger(事件类型)               触发某类事件，模拟操作，比如模拟用户点击按钮触发

blur                                    元素失去焦点时触发

change                               只适用文本域（text field），以及 textarea 和 select 元素

click

dbclick

error

focus

keydown

keypress

keyup

load

mousedown

mouseover                          鼠标穿过元素及其任何子元素，都会触发

mouseout

mouseenter                         当鼠标指针穿过元素时触发

mouseleave                         离开mouseenter();+mouseleave();<==>.hover().hover

resize

scroll                                  滚动指定的元素时触发

select                                  textarea /文本类型的 input 元素中的文本被选择时

submit

unload

 $(‘btn‘).bind( ‘click‘, fn )==btn.addEventListener(‘click‘, fn, false)

事件对象e    不能用e.nodeName∵nodeName是DOM的节点属性

e常用属性：

target/srcElement                事件源对象

eventPhase                         事件所处的传播阶段

screenX/screenY                 屏幕左上角

clientX||x，.clientY||y         浏览器显示区的左上角

pageX/pageY                             网页左上角，IE9+，未滚动时，client与page值相等

offsetX/offsetY                   目标元素左上角，IE属性

which/keyCode/charCode：键盘事件中按下的按键

button：                            鼠标哪个按键被按下了

cancelBubble=true;                    是否取消事件冒泡，IE

returnValue=false；            是否阻止事件默认行为

e.preventDefault();             阻止默认行为

e.stopPropagation();     取消 事件冒泡：子元素->父元素依次触发事件函数

 

页面载入：

$(document).ready(fn)：在DOM加载后就可以调用，HTML + JS，操作网页的元素时,可能关联文件未加载完毕

同一个页面中无限次地使用$(document).ready()事件，则先后顺序依次执行。

①$(document).ready(function(){

//jQuery functions

});

②$().ready( fn );

③$( fn );

底层的实现是:window.addEventListener(‘DOMContentLoaded‘, fn, false)//DOMContentLoaded:DOM内容加载完成触发

$(document).ready()可以先后绑定多个监听函数，而window.onload只能绑定一个监听函数

window.onload=f; 网页所有的元素(包括元素所有关联文件HTML + CSS + JS + 图片 + 视频/音频 + Flash...

)完全加载到浏览器后执行

或<body onload="f()"><body> 元素的onload事件中有注册函数，则不会触发+$(document).ready()事件。

 

前端实现动画的技术有哪些？

(1)CSS3 Transition

(2)CSS3 Keyframes

(3)JS 定时器：  setInterval 或 setTimeout 修改样式；jQuery1&2

(4)requestAnimationFrame —— 效率最高；jQuery3

注：所有的jQuery动画函数都会自动排队

 

动画效果：

jQuery 1.11.3动画函数底层都是定时器动画(seTimeout)

show/hide( [time，[fn]] )                  基本显示/隐藏，通过同时改变元素的width,height.opacity来实现显示/隐藏效果

time：show,normal,fast,毫秒数

fn：动画执行完毕后要执行的函数

slideDown/slideUp/slideToggle( [time，[fn]] ) 滑动式动画，通过改变height来实现显示/隐藏/切换两个效果

fadeIn/fadeOut([time，[fn]])                    淡入淡出式动画，通过改变不透明度opacity来实现显示/隐藏

animate( {css:value,...}，time，fn );              js对象：{"css":"value",...}；time：毫秒数                         

animate(js对象, { duration:time, complete:fn });

默认情况下，animate函数可以对width / height / opacity / left / top等数字型的属性可以执行动画；

非数字型属性不能执行动画，如display / position。此外，颜色类型的属性也不能执行动画

排队效果：.animate().animate();             多个动画先后顺序执行

并发效果：.animate({...多个});        多个动画同时执行

 

jQuery UI：插件库http://plugins.jquery.com

导入css文件：<link rel="stylesheet" href="jquery-ui.min.css" type="text/css">

class="ui-icon ui-icon-xxx"        选择图标

导入jquery UI：<stript src="xxxx.js"></script>             //在jQuery源文件之后导入

①Effect效果：

扩展颜色属性动画：

$(...).animate({"属性":".... ",},time);

属性：

backgroundColor:

borderBottomColor

borderLeftColor

borderRightColor

borderTopColor

Color

outlineColor

effect()

show()/hide()支持更多特效:

$(...).toggle("特效名称",time)：最后元素都->display:none

特效名称：

blind：          变盲，width,height,opacity->0

bounce：              弹跳，上下抖动后消失

clip：            裁剪，上下->中间，height->0

drop：           放下，向左滑动，opacity->0

explode：      爆炸，分割几部分扩散，opacity->0

fade：           褪色，枯萎

fold：            折叠

highlight：    高亮

puff：           张开

pulsate：              脉搏

scale：          缩放

shake             摇动

size：            改变大小，向中心缩小

slide：           滑动，右->左收缩，width->0

②Interactions交互组件：

$(..).draggable()          让一个元素可以在页面中任意拖动

$(..).resizable()                        让一个元素可以由用户改变大小

$("ol").selectable()      让一个列表中的元素可以被选中,选中class为ui-selectee.ui-selected，未选中为.ui-selectee

$("ol").sortable()          让一个列表中的元素可以被排序,可拖动

③Widget部件：页面小部件

Accordion Widget 手风琴组件,把一对标题和内容面板转换成折叠面板

$(".parent").accordion()              //div.parent>(h3/div)*3

选项：animate：是否使用动画改变面板，且如何使用动画改变面板

方法：option()：为accordion设置一个/多个选项

  widget()：返回一个包含accordion的jQuery对象

事件：activate：面板被激活后触发事件

Autocomplete Widget  自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择

$(input).autucomplete({

source:[‘...’ , ’  ’ , ’  ’ , ’  ’ , ’  ’ ]

})                  //<input>

选项：source:定义要使用的数据，必须指定

方法：option():为autocomplete设置1/多个选项

  widget():返回一个包含菜单元素的jQuery对象

事件：open:当打开建议菜单/更新建议菜单时触发

Datepicker Widget       日期拾取器，从弹出框/在线日历选择一个日期

$("input").datepicker();       //<input type="text">

选项：dateFormate:描述/显示日期的格式

  minDate:最小的可选日期，当设置为null时，没有下限

  maxDate:最大的可选日期，当设置为null时，没有上限

  autoSize:如果设置为true,将自动调整输入字段

方法：setDate():为datepicker设置日期

  getDate():返回一个datepicker中当前日期，如果没有日期被选中的话返回null

Dialong Widget            对话框组件，在一个交互覆盖层中打开内容,显示一个对话框

$(div).dialog();             //<div title="对话框标题">

选项：autoOpen:当设置为ture时，dialog会在初始化时自动打开

  buttons:指定那些按钮已改在dialog上显示

  width/height:设置dialog的宽度/高度

方法：open():打开dialog

事件：open:当对话框打开后，触发此事件

Tabs Widget          标签页组件，是一种多面板的但内容区，每个面板与列表中的标题相关

$(.parent).tabs()；              //div.parent> (ul>li*3+div*3)

选项：hide:panel(面板)隐藏时的动画效果

  show:panel(面板)显示时的动画效果

方法：load():加载远程选项卡的面板内容

事件：load：远程选项卡加载后触发该事件

Tooltip Widget      工具提示组件，可自定义的、可主体化,替代元素的工具提示框,

$(document).tooltip()；             //<ANY title="提示文字的内容">

选项：hide:tooltip(工具提示框)关闭/隐藏时的动画效果

  show:tooltip(工具提示框)打开/显示时的动画效果

方法：open():以变成方式打开一个tooltip，这仅供非委派的tooltip调用

事件：open:当tooltip打开，显示时，触发此事件，触发的事件为focusin/mouseover

 

插件：Plugin

日期插件：Datepicker、My97等

layDate日期插件：兼容包括IE6在内的所有主流浏览器,firefox位置不正确,

http://laydate.layui.com；基于原生JS,不基于jQuery。

laydate({...:... ,  ...});

选项：

elem:"#id",           需显示日期的元素选择器

event:"click",        触发事件

format:"YYYY-MM-DD hh:mm:ss",//日期格式

istime:false,          是否开启事件选择

isclear:true,           是否显示清空

istoday:true,         是否显示今天

issure:true,           是否显示query

festival:true,         是否显示节日

min:"1900-01-01 00:00:00"/laydate.now(-365*60),最小日期，laydate.now(-1/0/1)昨天/今天/明天

max:"2099-12-31 23:59:59",最大日期

start:"2016-6-15 23:00:00",开始日期

fixed:false,            是否固定在可视区域

zIndex:99999999,  css z-index

choose:function(dates){      //选择好日期的回调 }

 

表单验证插件：针对表单元素的值进行验证，并给出相应的图形以及文字提示

常用插件：

formValidator

jQuery.validator

easyForm

validate.js

jQuery.validator插件：http:jqueryvalidation.org/;可验证网址、电子邮件，自定义验证方法

validate()

$("form").validate({

        rules:{           //规则

          userPwd:{

            required:true,

            minlength:6,

          },

        },

        messages:{    //提示

          userPwd:{

            required:"密码不能为空",

            minlength:"不能少于6位",

          },              //userPwd:"请输入正确的密码",

        }

      });

选项：

debug:设置是否为调试模式，如果为调试模式表单不会被提交

submitHandler:表单提交时的回调函数，一般用于提交当前表单

rules:设置表单元素的验证规则，格式为key:value

messages:设置表单元素验证不通过时的错误提示信息

errorClass:自定义错误提示信息的样式

ignore:设置哪些表单元素不进行验证

自定义验证方法：jQuery.validator.addMethod("name",method[,message])方法

name:设置验证方法的名称

method:回调函数,function(value,element,param){}

value:元素的值

element:元素本身

param:参数

message:设置验证不通过的错误提示信息

 

瀑布流插件：参差不齐的多栏布局，随着页面滚动条向下滚动，不断加载数据并附加至当前尾部

Masonry插件：布局插件，css的浮动布局，根据网格先垂直排列元素，再水平排列元素

http://masonry.desandro.com/

 $(‘.container‘).masonry({

    itemSelector: ‘.box‘,

    columnWidth: 260,

    gutter: 8,  //槽宽

    transitionDuration: ‘1s‘,  //重设位置动画持续时间

  });

options选项：

itemSelector:        指定使用项目中哪些子元素进行布局

columnWidth:             设置每列的宽度

layout布局：

gutter:                  设置每列直接的宽度

percentPosition:    值为true,使用百分之，而不是像素值

stamp:                  在布局中标记元素,Masonry将在这些标记的元素下进行布局

isFitWidth：         基于容器的父元素大小设置容器的宽度以适应可用的列数

isOriginLeft:         设置布局的水平对齐，默认为true时，从左到右

isOriginTop:         设置布局的垂直对齐，默认为true时，从上到下

设置：

containerStyle:     对容器中的元素使用css样式

transitionDuration:      设置改变位置/外观的过渡时间，默认0.4s

isResizeBound:     是否根据窗口大小调整大小和位置

isInitLayout:         是否初始化布局，为false时，可以在初始化布局前，使用方法/绑定事件

methods方法：

布局：

masonry():布局容器中所有的元素，当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局

layoutItems():布局指定元素

添加/删除元素：

appended():在布局的最后添加并布局新的元素

remove():从Masonty对象中/DOM中删除指定元素

事件：

on:添加一个..事件的监听器

off:删除.............

使用jq的on()/off()绑定Masonry插件的事件：

layoutComplete:布局完成后触发该事件

removeComplete:删除元素完成后触发该事件

 

jQuery全局插件函数：有命名冲突的风险，

一般创建常用的函数$.ajax()

向jq命名空间添加一个函数：

jQuery.xxx=function(){....};

$/jQuery.extend({

xxx1:function(){...},

xxx2:function(){...}

});

调用：$/jQuery.xxx(); 

区别：

jQuery.extend(object)方法：全局函数

$.each(arr,function(index,domEle){})

jQuery.fn.extend(object)方法：对象方法

$().each(function(index,domEle){})

jQuery对象插件函数：把所有全局函数封装到一个对象中

jQuery.fn.xxx1=function(){...};

调用：$(...).xxx1();     //xxx3内有this且指向jQuery对象

对任何插件方法内部，this都引用当前的jQuery对象，因此可以在this上面调用任何内置的jQuery方法/DOM节点

 

实现左侧固定，右侧占剩余全部box1{width..;float:left;} box2{margin-left:..,}

 

 

 

jQuery.param(url/obj)   将url/obj序列化