笔记-jQuery

不是原创哦，笔记是照着关注的微信公众号Web前端之巅记下来的，大家去关注吧！她的博客地址是https://blog.csdn.net/lvonve/，非常感谢她！

介绍

jQuery是JavaScript函数库，是一个js文件，封装了很多方法。
jQuery特点:

• 具有独特的链式语法和短小清晰的多功能接口
• 具有高效灵活的css选择器，并且可以对css选择器进行扩展
• 拥有便捷的插件扩展机制和丰富的插件
• 兼容各种主流浏览器

jQuery对象和DOM对象转换

DOM对象转jQuery对象：$(DOM对象)
jQuery对象转DOM对象:jQuery对象[0]
this是DOM的属性，多以要转换成$(this)
jQuery对象.val()表示获取该对象的value属性的值
jQuery对象.val(“值”)表示设置该对象的value属性的值

页面加载事件

DOM中页面加载事件

window.onload = function(ev){
    ...
}

整个页面的所有元素，文本，图片等全部加载完才会执行

jQuery中页面加载事件

方式一：DOM转jQuery方式

$(window).load(function(){
    ...
})

整个页面的所有元素，文本，图片等全部加载完才会执行

方式二：DOM转jQuery方式

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

不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。

方式二：jQuery方式(推荐)

$(function(){
    ...
})

不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。

jQuery获取和操作元素属性

id选择器

$('#id的值')

标签选择器

$('#标签名')
$('#标签名').text("")

text()中有值的话是设置文本的内容，没值是获取文本的内容

类选择器

$('.类名')

并集选择器

$('div,p,span'),中间用逗号隔开

交集选择器

$('div.cls')

后代（层次）选择器

$('div ul span')

子代选择器

$('div>span')

选择div直接下一代所有的span，不能隔代

兄弟选择器

$('div~span')

div的多有的兄弟标签为span的标签

直接兄弟选择器

$('div~span')

div后面的直接兄弟标签

过滤选择器

这类选择器都有冒号

$('li:eq(index)')  //选择给定索引值的元素
$('li:odd')  // 选择索引为奇数的元素
$('li:even')  //选择索引为偶数的元素

筛选选择器

名称	用法	描述
children	$("ul").children("li");	子类选择器）相当于$(“ul>li”)
find	$("ul").find("li");	后代选择器）相当于$(“ul li”)
eq(index)	$("li").eq(2)	相当于 $(“li:eq(2)”);
parent()	$("#first").parent();	查找父亲
next()	$("li").next("li");	查找下一个兄弟节点
prev()	$("li").prev("li");	查找上一个兄弟节点
nextAll()	$("li").nextAll("li");	查找后面所有的兄弟节点
prevAll()	$("li").prevAll("li");	查找上面所有的兄弟节点
siblings(选择器)	$("#first").siblings("li");	查找除自身之外的所有兄弟节点

val,css,text,html区别

val(); // 获取或设置表单标签中的 value 值。
css(); // 设置元素的 css 样式属性值。
text(); // 获取或设置标签的文本内容—-相当于DOM中的innerText
html(); // 获取或设置标签的html内容—-相当于DOM中的innerHTML

使用css操作元素样式

常规写法

$('#div').css('width','200px');
$('#div').css('height','200px');

链式写法

$('#div').css('width','200px').css('height','200px');

键值对写法

$('#div').css({'width':'200px','height':'200px'})

使用类样式操作元素样式

添加样式类

$('#div').addClass('.类名');
$('#div').addClass('.类名1').addClass('.类名2');
$('#div').addClass('.类名1 .类名2');

移除样式类

$('#div').removeClass('.类名');
$('#div').removeClass('.类名1').removeClass('.类名2');
$('#div').removeClass('.类名1 .类名2');

判断是否采用样式类

$('#div').hasClass('.类名1').hasClass('.类名2');
$('#div').hasClass('.类名1 .类名2');

切换样式类

$('#div').toggleClass('.类名1');

判断是否应用类选择器，没有应用就添加，应用了就移除。

动画相关方法

show(参数1,参数2);
hide(参数1,参数2);

参数1：时间，一种写法是毫秒，一种是normal(400ms), slow(600ms), fast(200ms)
参数2：动画执行完之后调用的函数

slideDown(); //显示
slideUp();  //隐藏
slideToggle(); //隐藏和显示切换

fadeIn();  //显示
fadeOut(); //隐藏
fadeToggle(); //隐藏和显示切换
fadeTo(参数1,参数2); //参数1是时间，参数2是需要到达的透明度值

animate({},1000,function(){});

参数1属性键值对，参数2时间，参数3回调函数

操作元素的宽和高

方法一

$('.div').css('width');
$('.div').css('height');

得到是字符串类型

方法二

$('.div').width();
$('.div').height();

得到数字类型

操纵元素的left和top

方法一

$('.div').css('left');
$('.div').css('top');

方法二

$('.div').offset(); //得到对象
$('.div').offset().left; //left和margin-left值之和

操纵元素滚动的值

$('.div').scrollLeft(); //元素向左滚动的距离
$('.div').scrollTop(); //元素向上滚动的距离

$('.div').scroll(function(){}); //元素的滚动事件

为元素绑定事件

方法一：事件名

$(‘.div’).事件名(事件处理函数);

$('.div').click(function(){});

方法二：bind方法

$(‘.div’).bind(“事件名”,事件处理函数);

$('.div').bind("click",function(){});

方法三：bind对象

$(‘.div’).bind({“事件名1”:事件处理函数1,”事件名2”:事件处理函数2});

$('.div').bind({
"click":function(){},
"mouseenter":function(){}
});

方法四：delegate方法

父元素.delegate(“子元素”,”事件名”,事件处理函数);

父元素替子元素绑定事件
事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）

$('.div').delegate("p","click",function());

方法四：on方法

父元素.on(“事件名”,”子元素”,事件处理函数);

父元素替子元素绑定事件
注意和delegate的参数顺序不一样

$('.div').on("click","p",function());

为元素绑定多个相同的事件

方式一

$('#btn').click(function() {
    console.log('click1');
}).click(function(){
    console.log('click2');
}).click(function(){
    console.log("click3");
})

点击后，按顺序都执行

方式二

$('#btn').bind("click",function() {
    console.log('click1');
}).bind("click",function(){
    console.log('click2');
}).bind("click",function(){
    console.log("click3");
})

点击后，按顺序都执行

方式二

$('#btn').bind({"click":function() {
    console.log('click1');
},"click":function(){
    console.log('click2');
},"click":function(){
    console.log("click3");
}})

点击后，只执行最后一个

元素绑定事件的区别

通过事件名和bind的方式，只能绑定之前存在的元素，后面添加的元素不能绑定事件,如下点击标签2的时候不会有弹框
//事件名

$('#btn').click(function() {
    $('#dv').append($("<p>p标签</p>"));
    $('p').click(function(){
        alert('p被点了');
    });
    $('#dv').append($('<p>p标签2</p>'));  
})
//bind
$('#btn').click(function() {
    $('#dv').append($("<p>p标签</p>"));
    $('p').bind('click',function(){
        alert('p被点了');
    });
    $('#dv').append($('<p>p标签2</p>'));  
})

通过delegate和on的方式绑定元素，前后元素都可以绑定事件

//delegate
$('#btn').click(function() {
    $('#dv').append($("<p>p标签</p>"));
    $('#dv').delegate('p','click',function(){
        alert('p被点了');
    });
    $('#dv').append($('<p>p标签2</p>'));  
})
//on
$('#btn').click(function() {
    $('#dv').append($("<p>p标签</p>"));
    $('#dv').on('click','p',function(){
        alert('p被点了');
    });
    $('#dv').append($('<p>p标签2</p>'));  
})

解绑事件

方式一：bind解绑

//解绑单个或多个事件
绑定事件的元素.unbind("事件名1 事件名2...");
//解绑所有的事件
绑定事件的元素.unbind();

方式二：delegate解绑

//解绑子元素单个或多个事件
父元素.undelegate("子元素","事件名1 事件名2...");
//解绑子元素所有的事件
父元素.undelegate();

父元素.undelegate(“子元素”);是无效的

方式一：on解绑

// 父元素和子元素的所有事件都会解绑
父元素.off();
// 父元素和子元素的单个或多个事件解绑
父元素.off("事件1 事件2 ...");

// 子元素的所有事件解绑
父元素.off("", "子元素"); 
// 子元素的单个或多个事件解绑
父元素.off("事件1 事件2 ...", "子元素"); 

// 父元素中所有的子元素的所有事件解绑
父元素.off("", "**"); 
// 父元素中所有的子元素的单个或多个事件解绑
父元素.off("事件1 事件2 ...", "**"); 

父元素.off(“子元素”);是无效的

事件冒泡

当一个元素触发某个事件的时候，会把这个事件传播到其父元素，一直到顶层元素。

阻止事件冒泡

在被触发事件的子元素中添加return false;即可。

事件的触发

文本框获取焦点事件的触发

// 方式一
文本框元素.focus();
// 方式二
文本框元素.trigger("focus");
// 方式三
文本框元素.triggerHandler("focus");

方式一和方式二，都可以获取文本框的焦点，并且触发浏览器的默认行为（光标闪烁）；而方式三，可以获取文本框的焦点，但是不能触发浏览器的默认行为。

each方法

each方式是用来遍历jquery对象的，它的参数是一个事件处理函数，此函数有两个参数，第一个是索引值，第二个参数是索引对应的DOM对象，使用的时候注意转换成jquery对象。

元素集合.each(function(index,ele){})

$('.list .start').each(function(index,ele){$(ele).css()})

多库共存

当引入多个js库时，这些库中有些方法具有相同的方法名，调用的时候就会出现冲突。
解决：权限转让var 新方法名=旧方法名.noConflict();
之后所有使用旧方法名的地方都可使用新方法名代替

元素的高度属性

元素.innerWidth()/innerHeight() // 方法返回元素的宽度/高度（包含padding，不含边框）
元素.outerWidth()/outerHeight() // 方法返回元素的宽度/高度（包含padding，含边框）
元素.outerWidth(true)/outerHeight(true) // 方法返回元素的宽度/高度（包含padding，含边框，含外边距）

插件

https://www.cnblogs.com/ajianbeyourself/p/5815689.html