• 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