-
官网jQuery 下载
一、使用
下载文件并引入jquery.js
<script src="jquery.min.js"></script>
编写jQuery代码
$(function () {
// 此处是页面DOM加载完成的入口,所有js代码都需要写在这里面
})
二、获取对象
注意:jQuery对象只能使用jQuery方法,DOM对象只能使用原生JS属性和方法
1.顶级对象$
$ = jQuery 是顶级对象,相当于windows
2.对象转换
-
DOM转jQuery
var mydiv = document.querySelector('div') // dom对象
$(mydiv) // jQuery对象
-
jQuery转DOM
$('div')[index] // index是索引号
3.选择器
-
$(this)
$(this)是一个jquery对象,this是一个html元素
-
基本选择器
名称 | 用法 | 描述 |
---|---|---|
全类选择器 | $('*') | 匹配所有元素 |
ID选择器 | $('#id') | |
类选择器 | $('.class') | 所有使用class类的元素 |
标签选择器 | $('div') | |
并集选择器 | $('div,p,.class')逗号隔开 | 选择div和p和class类的 |
交集选择器 | $('.classa.classb')直接连起来 | 满足同时使用classa和classb类 |
-
层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $("#myid>a") | 只获取一级子元素列表 |
后代选择器 | $("#myid a") | 获取所有子孙后代元素列表 |
-
获取表单元素
用法 | 描述 |
---|---|
$(":input") | 所有输入元素 |
$(":text") | 所有type=“text” 的元素 |
$(":password") | 所有type=“password” 的元素 |
-
过滤选择器
用法 | 选取 |
---|---|
$(“p:first”) | 第一个 p 元素 |
$(“p:last”) | 最后一个 p 元素 |
$(“tr:even”) | 所有偶数 tr 元素 |
$(“tr:odd”) | 所有奇数 tr 元素 |
$(“ul li:eq(3)”) | ul下第四个li元素(index 从 0 开始 |
$(“ul li:gt(3)”) | index大于3的元素(第五个及以后 |
$(“ul li:lt(3)”) | index小于3的元素 |
$(":contains(‘aaa’)") | 包含指定字符串的所有元素 |
$("td:parent") | 所有td内容不为空的元素 |
-
属性选择器
用法 | 选取 |
---|---|
$("[href]") | 所有带有 href 属性的元素 |
$("[href=’#’]") | 所有href属性值等于“#”的元素 |
$("[href!=’#’]") | 所有href属性值不等于“#”的元素 |
$(":checked") | 选取被选择的 checkbox/radio 元素 |
-
筛选已匹配元素
方法 | 描述 |
---|---|
$('ul>li').first() | 获取匹配元素集合中第一个元素 |
$('ul>li').last() | 获取匹配元素集合中最后一个元素 |
$('ul>li').eq(1) | 获取匹配元素集合中指定位置索引的一个元素,索引从0开始 |
$('ul>li').not(¥('ul>li').eq(1)) | 匹配的元素集合中除去指定元素的集合 |
三、操作元素
1.样式/类
-
设置属性值:非数字需要加引号
$('div').css({
'background': 'red',
'color': 'white'
});
-
获取属性值字段
$('div').css('background')
-
设置类样式
$('li').addClass('beauty') // 添加类
$('li').removeClass('beauty') // 删除类
$('div').toggleClass('hide') // 切换类
2.属性/值
-
获取属性(返回字符串)
$('#id').attr('title') // 获取title属性的内容
-
设置/修改属性(返回字符串)
$('#id').attr('title', '我是attr修改后的段落标题');
-
prop():专门操作属性值为布尔值的属性,该方法读写一体
$(':checkbox').prop('checked', 'true');
-
val():用于获取表单元素的值和设置表单元素的值,该方法读写一体
$(':text').val();// 获取
$(':text').val('123456');// 修改
-
获取尺寸属性
方法 | 描述 |
---|---|
$('.box').width() | 获取元素width的值 |
$('.box').height() | 获取元素height的值 |
$('.box').innerWidth() | width+padding的值 |
$('.box').innerHeight | height+padding的值 |
$('.box').outerWidth() | width+padding+border,若true再加上margin |
$('.box').outerHeight(true) | height+padding+border,若true再加上margin |
-
获取位置属性
position()只能获取不能设置偏移,设置坐标时参数不加单位
方法 | 描述 |
---|---|
$('.box').offset().left 或 .offset().top | 获取相对页面左上角的坐标 |
$('.box').offset({top:10,left:30}) | 设置相对页面左上角的坐标 |
$('.box').position().left 或 .position().top | 获取相对于父元素左上角的坐标 |
$('.box').scrollLeft() 或 .scrollLeft(60) | 读取/设置滚动条的X坐标 |
$('.box').scrollTop() 或 .scrollTop(60) | 读取/设置滚动条的Y坐标 |
3.DOM内容
-
内部插入文本/html内容
方法 | 描述 |
---|---|
$('p').text('我是段落') | 设置/获取元素的文本内容,该方法读写合一 |
$('ul').html('<li>我是列表项</li>') | 设置/获取元素的html内容,该方法读写合一 |
$('ul').append('<li>我是最后一个列表项</li>') | 向当前元素的子元素最后插入html内容 |
$('ul').prepend('<li>我是第一个列表项</li>') | 向当前元素的子元素最前插入html内容 |
-
外部插入
方法 | 描述 |
---|---|
$('div').after('<p>我是段落</p>') | 在匹配元素集合中的每个元素后面插入指定内容,作为其兄弟节点 |
$('div').before('<p>我在前面</p>') | 在匹配元素集合中的每个元素前面插入指定内容,作为其兄弟节点 |
-
DOM移除
方法 | 描述 |
---|---|
$('ul').empty() | 删除所有匹配元素的子元素 |
$('ul>p').remove(); | 删除所有匹配的元素 |
-
DOM替换、拷贝
方法 | 描述 |
---|---|
$('ul>li').replaceWith('<p>我是段落</p>') | 用指定内容替换集合中所有匹配的元素,返回被删除元素的集合 |
var ul = $('ul').clone();¥('body').append(ul) | 创建一个匹配的元素集合的深度拷贝副本。 |
-
DOM遍历
方法 | 描述 |
---|---|
$('#id').parent() | 获取集合中每个匹配元素的父元素集合 |
$('ul').children() | 获取集合中每个匹配元素的子元素集合 |
$('#two').prev() | 获取集合中每个匹配元素紧邻的前一个兄弟元素集合 |
$('#two').next() | 获得集合中每个匹配元素的所有后一个兄弟元素集合 |
$('#me').prevAll() | 获得集合中每个匹配元素的所有前面的兄弟元素集合 |
$('#me').nextAll() | 获得集合中每个匹配元素的所有后面的兄弟元素集合 |
$('#me').siblings() | 获得集合中每个匹配元素的兄弟元素集合 |
4.遍历
方法 | 描述 |
---|---|
$('li').each(function (index, element) {...}); | 遍历一个jQuery对象,为每个匹配元素执行一个函数。 |
5.重置表单内容reset()
点击 ‘清空’ 按钮清除用户名表单中的内容
document.querySelector('.btn-clear').addEventListener('click', () => {
var usernameForm = document.querySelector('.username-form');
usernameForm.reset();
})
四、事件
1.事件绑定
一般事件
-
单个事件注册一种效果
$(".a").click(function(){...});
-
多个事件注册一种效果
$(".a").on("click" "keydown",function(){...}) // 多个事件空格分开
-
多个事件分别注册效果
$("div").on({//同时监听多个事件的多种效果
mouseenter:function(){...},
click:function(){...},
mouseleave:function(){...}
});
-
事件委托
绑定父元素触发子元素(li处写子元素选择器)
$("ul").on("click","li",function(){...});//事件绑定ul,触发的是li
$('ul').delegate('li', 'click', function () {...});
-
一次触发
利用one()来绑定,只能触发一次
$("div").one("click",function(){...});//和on的写法一样
-
自动触发
$("div").click();
$("div").trigger("click");//自动点击div盒子
$("div").triggerHandler("click");//不会触发元素的默认行为
表单事件
使用 | 描述 |
---|---|
$(':text').focus(function () {...}) | 获取焦点时触发 |
$(':text').blur(function () {...}) | 失去焦点时触发 |
$(':text').change(function () {...}) | 内容改变时触发 |
$('select').change(function () {...}); | 选择框的内容改变时 |
$('input').select(function () {...}); | 内容被选择时 |
$('form').submit(function () {...}); | 表单提交时 |
鼠标事件
使用 | 描述 |
---|---|
$('button').click(function () {...}); | 鼠标单击时 |
$('button').dbclick(function () {...}); | 鼠标双击时 |
$(':text').mousedown(function () {...}) | 鼠标左键按下 |
$('select').mouseup(function () {...}); | 鼠标左键松开 |
$('input').mouseenter(function () {...}); | 鼠标进入目标元素(该元素) |
$('form').mouseleave(function () {...}); | 鼠标离开目标元素 |
$('form').mouseover(function () {...}); | 鼠标进入目标元素(包括子代) |
$('form').mouseout(function () {...}); | 鼠标离开目标元素 |
$('form').mousemove(function () {...}); | 鼠标指针在元素内移动时 |
$('form').hover(function () {...},function () {...}); | 同时绑定 mouseenter 和 mouseleave |
注意:
mouseenter
事件和mouseover
的不同之处是事件的冒泡的方式。mouseenter
事件只会在绑定它的元素上被调用,而不会在后代节点上被触发。
mouseleave
事件和mouseout
的不同之处是事件的冒泡的方式。mouseleave
事件只会在绑定它的元素上被调用,而不会在后代节点上被触发。
键盘事件
使用 | 描述 |
---|---|
$('button').keydown(function () {...}); | 键盘按键按下 |
$('button').keyup(function () {...}); | 键盘按键松开 |
$(':text').keypress(function () {...}) | 与keydown类似,当键盘按键按下 |
2.事件解绑
off()方法可以移除通过on()绑定的事件
$("div").off();//解除所有事件
$("div").off("click");//解除某个事件
$("ul").off("click","li");或 $('ul').undelegate('click');//解除事件委托
3.事件对象
$("div").on("click",function(e){
e.preventDefault();//事件对象使用各种方法
})
五、动画
1.隐藏/显示/渐变
方法 | 说明 |
---|---|
隐藏$('.box').hide([speed,[easing],[fn]) | speed:无单位数字(毫秒),或slow/normal/fast |
显示$('.box').show([speed,[easing],[fn]) | easing:切换效果,swing(默认)/linear |
切换$('.box').toggle([speed,[easing],[fn]]) | fn:回调函数,动画完成时执行 |
淡入$('.box').fadeIn([speed,[easing],[fn]]) | |
淡出$('.box').fadeOut([speed,[easing],[fn]]) | ————都可以不带参数('.box').hide() |
切换$('.box').fadeToggle([speed,[easing],[fn]]) | |
调整透明度$('.box').fadeTo([speed,opacity,[easing],[fn]]) | 透明度opacity:0-1必写 |
2.事件切换
$(".aa").hover(function(){},function(){});//第一个函数是鼠标经过,第二个鼠标离开
$(".aa").hover(function(){});//只写一个函数,鼠标经过离开都会触发
3.自定义动画
根据一组 CSS 属性,执行自定义动画,支持链式调用
语法:animate(params,[speed,[easing],[fn])
params必写
$("button").click(function(){
$(div).animate({//属性以对象的形式传递
left: '200px',
opacity: '0.4',
width: '300px'
},500).animate({
height: '200px',
})
})
六、jQuery插件
1.插件库:jQuery插件库-收集最全最新最好的jQuery插件
2.jQuery之家:jQuery之家-自由分享jQuery、html5、css3的插件库