引入jquery
- 本地引入 CDN引入
jquery 基础语法
- $(selector).actin()
$ 定义jquery selector 选择器 action 执行的操作
jquery 选择器
元素选择器 $(‘元素名’)
id 选择器 $(’#+id’)
类选择器 $(’. + class’)
jquery 事件
常用的事件方法
点击事件 click
单击事件
- click()
双击事件
- dblclick()
mouseenter
mouseleave
绑定事件
- .bind(‘shijian’,函数);可以绑定多个事件
- .on(‘shijian’,函数); 可以绑定多个事件 官方推荐方法 (1.7版本之后)
解除绑定事件
- .onbind(‘shijian’,函数);没有函数参数时 解除所有事件
- .off(‘shijian’,函数);没有函数参数时 解除所有事件 官方推荐方法
阻止事件冒泡
- 阻止父级事件冒泡 .stoppropagation();
- 阻止所有的事件(自身以外) .stopImmediatePropagation();
自定义事件
- let e = jQuery.Event(‘MyEvent’);
HTML捕获
- .text() 获取元素文本text值 不包含html标签
- .html() 获取元素文本和html标签
- .val() 获取元素value值
- .attr(‘属性名’) 获取元素的属性值
HTML设置
- .text(‘要修改成什么’)
- .html(‘可以修改标签’)
- .val(‘修改value值’)
- .attr(‘属性名’,‘属性值’)
修改多个属性 .attr({
‘shuxing1’ : ‘shuxingzhi’,
‘shuxing2’ : ‘shuxingzhi’
})
添加元素
- append 在后面添加
- prepend 在前面添加
- before 咋前面添加 ,会换行添加
- after 在后面添加 , 会换行添加
三种添加方法
html jQuery DOM
html : let text1 = ’wins
’
jQuery : let text2 = $(’’).text(‘wins’);
DOM : let text3 = document.createElement(‘p’) text3.innerHTML = ‘wins’
添加进body中 $(‘body’).append(text1,text2,text3);
删除元素
- .remove() 方法 全部删除
- .empty() 删除里面的所有子元素 本身不会被删除
jQuery 效果
隐藏与显示
- .hide(1000) 1000ms隐藏 有过度效果
- .show(1000) 1000ms显示 有过度效果
- .toggle(1000) 1000ms 显示和隐藏 有过度效果
淡入淡出
- 淡入 fadeIn(1000) 1000ms 淡入 前提是元素为display none
- 淡出 fadeOut(1000) 1000ms 淡出 前提是元素为display 不为none
- 淡出/淡入 fadeToggle(1000) 1000ms 淡出/淡入
- 淡化透明度 fadeTo(1000,0.5) 1000ms 执行 透明度为0.5
滑动
- 出现 slideDown(1000) 1000ms
- 隐藏 slideUp(500) 500ms
- 出现/隐藏 silideToggle(500) 500ms
回调
- 在执行完方法之后会有一个回调函数
- $(‘p’).hide(1000,function(){alert(‘执行完成’)})
- 执行多个方法 $(‘p’).css(‘color’,‘red’).slideUp(1000).slideDown(1000);
css
$('div').css({
width : '100px',
height : '100px',
backgroundColor : 'red'
})
- $(‘div’).addClass(‘style1’); 通过添加类 来添加样式
- addClass() removeClass toggleClass()
jquery 盒子
- height() 内容height width() 内容width
- innerHeight() 包括padding innerWidth() 包括padding
- outerHeight() 包含padding 和border
- outerHeight(true) 包含padding border margin
jQuery 遍历
向下遍历
- .children() 可以有参数 参数为选择器 只向下遍历一级
- .find(’#id’) 必须有参数 参数为选择器 一直向下遍历直到找到
向上遍历
- parent() 只向上遍历一层
- parents() 向上遍历所有的元素 传入参数 表示选中这个参数
- parentsUntil() 传入参数 表示区间 表示到这个区间之间所有的元素
同级遍历
- sibings() 修改同级的所有元素
- next() 修改下一个同级元素
- nextAll() 修改下面的所有同级元素
- nextUntil() 修改下面的同级元素的区间
- prev() 修改上一个同级元素
- preAll() 修改上面的所有同级元素
- preUntil() 修改上面的同级元素的区间
过滤
- first() 元素中的第一个元素
- last() 元素中的最后一个元素
- eq() 元素中的索引 从0开始 参数为索引
- filter() 元素中的指代元素 参数为选择器
- not() 元素中的非指定元素之外的所有元素 参数为选择器