学习内容概要
- 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/
标签:jQuery,function,标签,绑定,29,前端开发,事件,2022.8,id
From: https://www.cnblogs.com/55wym/p/16637699.html