jQuery初探

引入jquery

1. 本地引入 CDN引入

jquery 基础语法

1. $(selector).actin()

$ 定义jquery selector 选择器 action 执行的操作

jquery 选择器

元素选择器 $(‘元素名’)

id 选择器 $(’#+id’)

类选择器 $(’. + class’)

jquery 事件

常用的事件方法

点击事件 click

单击事件

1. click()

双击事件

1. dblclick()

mouseenter

mouseleave

绑定事件

1. .bind(‘shijian’,函数)；可以绑定多个事件
2. .on(‘shijian’,函数)； 可以绑定多个事件 官方推荐方法 （1.7版本之后）

解除绑定事件

1. .onbind(‘shijian’,函数)；没有函数参数时 解除所有事件
2. .off(‘shijian’,函数)；没有函数参数时 解除所有事件 官方推荐方法

阻止事件冒泡

1. 阻止父级事件冒泡 .stoppropagation();
2. 阻止所有的事件（自身以外） .stopImmediatePropagation();

自定义事件

1. let e = jQuery.Event(‘MyEvent’);

HTML捕获

1. .text() 获取元素文本text值 不包含html标签
2. .html() 获取元素文本和html标签
3. .val() 获取元素value值
4. .attr(‘属性名’) 获取元素的属性值

HTML设置

1. .text(‘要修改成什么’)
2. .html(‘可以修改标签’)
3. .val(‘修改value值’)
4. .attr(‘属性名’,‘属性值’)

修改多个属性 .attr({
‘shuxing1’ : ‘shuxingzhi’,
‘shuxing2’ : ‘shuxingzhi’
})

添加元素

1. append 在后面添加
2. prepend 在前面添加
3. before 咋前面添加 ，会换行添加
4. 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);

删除元素

1. .remove() 方法 全部删除
2. .empty() 删除里面的所有子元素 本身不会被删除

jQuery 效果

隐藏与显示

1. .hide(1000) 1000ms隐藏 有过度效果
2. .show(1000) 1000ms显示 有过度效果
3. .toggle(1000) 1000ms 显示和隐藏 有过度效果

淡入淡出

1. 淡入 fadeIn(1000) 1000ms 淡入 前提是元素为display none
2. 淡出 fadeOut(1000) 1000ms 淡出 前提是元素为display 不为none
3. 淡出/淡入 fadeToggle(1000) 1000ms 淡出/淡入
4. 淡化透明度 fadeTo(1000,0.5) 1000ms 执行 透明度为0.5

滑动

1. 出现 slideDown(1000) 1000ms
2. 隐藏 slideUp(500) 500ms
3. 出现/隐藏 silideToggle(500) 500ms

回调

1. 在执行完方法之后会有一个回调函数
2. $(‘p’).hide(1000,function(){alert(‘执行完成’)})
3. 执行多个方法 $(‘p’).css(‘color’,‘red’).slideUp(1000).slideDown(1000);

css

$('div').css({
    width : '100px',
    height : '100px',
    backgroundColor : 'red'
})

2. $(‘div’).addClass(‘style1’); 通过添加类 来添加样式
3. addClass() removeClass toggleClass()

jquery 盒子

1. height() 内容height width() 内容width
2. innerHeight() 包括padding innerWidth() 包括padding
3. outerHeight() 包含padding 和border
4. outerHeight(true) 包含padding border margin

jQuery 遍历

向下遍历

1. .children() 可以有参数 参数为选择器 只向下遍历一级
2. .find(’#id’) 必须有参数 参数为选择器 一直向下遍历直到找到

向上遍历

1. parent() 只向上遍历一层
2. parents() 向上遍历所有的元素 传入参数 表示选中这个参数
3. parentsUntil() 传入参数 表示区间 表示到这个区间之间所有的元素

同级遍历

1. sibings() 修改同级的所有元素
2. next() 修改下一个同级元素
3. nextAll() 修改下面的所有同级元素
4. nextUntil() 修改下面的同级元素的区间
5. prev() 修改上一个同级元素
6. preAll() 修改上面的所有同级元素
7. preUntil() 修改上面的同级元素的区间

过滤

1. first() 元素中的第一个元素
2. last() 元素中的最后一个元素
3. eq() 元素中的索引 从0开始 参数为索引
4. filter() 元素中的指代元素 参数为选择器
5. not() 元素中的非指定元素之外的所有元素 参数为选择器

原文地址：https://www.qianqianhaiou.cn/index.php/archives/100/