jquery

Posted on Edited on

[TOC]

$符号的释放

e.g. var nj=jQuery.noConflict();
用nj代替$

$(function(){
…
})

nj(function(){
…
})

$(); jQ核心函数

1.接受函数 $(function(){});
作为入口函数

2.接受一个字符串代码片段 $(“.box1”);
返回一个jQ对象，对象中保存了找到的DOM元素

3.接受一个字符串代码 $(“

我是段落

“);
返回一个jQ对象，对象中保存了创建的DOM元素

4.接受DOM元素 $(“div”);
会被包装成一个jQuery对象返回

each方法 可以遍历伪数组

$.each(arr, function(index,value){
console.log(index,value);
})

注意：和Js的参数位置刚好相反 索引在前，值再后

map方法

$.map(obj, function(value,index){
conlose.log(index,value);
return value+index;
})

两者区别：

each静态方法默认的返回值：当前遍历的数组
map静态方法默认的返回值是一个空的数组
each数组不支持在回调函数中对遍历的数组进行处理
map可以在回调函数中通过对return对遍历的数组进行处理，输出我们想要的值，然后生成一个数组返回出来

trim方法

var res = $.trim(str); 可以删除字符串两端的空格
不会改变原字符串 需要接受新产生的字符串

isWindow方法

作用：判断传入的对象是否是window
参数：需要判断的对象
返回值：true/false

var res = $.isWindow();

isArray方法

作用：判断传入对象是否是真数组 伪数组是false
参数：需要判断的对象
返回值：true/false

var res = $.isArray();

isFunction

同上
！！ var res = $.isFunction(jQuery); => true
所以jq框架本质是一个函数

holdReady

{所有dom元素执行完之后会执行ready函数}
$.holdReady(true);
作用：暂停ready事件(入口函数)执行

$.holdReady(false);
作用：恢复ready事件

内容选择器

:empty

var $div = $(“div:empty”);//找出没有子元素也没有文本内容的div;
console.log($div);

:parent

var $div = $(“div:parent);//找到有元素或者有子元素的div

:contains(text)

var $div = $(“div:contains(‘我是div’)”);
首先找到所有的div 查看哪个div中含有‘我是div’的文本。是包含不是等于噢！

:has(selector)

var $div = $(“div:has(‘span’)”);
首先找到所有的div 找到包含指定子元素的div。是包含不是等于噢！

操作属性节点

1.attr()
作用：获取或者设置属性节点的值，新增属性节点
传递一个参数：获取该指定节点的值 => ！！注意，无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
传递两个参数：设置该属性节点的值 => ！！找到多少个元素就会设置多少个元素
$(“span”).attr(“class”,”box”)
//如果传入的属性节点不存在则自动创建新的属性节点并赋值

获取返回值：该属性节点的内容，没有内容是undefin ed

2.removeAttr();
作用：删除属性节点
找到多少个元素就会删除多少个元素的指定属性节点
删除多个属性节点：（用空格隔开即可）
$(“span”).removeAttr
(“class name abc”);
同时删除class、name、abc三个属性节点

操作属性

1.prop
$(“span”).eq(0).prop(“demo”,”666”)
给找到的第一个span添加上demo属性

获取的时候和attr()一样一个参数而且只能返回第一个
!! prop不仅能操作属性也能操作属性节点
$(“span”).prop(“class”) =>也可以实现效果

获取返回值：true/false

2.removeProp

Css操作

1.addClass()
$(“div”).addClass(“class1 class2”);//可以同时添加两个类名

2.removeClass()
$(“div”).removeClass(“class1 class2”)//同时删除多个类名

3.toggleClass()
切换类名 有就删除 没有就添加
$(“div”).toggleClass(“class1 class2”)
我感觉这个可以做点一下有点两下没有循环这样子的东西

HTML操作

1.html()
$(“div”).html(“

我是段落我是span

“);//可以创建html节点
设置html 和innerHTML作用一样

2.console.log($(“div”).html());
获取html的值

3.text()
$(“div”).text(“

我是段落我是span

“)//只传入文本无法设置HTML节点

4.console.log($(“div”).text());
获取HTML的值

5.val()
$(“input”).val(“请输入内容”)
设置输入框内的值

6.console.log($(“input”).val());
获取输入框里面的内容

操作样式

1.逐个设置
$(“div”).css(“width”,”100px”);
$(“div”).css(“height”,”100px”);
$(“div”).css(“background”,”red”);

2.链式设置（不建议太长 阅读性差
$(“div”).css(“width”,”100px”).css(“height”,”100px”).css(“background”,”red”);

3.批量设置
$(“div”).css({
width:”100px”;
height:”100px”;
});

获取CSS样式值

$(“div”).css(“width”);

尺寸操作

1.获取元素宽度
$(“.father”).width();

2.设置元素宽度
$(“.father”).width(“500px”);

3.innerheight和outerheight的区别
innerheight = height +padding;
outerheight = height +padding + border +一定情况下的margin;

位置操作

1.offset()
作用：获取和设置元素距离窗口的偏移位
$(“.son”).offset().left() =>获取
$(“.son”).offset(
{
left:10
}
) =>设置

2.position()
作用：获取元素距离定位元素的偏移位 ！！不能设置噢~ 想设置距离的话直接在JQ里面写CSS就可以了
$(“.son”).position().left() =>获取

滚动条

1.scrollTop()
$(“.box”).scrollTop() =>获取元素滚动条现在滚动的距离
$(“html”).scrollTop()+$(“body”).sbodycrollTop() =>获取网页滚动的距离 实现浏览器之间的兼容
$(“.box”).scrollTop(300) =>设置滚动条滚动的距离
$(“html,body”).scrollTop(300) =>设置网页的滚动距离 实现浏览器之间的兼容

1
2
3
4
5
6
7
8
9
//监听滚动条

$(window).scroll(function(){
    var offset = $("html,body").scrollTop();
    //获取网页滚动的偏移位
    if(offset >= 500){
        //判断网页是否滚动到了相应的位置并执行对应的操作
    }
})

事件绑定

  1. ```
    eventName(fn)
    $(“button”).click(function(){

    }) 

    1
    2
    3
    4
    5
    6
    7
    8

       ！！部分JS事件不能实现（JQ有 JS没有的那种），可以绑定多个事件不会覆盖

    2. ```
       on(enentName,fn)
       $("button").on("click",function(){
       
       })

    ！！所有JS事件（不管JQ里面有没有，只要JS里面有就可以）都可以实现，可以绑定多个事件不会覆盖

    one：执行一次

    事件解绑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
    function test1(){
        alert('aaaa');
    }
    function test2(){
        alert('bbbb');
    }
$("button").on("click",test1);
$("button").on("click",test2);

$("button").off();	//不传参： 将button上面所有的事件全部解绑

$("button").off("click");	//传一个参数：把所有click事件移除

$("button").off("click"，text1);	//传两个参数： 把指定事件移除
})

事件冒泡和默认行为

解除事件冒泡和默认行为分别有两种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(".son".click(function(){
    slert('son');
    return false;	//	阻止事件冒泡
}))


$(".son".click(function(event){ 
    slert('son');
    event.stopPropagation();	//	阻止事件冒泡
}))

//记得都是写在儿子里面的

默认事件：比如点击提交数据就会提交到远程服务器，点击链接就会跳转

$("a".click(function(){
    slert('不跳转');
    return false;	//	阻止默认行为
}))

$("a".click(function(event){
    slert('不跳转');
    event.preventDefault();	//	阻止默认行为
}))

事件自动触发

1
2
3
4
5
6
7
$(".son".trigger("click");	//	自动触发son上面的click事件，冒泡事件仍然存在，也会触发默认行为
  
$(".son".triggerHandler("click");	//	自动触发son上面的click事件，冒泡事件会被阻止，不会触发默认行为

$("input[type = 'submit']").click(function(){
    alert("submit"); 	//	监听类型为submit的input的点击事件
})

jQuery自定义事件

1
2
3
4
5
6
7
8

$(".son").on("myClick",function(){
	alert("son");
})
//自定义事件第一步：用on绑定事件，只能用on这个绑定的方法！

$(".son").trigger("myClick");
//自定义事件第二步：用trigger进行自动触发

jQuery事件命名空间

1
2
3
4
5
6
7
8
9
10
11
$(".son").on("click.zs",function(){
	alert("click1");
});

$(".son").on("click.ls",function(){
	alert("click2");
});

// .zs和.l就是命名空间，可以区别同个相同名字的事件

$(".son").trigger("click.zs");

事件委托

1
2
3
4
5
6
7
8
9
10
11
12
$("button").on("click",function(){
	$("ul").append("<li>我是一个新增的li<li>")
});


$("ul").delegate("li","click",function(){
	alert(this);	// li
});

//将li的点击事件委托给ul，这样即使在新增li也有点击事件了，不委托的话，原来的绑定事件绑定不到新增的li噢

//找一些在入口函数之前就有的元素来监听我们动态增加的元素的事件

jQuery移入 移出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(".father").mouseover(function(){
    console.log("移入")；
})

$(".father").mouseout(function(){
    console.log("移出")；
})

//注意：子元素的移入移出也会触发父元素的mouseover,mouseout事件

$(".father").mouseenter(function(){
    console.log("移入")；
})

$(".father").mouseleave(function(){
    console.log("移出")；
})

//使用mouseleave,mouseenter，子元素移入移出不会触发父元素的事件，推荐使用！

$(".father").hover(function(){
    console.log("移入")；
},function(){
    console.log("移出")；
})	
//第一个参数：移入触发的事件，第二个参数：移除触发的事件，将mouseleave,mouseenter合成！

//如果只接受一个参数，则同时监听移入和移出事件

index， eq，siblings

$(this).index()获取到该元素在兄弟中的排位

$(".content").eq(0)获取第0个元素

$(this).siblings获取到除了当前元素（this）外的其他所有兄弟元素

显示和隐藏动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//显示动画
$("button").mouseover(function(){
   $("div").show(1000,function(){
       //第二个参数：动画执行完毕之后执行的函数
   })
})

//隐藏动画
$("button").mouseleave(function(){
   $("div").hide(1000,function(){
       //第二个参数：动画执行完毕之后执行的函数
   })
})

//切换动画 显示变隐藏 隐藏变显示
$("button").mouseleave(function(){
   $("div").toggle(1000,function(){
       //第二个参数：动画执行完毕之后执行的函数
   });
})

展开和收起动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//展开动画(由上往下滑下来展开)
$("button").mouseover(function(){
   $("div").slideDown(1000,function(){
       //第二个参数：动画执行完毕之后执行的函数
   })
})

//隐藏动画(由下往上滑下来隐藏)
$("button").mouseleave(function(){
   $("div").slideUp(1000,function(){
       //第二个参数：动画执行完毕之后执行的函数
   })
})

//切换动画 显示变隐藏 隐藏变显示
$("button").mouseleave(function(){
   $("div").slideToggle(1000,function(){
       //第二个参数：动画执行完毕之后执行的函数
   });
})

$(this).children(".sub")；//找到this里面的sub子元素

CSS: text-indent:2em前面空出两个字的宽度

:nth-child(n)第n个数字

:nth-child(2n) 偶数标签

:nth-child(2n-1)奇数标签

:nth-child(-n+6) 负向范围，从第一个到第六个

:nth-child(n+6)正向选择，从第六个到结束

:nth-child(-n+9) :nth-child(n+6)第6到9个，取两者交集

$(this).children(".sub")找到this里面的sub子元素

淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("div").fadeIn(1000,function(){
    //淡入完毕
})

$("div").fadeIn(1000,function(){
    //淡出完毕
})

$("div").fadeToggle(1000,function(){
    //淡入淡出切换
})

$("div").fadeTo(1000,0.5,function(){
    //指定淡入程度 第二个参数：透明度
})

$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);	//	前一个动画执行完才会执行下一个动画，比嵌套式写法可读性高很多
//加上stop()可以规避掉一些隐藏bug

自定义动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$("button").click(function(){
    $(".one").animate({
        marginLeft:500
    }，1000，"linear",function(){
        //执行完毕
    })
})

$("button").click(function(){
    $(".two").animate({
        marginLeft:500
    }，1000,function(){
        //执行完毕
    })
})

//第一个参数：想要修改的属性 可以同时修改多个属性，用逗号隔开即可 （多个属性的动画是同时进行的）
//第二个参数：时长
//第三个参数：指定动画节奏 linear swing(默认)缓冲运动(大多数参数都有这个属性 )
//第三or四个参数：动画结束之后执行的回调函数

//可以接受三个或者四个参数

//累加动画
$("button").click(function(){
    $(".one").animate({
        width:"+=100"	//每次点击都会进行累加
    }，1000,function(){
        //执行完毕
    })
})

//关键字动画
$("button").click(function(){
    $(".three").animate({
        width:"hide"	//会进行隐藏动画
        height:"toggle"	//切换
    }，1000,function(){
        //执行完毕
    })
})

stop() delay()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$("button").click(function(){
    $(".one").animate({
        width:500
    }，1000).delay(2000).animate({height:500
},1000)
 //delay 隔某个时间段之后再进行下一个动画
    
$("button").eq(1).click(function(){
    $("div").stop();
})
    //立即停止div当前执行的动画，然后继续进行后续动画 
    
$("button").eq(1).click(function(){
    $("div").stop(true);
})
 //立即停止div当前执行的动画和后续动画 
    
    
$("button").eq(1).click(function(){
    $("div").stop(false,true);
})
//立即完成当前动画继续后续动画    

    //第一个参数：是否继续后续所有动画（false或者没有则继续执行后续，true则停止执行后续动画）
    //第二个参数：是否马上完成完现在的动画（没有参数或者false代表立即停止当前动画，true代表立即完成当前动画）

添加节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("button").click(function(){
    //创建一个新的节点（直接写HTML代码即可）
    var $li = $("<li>新增的li<li>");
    
    //四个内部方法：
    
    $("ul").append($li);
    //将节点新增到原有节点的最后
    $("ul").prepend($li);
    //将节点新增到原有节点的最前
    $li.appendTo("ul");
    $li.prependTo("ul");
    //与前两个方法一样
     
    //外部方法：
    
    $("ul").after($li);
    //会把新增元素插入到ul的外部的后面，即紧跟ul后面
    $("ul").before($li);
    //会把新增元素插入到ul的外部的前面，即在ul前头
    $li.insertAfter("ul");
    $li.insertBefore("ul");
    //与前两个方法一样
})

删除节点

1
2
3
4
$("button").click(function(){
   $("div").remove();//删除指定元素
   $("div").empty();//删除指定元素的内容和子元素，但是指定元素自身并不会被删除，就是剩下一堆空标签
})

替换节点

1
2
3
4
5
6
7
var $h6 = $("<h6>我是标题666</h6>")

$("h1").replaceWith($h6);
//将h1替换成h6

$h6.replaceAll("h1");
//将h1替换成h6

复制节点

1
2
3
4
5
var $li = $("li:first").clone(false);
//浅复制第一个li，仅复制元素，不会复制元素事件

var $li = $("li:first").clone(true);
//深复制第一个li，复制元素和复制元素事件

子节点

children找到第一代儿子

find可以找到所有后代孙子重孙都阔以

滚动条样式

使用插件mCustomScrollbar

注意点：先插入别人的CSS和JS文件，之后再 导入我们自身的文件，便于我们操作别人的文件

jquery原理

  1. 本质是一个闭包：立即执行的函数
  2. jQuery如何让外界访问内部定义的局部变量：window.num = num;将局部变量加到全局身上
  3. 为什么jQuery要给增加传一个window实参 ：方便后期压缩代码，提高查找的效率

原型上的属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$().jquery //获取jQ版本号
$().selector //实例默认的选择器取值，默认为空
$().length//默认长度，默认为0
$().push//给实例添加新数组
$().toArray() //把实例，伪数组转换为数组返回
$().get() //把实例，伪数组转换为数组返回

//get方法不传参数效果和toArray一样

arr.get(1);//正数第一个元素
arr.get(-1);//倒数第一个元素



//将伪数组转换成真数组
var arr = [].slice.call(obj);
//如果slice方法中什么参数都没有传递，则会将数组中的元素放到一个新的数组中原样返回