jQuery补充与Bootstrap框架
jQuery补充与Bootstrap框架
筛选器方法
jQuery筛选器筛选后的值得到的还会是一个对象所以我们可以利用这个原理实现链式操作的效果，也就是连环使用筛选器
| 方法 | 功能 | 类型 |
|---|---|---|
| $("#id").next() | 同级别下一个 | 下一个元素筛选 |
| $("#id").nextAll() | 同级别下所有 | |
| $("#id").nextUntil("#i2") | 同级别往下找到最后但是不包括#i2 | |
| $("#id").prev() | 上一个 | 上一个元素筛选 |
| $("#id").prevAll() | 上面所有 | |
| $("#id").preUntil("#i2") | 同级别往上所有的找到最前面，但是不包括#i2 | |
| $("#id").parent() | 第一级父标签 | 父亲标签筛选 |
| $("#id").parent().parent() | 在上一级的基础上再向上一级寻找上一级的父标签也就是（爷爷） | |
| $("#id").parent().parent().parent() | 第三极父标签，可以一直向后寻找但是最多找到document | |
| $("#id").parents() | 找到祖宗十八代，默认找到html为止 | |
| $("#id").parentsUntil() | 祖宗十八代到body这个祖宗为止但是不包含body这个祖宗 | |
| $("#id").children(); | 儿砸 | 儿子标签筛选 |
| $("#id").shiblings(); | 同级别上下所有，好兄弟 | 兄弟标签筛选 |
| $("div p") | 在div标签中找到哦啊p标签 | 精确查找某标签 |
| $("div").find("d") | find从某个区域筛选出想要的标签 |
操作标签
| jQuery操作 | JS操作 | 功能 | 操作类型 |
|---|---|---|---|
| addClass() | classList.add() | 添加指定的CSS类名 | 操作选择器类 |
| removeClass() | classList.remove() | 移除指定的CSS类名 | |
| hasClass() | classList.contains() | 判断样式存不存在 | |
| toggleClass() | classList.toggle() | 切换CSS类名，有的话就移除，没有的话就增加 | |
| .css('样式名','样式值) | style.样式名 = '样式值' | 更改标签样式 | 操作更改标签样式 |
| text() | innerText() | 获取所有匹配的元素内容 | 文本操作 |
| html() | innerHTML() | 获得所有匹配元素的html内容 | |
| val() | values() | 获得第一个匹配元素的当前值 | |
| [0].files() | files() | 获取所有文件 | 文件操作 |
| attr() | setAttribute() getAttribute() | 返回第一个匹配元素的属性值 | 属性操作 |
| prop() | removeProp() | 获取属性值 | |
| append() | appendTo() | 追加元素 | 文档操作 |
| prepend() | perpendTo() | 前置元素 | |
| after() | inserAfter() | 后置元素 | |
| before() | insertBefore() | 放到某个元素前面 | |
| remove() | 移除标签 | ||
| empty() | 清空标签 | ||
| height() | 外边距高度 | 尺寸操作 | |
| width() | 外边距宽度 | ||
| innerHeight() | 内填充高度 | ||
| innerWidth() | 内填充宽度 | ||
| outerHeight() | 边框高度 | ||
| outWidth() | 边框宽度 |
jQuery绑定事件
1.JS绑定事件
标签对象.on事件名 = function()[事件代码]
btnEle.onclick = function()[alert(520)]
2.jQuery绑定事件
方法一:
jQuery对象.事件名(function()[事件代码])
$btnEle.click(function()[alter(123)])
方法二:
jQuery对象.on('事件名',function()[事件代码])
$btnEle.on('click',function()[alter(520)])
3.如果我们碰到没有办法使用第一种方法触发绑定事件那么我们就可以尝试使用方法二
阻止后续事件
1.能出发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
给已经有是啊金的标签绑定事件，会限制性绑定的，再去执行默认的
我们也可以让标签之前的额事件不执行
2.使用阻止后续事件的方法
方法一:
$(":submit").click(function ()[
alert('困！！！！')
return false
]）
方法二：
$(":submit").click(function(e)[
alert('难受呀，浑身腰酸背痛的！')
e.perventDefault()
]）
事件冒泡
1.设计到标签嵌套并且有相同事件的时候，那么就会逐级往上反馈执行
<div class='c1'>
<p class='c1'>
<span class='c1'>
点我
</span>
</p>
</div>
2.解决方法：
方法一：
$("span").click(function(){
alert('span');
return false；
}）;
方法二：
$("span").click(function(e){
alert('span');
e.perventDefault()
}）;
事件委托
1.冒泡委托其实就是通过事件冒泡的原理，利用父标签去补货子标签的事件
2.事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托
3.创建标签的两种方式
方式一：JS
focument.createElement()
方法二:jQuery
$('<标签名>')
4.委托
$('div').on('click','button',function()[
alert('青砖伴瓦漆')
])
Bootstrap框架
1.网址 ：https://www.bootcss.com/
2.图标网站：http://www.fontawesome.com.cn/
