jQuery
1.
jQurey是一个轻量级的,兼容多浏览器的JavaScript库.
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
-
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
-
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
-
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
-
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
-
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
-
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
-
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
3.引入方式
方式一:直接下载文件到本地,从本地导入
方式二:使用文件的网络地址
下载链接：jQuery官网
中文文档：jQuery AP中文文档
4.声明一个jQuery对象变量
var $变量名=$(jQuery对象)
var 变量名=DOM对象
两者之间的相互转换:
jQ转DOM: jQ对象+[0]索引零 例如:$('#d1')[0]
DOM转jQ: $(DOM对象) 例如:$(document.getElementById('d1')[0])
二.jQuery基础语法
1.$(selector).action()
#$(selector)找到某个标签，.action()通过这个标签对象调用它的一些方法。
2.查找标签
1)基本选择器
id选择器
$("#id")
标签选择器
$("div")
class类选择器
$(".c1")
所有元素选择器
$("*")
配合选择器
$("div.c1") 找到类名为c1的div标签
组合选择器
$("div, .c1, #d1")
2)层级选择器
$("x y"); x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3)基本筛选器(选择之后进行过滤)
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素,索引超出范围找不到值为undifined
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
4)属性选择器
多用于input标签
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子:
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
5)表单筛选器(多用于找form表单里面出现的input标签,相比于属性选择器简单点)
:text 文档
:password 密码
:file 文件
:radio 单选
:checkbox 多选
:submit 提交
:reset 重置
:button 普通
例子:
$(":text") 找到所有的text
表单对象属性:
:enabled 启用,框内能输入内容,一般都默认启用
:disabled 禁用,框内不能输入内容
:checked 多选内的默认选择项
:selected 列表内的默认选择项
注意:当$(":checked")时,如果存在checkbox标签和select列表,其内有checked属性和selected属性,会被同时筛选出来,想要单独选input标签,就$("input:checked").
3.选择器方法(用的多)
1)下一个元素:
$("#id").next() 找下个同等级标签
$("#id").nextAll() 找之后的所有同等级标签
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
2)上一个元素
$("#id").prev() 找上个同等级标签
$("#id").prevAll() 找上面的所有同等级标签
$("#id").prevUntil("#i2") 找上面的所有同等级标签,知道找到id为id的标签,不包含它
3)父亲元素
$("#id").parent() 查找父元素
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
4)儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
5)查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") //从结果集中找出有 p子孙标签 的div标签 跟自己无关
等价于$("div p")
6)筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有 c1样式类的div标签，跟自己相关,跟子标签无关
等价于 $("div.c1")
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
7)事件
对象.事件(fuction(){})
例如:对象.click(fuction(){})
4.操作标签
1)样式操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
2)直接修改css的属性来修改样式
css("color","red") //tag.style.color='red' DOM操作
$('.c1').css("color","red"); jQuery操作
3)位置操作
1.offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
console.log($(".c1").offset()); 查找元素偏移位置
$(".c1").offset({top:100,left:100}); 设置元素的偏移位置
2.position()// 获取匹配元素相对父元素的偏移，不能设置位置
3.$(window).scrollTop() //滚轮向下移动的距离
$(window).scroll(function (){
console.log($(window).scrollTop());
});
4.$(window).scrollLeft() //滚轮向左移动的距离
$(window).scroll(function (){
console.log($(window).scrollLeft());
});
4)尺寸
height(); 得到内容(content)的高度
width(); 得到内容的宽度
innerHeight(); content高度+2个padding高度
innerWidth(); content宽度+2个padding宽度
outerHeight(); content高度+2个padding高度+2个border高度 不包括margin高度
outerWidth(); content宽度+2个padding宽度+2个border宽度 不包括margin宽度
5)文本操作
HTML代码:
html()// 取得第一个匹配元素的html内容，包含标签内容
$('div').html()
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
$('.c1').html('哈哈')[0] 直接往标签内插入文本内容
$('.c1').html('<div>haha</div>'); 直接往标签内插入子标签
文本值:
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
console.log($('.c1').text()); 查询所有.c1类标签的文本内容
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
console.log($('.c1').text('haha')); 往所有.c1类标签内插入haha文本.
值: 多用于input,select标签
val()// 取得第一个匹配元素的当前值
console.log($('option').val());
val(val)// 设置所有匹配元素的值
console.log($('option').val(5)); 设置所有option标签的value值
val([val1, val2])// 设置多选的checkbox、多选select的值
$(':checkbox').val(['basketball']); 多选框中选择value为'basketball'项
6)属性操作
用于id自带属性等或自定义属性
attr(attrName)// 返回第一个匹配元素的属性值
$('option').attr("value") 查看option标签的value属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
$('option').attr("value",'7') 给所有的option标签的value值设为7
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
$('option').attr({"value":7,"name":'city'}) 给所有的option标签的value值=7,name=city
removeAttr()// 从每一个匹配的元素中删除一个属性
$('option').removeAttr('class'); 删除所有option标签内的class属性
用于checkbox和radio
prop() //获取属性
$('input').prop('value') 查询第一个input标签的value属性
$('input').prop('value','唱') 给所有input标签value属性改成'唱'
prop和attr的区别：
attr全称attribute(属性) 支持自定义属性
prop全称property(属性) 不支持自定义属性
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象 属性，可以认为attr是显式的，而prop是隐式的。
举个列子:
<input type="checkbox" id="i1" value="1">
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
总结:
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
7)文档处理
添加到指定元素内部的后面
$(A).append(B) // B添加到A里面
$('#i1').append($('#i2')); 把id为i2的标签添加到id为i1的标签中
$(A).appendTo(B) // A添加到B里面
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。包括标签
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是标签还在
替换
replaceWith() 后面的替代前面
$('#i1').replaceWith($('#i2')); id为i1的标签被i2替代
replaceAll() 前面的替代后面
$('#i1').replaceAll($('#i2')); id为i2的标签被i1替代
clone(克隆)
clone();
例子:
$('#d1').click(function () {
$(this).clone().insertAfter(this);
});
$('#d2').on('click',function () {
$(this).clone(true).insertAfter(this);
});
二者区别,第一个只能第一个按钮克隆,克隆出来的不能再克隆
第二个可以
clone括号内的true导致的.克隆标签并且克隆事件
8)事件
1.常用事件
1.click(function(){...}) 鼠标点击
2.hover(function(){...}) 鼠标悬浮
$('.c').hover(
function (){$(this).css('background-color','red');},
function (){$(this).css('background-color','rgba(255,255,255,0)');}
)
3.blur(function(){...}) 鼠标移开,散集 多用于文本框
$('.c2').blur(function (){
$(this).removeClass('c1');
});
4.focus(function(){...}) 鼠标点击,聚集 多用于文本框
$('.c2').focus(function (){
$(this).addClass('c1');
})
5.change(function(){...}) //内容发生变化，input，select等
$('.c3').change(function (){
$(this).toggleClass('c1');
})
6.keydown(function(){...})
例子:
$(window).keydown(function (event){
console.log(event.keyCode);
if (event.keyCode===90){
$('.c').toggleClass('c1');
}
});
keyup(function(){...})
例子:
$(window).keyup(function (event){
if (event.keyCode===90){
$('.c').removeClass('c1');
}
});
7.mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
mouseenter例子:
$('.c').mouseenter(function () {
$('.c').toggleClass('c1');
})
mouseover例子:
$('.c').mouseover(function () {
$('.c').toggleClass('c1');
})
2)事件绑定
.on( events [, selector ],function(){})
1.events： 事件
2.selector: 选择器（可选的）
3.function: 事件处理函数
3)移除事件(不常用)
获取对象.off( events [, selector ][,function(){}])
'.off()' 方法移除用 '.on()' 绑定的事件处理程序。
$("li").off("click")；就可以了
1.events： 事件
2.selector: 选择器（可选的）
3.function: 事件处理函数
例子：
$(window).click(function (){
alert('我是父')
});
$('.c1').click(function (wwww){
alert('我是子');
$(window).off('click');
})
$(window).off('click');虽然防止了父标签事件跟着子标签点击事件一起生效的情况,但是会把父标签的事件移除,不会再生效了
4)阻止后续事件进行
1. return false; // 常见阻止表单提交等，如果input标签里面的值为空就组织它提交，就可以使用这两种方法
2. e.stopPropagation();
例子：
$(window).click(function (){
alert('我是父')
});
$('.c1').click(function (wwww){
alert('我是子');
// return false;
wwww.stopPropagation();
})
两者都是阻止表单提交。防止了父标签事件跟着子标签点击事件一起生效
5)阻止冒泡事件
冒泡事件:给父标签绑定事件之后,不管字标签是否绑定事件,点击字标签,父标签的事件都会生效,
在我们点击字标签的时候,为了避免父标签事件的影响,所以我们要阻止父标签事件的发生.
例子:
$(window).click(function (){
alert('我是父')
});
$('.c1').click(function (wwww){
alert('我是子');
// return false; ===>方法一
// 常见阻止表单提交
// wwww.stopPropagation(); ===>方法二
$(window).off('click'); ===>方法三,方法三父标签的时间会被移除
})
6)事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
7)页面载入
文档加载完就触发,不需要等图片视频等,且没有函数覆盖现象.
和window.onload区别
1.window.onload底下这个会将上面那个覆盖,'.c1'无法实现效果;
如果页面有图片,视频等内容,会等所有内容加载完才会执行js代码
window.onload = function () {
$('.c1').click(function () {
$(this).addClass('c2')
})
};
window.onload = function () {
$('.c3').click(function () {
$(this).addClass('c2')
})
}
2.jQuery此类写法后者不会覆盖前者,效果都能实现
js代码加载完就会马上执行,效率高.
$(function () {
$('.c1').click(function () {
$(this).addClass('c2')
})
});
$(function () {
$('.c3').click(function () {
$(this).addClass('c2')
})
});
8)动画效果(了解)
1.基本
show([s,[e],[fn]]) 显示出来 $('.c1').show(5000);
hide([s,[e],[fn]]) 隐藏起来 $('.c1').hide(5000);
toggle([s,[e],[fn]]) 原来什么效果现在就反着来 $('.c1').toggle(5000);
2.// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])
//使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
3.// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
4.// 自定义（了解即可）
animate(p,[s],[e],[fn])
9)each
1.jQuery.each(collection, callback(indexInArray, valueOfElement){})：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
例子:
$.each($(':checked'),function(i,v){
console.log(i,v.name);
})
2. .each(function(index,Element){})
$(':checked').each(function(i,v){
console.log(i,v.name);
})
对多选框中已经选择对象进行循环输出内容
3.终止each循环：
在遍历过程中可以使用 return false提前结束each循环。
而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思
10).date()
任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
1. .data(key,value):设置值 描述：在匹配的元素上存储任意相关数据。
$('div').data('key',7); 设置值
2. .data(key):取值,没有的话返回undefined
$('div').eq(0).data('key'); 查看设置的值
3. .removeData(key):移除存放在元素上的数据,不加key参数表示移除所有保存的数据
$("div").removeData("k"); //移除元素上存放k对应的数据
11)插件(了解)
1.jQuery.extend(object) 给jQuery添加方法
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例:
<script>
jQuery.extend({ //$.extend({})
min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
2.jQuery.fn.extend(object) 给jQuery对象添加方法
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({ //给任意的jQuery标签对象添加一个方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
浙公网安备 33010602011771号