-
官网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的插件库
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
