作者： admin

单引号，双引号，加号组合使用例子：

多个库的冲突解决方法
jquery库放在第三方库的后面使用时
jQuery.noConflict(); //主动放弃使用$权利
var $$ = jQuery //放弃$就要另外自定义一个变量代替$

《jQuery多版本共存》

 

get(0) 等于 [0]
层次选择器
后代选择器：
ul li a
.find(‘p’) 后代选择器寻找工具，find()另一种写法，

例如 $(‘.ui-selecter’,this)  等同 jQuery(this).find(“.ui-selecter”);
子选择器：
> 寻找儿子 （兼容IE6）
children() 同样也是寻找儿子

 

必须同级而且是“邻近”的后“一个”元素 （注意：如果中间隔了其他元素则不会再去寻找）
+
next()

 

寻找且直至找到同级的后面元素即使中间隔了其他元素也会跳过找到为止。
~
nextAll()
注意：如果find() children() next() nextAll() 这些选择器不加参数就相当于加了*
next() 反义 prev()
nextAll() 反义 prevAll()

siblings() 寻找上，下同级的所有元素

nextUntil(‘p’) 寻找同级的所有元素直到遇到同级的p就停止寻找

 

$(‘#box p’) 等同于 $(‘p’,’#box’)

 

 

$(document)

//获取document的宽高度分两种情况，页面里的内容如果大于浏览器可视区域也就是出现了滚动条时，那么document的宽高永远跟随着内容的宽高；

//如果页面里的内容很少，小于浏览器的可视区域那么document的宽高就是浏览器的窗口的宽高

$(window)  // $(window)的宽高 会随着窗口改变而改变

 

 

过滤选择器（其实就是CSS3 伪类选择器）

:first 第一个被选中
:last
:not(.class) 除了括号里面的 其他都被选中
:even 偶数（索引是0开始）
:odd 奇数
:eq() 索引是0开始 （括号也支持写负数，-1,-2..开始）
:gt() 比括号里面的数大的 就被选中
:lt() 比括号里面的数小的 就被选中
:focus() 获取焦点（就是光标停留的地方）

以上的过滤器都可以用这样方式写
$(‘li’).first()
除了even和odd没有
内容过滤器 是对子元素和文本的操作
:contains(text) 根据文本的关键词选中文本所在的父元素
:has(.class) 选中含有儿子是.class的 父亲 (这里选中的对象是父亲不是儿子，儿子只是寻找父亲的条件)

$(‘div’).has(‘.me’)效果同上
:parent 只要有子元素的 元素就会被选中

.parent() 选择当前元素的父亲
.parents() 不传参数就选择当前元素的父亲,爷爷，祖父以上的全部辈分，传参就找到此参数就停止找

 

$(‘li’).closest(‘ul’)  //跟parents()类似，parents()是从此元素的父元素往上寻找，但closest()是从本身开始寻找，不传参数没效果，传参数就找到此参数的DOM就停止寻找。

 

$(‘li’).offsetParent() //从此元素的父亲开始往上寻找有position:relative;的祖父元素，没此样式默认找到body。
.parentsUntil() 遇到某一个长辈就会停止选中
可见性过滤器
:hidden 选中隐藏元素
:visible 选中显示的元素

$(“img”).error(function(){}); //无法正常加载触发事件，不兼容IE。在1.8.0以后的版本不推荐了使用

推荐使用.on( “error”, handler )

子元素过滤器

li:first-child 先获取每一拥有li的父亲，再获取父亲的第一个li
li:only-child 获取到只有一个子元素的父亲
li:nth-child(even) 先获取每一拥有li的父亲，再获取偶数的li子元素 （索引从1开始）

判断选择器

is() 用于判断
.is(‘li’) 可放选择器
.is($(‘li’)) 可放jquery对象
.is($(‘li’).get(0)) 可放DOM对象
$(‘input[type=checkbox]’).is(‘:checked’) 判断是否打勾
$(‘input[type=checkbox]’).is(‘:visible’) 判断是否显示隐藏
hasClass(‘.red’)只能判断class,其实内部调用了is(‘.red’)去实现这个功能，使用hasClass()是为了语意化。

$('div').is(function (i,dom) {  //遍历所有的div
     console.log(i)  //索引
     console.log(dom)  //当前dom
})

slice(索引0开始,索引1开始)  //第一个参数0表示从最前面开始，第二个参数表示数量

$(‘p’).slice(0,3) //从最前面开始起，选择3个p元素

slice(单个数字索引从0开始)  //如果只写一个数字，第二个参数默认是最后

slice(-1) //表示选中最后一个

 https://sdeno.com/jq/slice.html

 

end() 选中上一个元素或状态 （可能是找父亲，或者上一个相邻元素）

参考：《jquery中end()用法》

 

andSelf()  //作用当前元素的同事也作用于上一个元素。（已过时被.addBack()取代）
contents() 选中子元素（包括文本）

filter(‘.red,:first,:last,#ni,…,’) 扩展性好
val([‘男’,’女’]) //默认可以获取焦点

 

<input type=”checkbox” /> 设置值 判断值

判断值：判断使用$(‘#id’).is(‘:checked’)  来判断是否被选中

设置值：$(‘#id’).prop(‘checked’,true)  选中      $(‘#id’).prop(‘checked’,false) 取消

prop和attr区别在于  prop主要设置布尔值

 

attr({‘title’:’你好’,’class’:’red’,…,})多个属性操作 支持function
$.each() 获取对象数组  $.each(box,function(attr,value){})

attr：获取元素属性

value：获取元素值

index：获取元素索引

$().index()  //用法

 

 

element：获取元素原生态对象

parseInt(value) 转为纯数字（后面没有单位）
width() 获取原始宽度
innerWidth() 获取原始宽+内边距宽
outerWidth() 获取原始宽+内边距宽+边框
偏移方法
offset() 相对于document
position() 相对于父元素，并且父亲要有属性position: relative
scrollTop() 获取垂直滚动条的值

 

元素偏移方法
动态创建html
append() 移动页面中已存在的元素到内部后面$(“p”).append($(‘div’));
appendTo() 指定内容移动到 内部后面不需要创建 $(“<b>Hello World!</b>”).appendTo(“p”);
prepend()
prependTo() 与上面相反

 

after() 外部后面插入
before() 外部前面插入
insertAfter() 指定元素移动到 外部后面
insertBefore() 指定元素移动到 外部前面
wrap() 指定每一个元素外包裹一层html
unwrap() 删除指定元素外的一层html
wrapAll() 所有的全素被包裹在一层html
wrapInner() 指定每一个元素内包裹一层html

clone(true) 如果在clone()里面加入true来克隆一个有触发事件的元素那么克隆的这个元素的同时也把事件也克隆了，默认是false
remove(‘.box’)删除一个class是box的元素，如果删除后在添加若是有触发事件是不会保留，反之如果删除后保留事件用
detach()删除
empty()清空元素的所有后代，保留自己
replaceWith(‘<div>你好</div>’) 替换连标签也会替换，触发事件也会消失。（类似剪切功能，而不是复制原来的去替换匹配的元素）

 

表单选择器
$(‘:input[type=][name=]’)
$(‘:input’) 选取所有html的input textarea button select元素
表单过滤器
:enable 选择可用的元素  $(‘form :enabled’)目前可用元素
:disable 选择不可用元素
:checked 选择 已经被选中的元素
:selected选中的下拉列表

 

 

 

 jQuery 中bind(),live(),delegate(),on() 区别

触发事件
bind()  // 绑定事件，要等页面加载完才能执行。

.on() //可以绑定一个或多个事件，跟bind()功能类似但是比bind好的是不必要等页面加载完也能执行 on()
click() 鼠标左键单机时候触发事件
dblclick() 双击时候
mousedown() 鼠标在元素上点击触发事件
mouseup() 鼠标左键点击松开后触发事件
resize() 窗口大小改变触发事件
scroll() 鼠标滚动就触发事件
select() 文本选中后松开鼠标的时候
change() 文本改变时候触发
submit() 表单提交作用与form

 

one()  //同样也是绑定事件，但是只会执行一次

重点：
mouseover() 鼠标经过指定元素触发事件
mouseout() 鼠标离开指定元素触发事件

以上事件指定的元素的子节点也会被触发事件

mouseenter() 只针对鼠标经过指定元素触发事件 （专一元素）
mouseleave() 只针对鼠标离开指定元素触发事件

以上事件指定的元素的子节点不会被触发事件
focus 光标所在的地方就激活事件 只对input有效
blur 光标丢失的地方就激活事件 只对input有效
复合事件
hover() 是mouseenter()和mouseleave()结合体

event对象属性

type 获取这个事件的事件类型字符串 alert(e.type)

target 获取触发元素的DOM，点哪里就获取哪里的DOM不考虑谁重叠谁 (e.target)
currentTarget 获取监听元素的DOM，绑定谁就获取谁的DOM $(‘.move’).click ..得到的是.move的DOM（专一）
alert(e.currentTarget)=alert(this)

relatedTarget 一般配合mouseover和mouseout使用。先绑定一个元素为中心，从其他元素mouseover到中心元素时，就会获取这个其他元素的DOM
从中心元素mouseout到其他元素时，就会获取到这个其他元素的DOM。

 在线演示
data 获取事件调用时的额外数据，就是在正常调用一个事件的同时可以给事件添加一些额外数据并获取
额外数据可以是数字，字符串，数组，对象。获取方法：alert(e.data)
数字：click(123,function(){})

字符串：click(‘abc’,function(){})
数组：click([1,2,3,’a’],function(){}) 如何获取数组中的a, alert(e.data[3])
对象：click({user:’你好’,age:100},function(){})如何获取对象中的age, alert(e.data.age)

pageX pageY 原点：就是页面最左上角。原点位置不会随着滚动条变，原点永远在可视页面滚动条顶部的最左上，值会跟滚动条变。
screenX screenY 原点：就在物理电脑屏幕的最左上，值不会跟滚动条变。
clientX clientY 原点：就在可视页面的最左上，原点固定悬浮在可视页面的最左上，值会跟滚动条变。

result 获取上一个事件的返回值
which 判断鼠标左中右键，或者键盘按键。

 

为元素设置临时数据
方式一：//设置单个数据
$(“div”).data(“greeting”, “Hello World”); //为greeting设置值
$(“div”).data(“greeting”) //取值
方式二：//设置多个
$(‘#container’).data(‘data1’,{num:123,num2:456})
$(‘#container’).data(‘data1’).num;
方式三：//事件附加 临时数据
$(‘div’).click({ni:’你’,ta:’他’},function(e){
alert(e.data.ni) //你
});
方式四：
$.data($(‘div’)[0], ‘name’,’jack’); //设置单个值
$.data($(‘div’)[0],{wo:123,ni:456}); //设置多个值
$.data($(‘div’)[0],’ni’) // 取值

$(“div”).removeData(“greeting”);  //移除临时数据

判断某元素是否附加临时数据
$.hasData($(‘#xx’)[0]) //布尔值

data参考

还可以获取自定义的属性值data-*，用data()获取值之后，无论怎么修改data-*中的属性值之前用data()获取到的值不会改变。

 <div data-role = "page" data-last-value = "43" data-hidden = "true" data-options = '{"name":"John"}' > </div>

$ ( "div" ) . data ( "role" ) === "page" ;
$ ( "div" ) . data ( "lastValue" ) === 43 ;
$ ( "div" ) . data ( "hidden" ) === true ;
$ ( "div" ) . data ( "options" ) . name === "John" ;

参考

 

$.callbacks()函数回调管理

$.ajax参考1

$ajax参考2

冒泡行为
层与层包裹着如果有相同的事件会冒泡，所以要阻止。
添加一个对象e.stopPropagation() //放在代码最前面

e.isPropagationStopped()  //判断是否阻止冒泡

 

阻止冒泡还有另一个方法e.stopImmediatePropagation();

(适用场景类似于ajax为追加的dom绑定事件，防止重复绑定事件造成多次执行就可以使用暴力阻止冒泡方法)

$('a').click(function (e) {
 e.stopPropagation(); //普通的阻止冒泡会弹出a1和a2，下面的不会弹
 alert('a1');
 });
 
 $('a').click(function (e) {
 alert('a2');  //这里代码会执行
 });
 
 $('div').click(function (e) {
 alert('div');
 });
 
 $(document).click(function () {
 alert('document');
 });


//暴力阻止冒泡
$('a').click(function (e) {
 e.stopImmediatePropagation();  //不仅阻止了冒泡，连后续的同dom绑定的同事件也阻止了，a2不能弹窗
 alert('a1');
});
 
 $('a').click(function (e) {
 alert('a2');  //这里代码不会执行
 });
 
 $('div').click(function (e) {
 alert('div');
 });
 
 $(document).click(function () {
 alert('document');
 });

e.isImmediatePropagationStopped() //判断是否开启了暴力阻止冒泡

《html中默认行为有哪些》

阻止默认行为（什么是默认行为？例如点击a链接后会默认跳转到指定页面，还有点击表单提示submit按钮会自动跳转到action的指向地址页面）
e.prevenDefault()  //阻止默认行为，放在代码最前面
禁止表单提交后自动默认跳转
e.prevenDefault() //放在代码最前面

e.isDefaultPrevented()  //判断是否阻止了默认行为

同时阻止冒泡和默认行为return false  //放在代码最后面
取消冒泡
可以在一个个后续元素中加e.stopPropagation()取消冒泡，为了方便可以使用stopImmediatePropagation()取消后续同样的触发事件

 

 

高级事件

模拟操作 就相当于电脑模仿用户去点击一个按钮一样，这个就是简单的模拟操作
.trigger();
只模拟一次
$(‘input’).click(function(e,data1,data2,data3,data4){
alert(data1+data2+data3[1]+data4.user);
}).trigget(‘click’,[‘你好’,’123′,[‘a’,’b’],{user:’你好’}]);

传递数据 数组 对象写法
自定义事件 自己取名字的事件
自定义事件一般配合trigger()事件

triggerHandler()跟trigger()有4个区别

1，triggerHandler()能模拟事件但是阻止了默认行为，而trigger()会。

2，triggerHandler()只能阻止一次默认行为

3，triggerHandler(function(){}) return返回只是值，而trigger()返回的是jquery对象,说明可以使用连缀功能

4，trigger()会冒泡 triggerHandler()不会
命名空间

如果要移除某一个事件时候需要到，例如 $(‘input’).bind(‘click.abc’function(){}) ,这样就能选中这个.abc事件了

//点击#d元素 2个click事件都会执行
$('#d').on('click.a',function(){
  alert('a');
});

$('#d').on('click.b',function(){
  alert('b');
});

$('#d').off('click.a'); //将click.a解绑，只有click.b能触发了,这也就是命名空间的作用，同样也能适用其他事件

动画
show()和hide()其实就是利用了CSS，display:none属性。
使用方法：
show(1000) 1秒时间内显示

.show(‘slow’,function(){显示完毕后执行这里});
列队动画，递归自调用
$(‘.test’).first().show(‘slow’,function testShow(){
$(this).next().show(‘slow’,testShow);
});
循环调用，有点类似死循环，但jQuery不会报错
show()和hide()要实现一个按钮切换，是需要条件判断的，
toggle()就可以实现显示隐藏的相互切换

 

slideUp(‘slow’)向上收缩
slidedown()向下展开
slideToggle()上下切换效果
fadeOut() 渐渐消失
fadeIn() 渐渐显示
fadeToggle()
fadeTo(‘slow’,0.33); 淡出到0.33 //注意如果点了淡出到0.33以后的 淡入的时候也就只能显示到0.33效果

 

animate动画

//代码风格1
$('div').animate({width:'100px'},400,swing,function(){  //成功后回调  });

//风格2
$('div').animate({
    left:'200px'
 },{
    duration:2300, //动画持续时间
    easing:'swing', //动画运动效果
    queue:true, //true时，接在后面的动画同步，false时，接在后面的动画异步
    specialEasing: { //为每个过渡属性设置不同的easing运动效果
      width: "linear",
      height: "easeOutBounce"
    },
    step:function(now,tween){ //监听某一个属性值变化过程
      if( tween.prop=='left' ){
         document.title=tween.now
      }
    },
    progress:function(a,b,c){ //监听动画过程
     // console.log(a); //总体信息
     // console.log(b); //整个动画运动过程的百分比
     // console.log(c); //duration时间的变化过程
    },
    complete:function(){}, //成功后回调
    start:function(a){}, //开始前回调,起到初始化值作用
    done:function(a){}, //跟complete差不多
    fail:function(a){}, //动画停止就会触发
    always:function(a){} //不管成功失败总会回调
 })
.animate({top:'200px'},300); //queue为false时此动画不等上一个动画完成，也会进行；异步动画

支持对象数值过渡，如
$({deg: 0}).animate(
  {deg: 30}, 
  {
    duration: 2000,
    step: function(now,tween){
       // 
    }
});

animate(function(){‘left’:’+=100px’}) 累加，（负号是累减功能）
列队动画：
animate(function(){先执行这里},function(){在执行这里},function(){},…) 按先后顺序执行，不是同时执行
连缀动画：
animate({先执行这里}).animate({在执行这里}) 按先后顺序执行，不是同时执行，这里只是对同一个DIV才会有执行先后顺序的效果。

css()不是动画，如果要进入列队动画就站在其他的脚本后面嵌套，例如；
show(‘slow’,function(){css()放这里})先显示在给css,但是这样会污染让代码杂乱推荐使用

jQuery队列函数同步执行queue()、dequeue()、clearQueue()和.delay()

show(‘slow’).queue(function(next){css()放这里;next();}) 这里的next()是告诉queue()后面还有
继续连缀的其他JQ脚本，
show(‘slow’).queue(function(next){css()放这里;next();}).hide() 这样后面才能连缀其他脚本
还可以写成.queue(function(){css()放这里;$(this).dequeue();}).hide()

.clearQueue() 这个脚本例如在第二个效果上，执行完第二个效果之后就不在执行后面的效果了

例子《jQuery队列函数同步执行queue()、dequeue()、clearQueue()和.delay()》

 

stop()在线案例http://www.w3school.com.cn/tiy/t.asp?f=jquery_stop_params

.stop()  //当前动作停止如果之前有动作过的仍然保留，后续有动作继续执行

.stop(true) //所有动作停止如果之前有动作过的仍然保留，后续也不执行

.stop(true,true) //当前瞬间完成，后续不执行
slideToggle(‘slow’,arguments.callee) 不停的自调用
选中正在动画的元素$(‘:animated’)

animate({‘left’:’200px’},2000,’swing’) 起步慢中间快结尾慢
animate({‘left’:’200px’},2000,’linear’) 匀速

javascript

自调用var set = setInterval(Marquee,_speed);
停止clearInterval(set);

 

类似call，apply

$.proxy(fn,obj)   //改变this作用域。也是主要作用

//或者这么写
$('#example').click(function () {
 setTimeout(function () {
   console.log($(this));
 }.bind(this),1000)
});

 

 

 

 

var wo={
  name:'我名字',
  say:function(){
     return 'hello';
  }
}

alert(  $.proxy(wo,'say')()  ) ;  //调用

 

键盘监听事件《jquery 键盘监听事件keydown、keypress、keyup总结》

 

 

 

工具函数  (Underscore.js把对象、数组操作简易化)
$(”).each(function(){}); //这方法只能用于遍历html里面的索引和值

$.each(arr,function(index,value){}); //可以用语遍历数组
$.each(arr,function(name,value){}); //遍历对象
$.each($.ajax(),function(){});
$.grep //筛选数据 遍历并且过滤数组功能的函数
例如
var arr=[4,2,6,9,11,25,38,59];

var mun= $.grep(arr,function(value,index){
return index<2&& value<4; //返回索引小于2并且值小于4
});
$.map //修改数据

var arr=[4,2,6,9,11,25,38,59];

var mun=$.map(arr,function(value,index){
if(index<2&& value<4){ //同样可以筛选数据同时也能修改数据
return value+1; //将返回来的值通通加上1
}
});
$.inArray() //查找值所在的索引位置,同时也判断某数组是否含有指定的内容，没有则返回-1
$.inArray(9,arr); //得到索引3 ，9就在索引3的位置
$.merge(arr1,arr2) //合并两数组
toArray() //合并DOM 组成数组

$(‘li’).toArray() //组成的数组 是DOM元素 必须用$()包括才能使用jq方法

 

 

var obj={
name:’chen’,
test:function(){
alert(this.name);
}
};

$(‘#box’).click($.proxy(obj,’test’));

each

toArray()用法

toArray()将同兄弟的元素封装为数组，使用方法$(‘li’).toArray()。

toArray()封装的元素都是DOM对象，具体例子如下

 

 

 

$.expando //随机字符串
$.isPlainObject() //判断一个变量是否是对象
$.isEmptyObject() //判断是否空对象

$.sub()  //可创建一个新的jQuery副本(感觉作用不是特别大)

$.holdReady  //暂停ready函数的执行，例如：

$.holdReady(true);  
$(document).ready(function(){  //默认网站的dom加载完成后就立马执行里面的代码，但是这里不会马上执行因为 $.holdReady(true);  
    $('body').css({background:'red'});
});

//$.holdReady 一般运用的场景是，当满足某种条件后才会去重新执行ready里面的函数，如：
$.getScript("click.js", function() {  //当在任何时间里click.js成功后，
  $.holdReady(false)  //ready里面的代码才会去重新执行加载
});

在线案例：https://sdeno.com/wp-content/uploads/2016/05/holdready/2.html

 

 

——————————————————————————

以下属于jquery内部方法(虽然不再API上说明，还是可以使用的)

 

$.parseHTML(); //根据html标签 分割数组
var str = “<div>123</div><span><a>456</a></span><br>”;
var html = $.parseHTML( str); //返回数组 [div, span, br]

 

$.globalEval() // 局部变量 变成全局变量
function test() {
jQuery.globalEval( “var newVar = true;” ) //外部也能访问newVar变量了
}
test();

 

$.camelCase() //将样式转化成JS能接受的骆驼峰写法
jQuery.camelCase( ‘background-color’ ); // “backgroundColor”

 

$.nodeName() //判断dom节点是否一致，返回布尔值
$.nodeName(document.body,’body’) //true
$.now() //返回当前时间距1970年1月1日午夜所经过的毫秒数。

 

$._data();  //获取元素绑定事件的情况

《用jQuery._data()判断元素或者DOM绑定事件的情况》

 

http://www.w3school.com.cn/jquery/dom_element_methods_toarray.asp