标签：jQuery function bootstrap 标签 元素 事件 筛选 id
- jQuery筛选器方法
jQuery筛选器方法
基于当前元素向上，向下等查找元素
1. 下一个元素
$("#id").next() # id的下一个元素
$("#id").next() # id下面的所有元素
$("#id").nextUntil("#i2") # id下面的元素直到i2为止2. 上一个元素(用法类似下一个元素查找)
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")3. 父类元素
$("#id").parent() // 查找当前元素的父类元素
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。4. 儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们 5. 链式操作的底层原理
对象调用方法之后还会返回一个对象 从而实现链式操作的效果
就是说一个元素被好几个元素嵌套，这时候用jQuery的方法给最内层的元素设置事件，那么最内层元素执行完后还会再返回上一层执行(看看上一层有没有相同的事件) 因为jQuery事件执行完后会有一个返回值，它也是jQuery对象。
jQuery操作标签
| jQuery操作 | JS操作 |
| addClass() 添加指定的css类名 | classList.add() |
| removeClass() 移除指定的css类名 | classList.remove() |
| hasClass() 判断样式是否存在 | classList.contains() |
| toggleClass() 切换css类名，如果有就移除，如果没有就添加 | classList.toggle() |
| text() | innerText() |
| html() | innerHML() |
| val() | value |
| [0].files | files |
| attr() 静态属性 |
setAttribute() getAttribute() |
prop() 动态变换(checked)
append() append()
prepend()
after()
before()
remove() 移除标签
empty() 清空标签
jQuery.css('样式名','样式值') JS .style.样式名 = '样式值'
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
jQuery绑定事件
JS绑定事件
标签对象.on事件名 = function(){事件代码}
btnEle.onclick = function(){alert(123)}jQuery绑定事件
方式1
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
方式2
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alter(123)})有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
阻止后续事件
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
1.return false; // 常见阻止表单提交等
2.e.preventDefault();
能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>我们也可以让标签之前的事件不执行
return false
jQuery阻止后续事件
$(':submit').click(function (e){
alert('一定要细心 千万不要慌!!!')
// return false 方式1
e.preventDefault()方式2
})事件冒泡
涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
$("span").click(function (e) {
alert("span");
return false; 方式1
e.stopPropagation(); 方式2
});克隆事件
<button id="d1" class="c1">真男人的传奇,是兄弟就来砍我!!!</button>
<p>在我上面干嘛123</p>
<p>在我上面干嘛321</p>
<p>在我上面干嘛222</p>
<script>
$('p').hover(
function () {
alert('来啦，老弟')
},
function () {
alert('慢走哦～')
}
)
let $btnEle = $('#d1');
$btnEle.click(function () {
// this指代的是当前被操作的标签对象 如果想调用jQuery的方法 需要转换 $()
$('body').append($(this).clone(true))
})事件委托
"""
创建标签的两种方式
JS
document.createElement()
jQuery
$('<标签名>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
alert('你犯困的样子萌萌哒')
})
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)
Bootstrap框架
提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入 bootstrap涉及到js的部分需要使用jQuery
布局容器
栅格系统
全局css样式
组件
http://www.fontawesome.com.cn/
标签：jQuery,function,bootstrap,标签,元素,事件,筛选,id 来源： https://www.cnblogs.com/scx-xiaochun/p/16636368.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。