【2022.8.29】前端开发（6）

学习内容概要

• jQuery更多操作（属性、样式、数据值）
• jQuery绑定事件
• jQuery简易动画效果
• Bootstrap页面框架

内容详细

筛选器方法

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

'''链式操作的底层原理'''
对象调用方法之后还会返回一个对象 从而实现链式操作的效果

操作标签

  jQuery操作					JS操作
addClass()					classList.add()
removeClass()				classList.remove()
hasClass()					classList.contains()
toggleClass()				classList.toggle()

.css('样式名','样式值')		style.样式名 = '样式值'

text()						innerText()
html()						innerHTML()
val()						value
[0].files                files

attr()  静态属性			setAttribute() getAttribute()
prop()	动态变换(checked)

append()					append()
prepend()
after()
before()


remove()	移除标签
empty()		清空标签

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
 	"""

阻止后续事件

能够触发form表单提交数据动作的标签有两个
	 <input type="submit">
  	 <button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
	我们也可以让标签之前的事件不执行
    	return false
    
$(':submit').click(function (e){
            alert('一定要细心 千万不要慌!!!')
            // return false  方式1
            e.preventDefault()方式2
        })

事件冒泡

涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
$("span").click(function (e) {
        alert("span");
    	  return false;  		方式1
        e.stopPropagation(); 	方式2
    });

事件委托

"""
创建标签的两种方式
	JS
		document.createElement()
	jQuery
		$('<标签名>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('你犯困的样子萌萌哒')
        })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

Bootstrap框架

提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入  bootstrap涉及到js的部分需要使用jQuery 

布局容器
栅格系统
全局css样式
组件
	http://www.fontawesome.com.cn/