前端 06
今日内容概要
一、筛选器方法
1.下一个元素：
| $("#id").next |
| $("#id").nextAll |
| $("#id").nextUntil("#i2") |
2.上一个元素
| $("#id").prev() |
| $("#id").prevAll() |
| $("#id").prevUntil("#i2") |
3.父亲元素
| $("#id").parent() |
| $("#id").parents() // 查找当前元素的所有的父辈元素 |
| $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 |
4.儿子和兄弟元素
| $("#id").chilrden(); // 儿子们 |
| $("#id").siblings(); // 兄弟们 |
5.代码实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选器方法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p>111</p>
<p>222</p>
<div id = "d2">div
<span>444</span>
<p>div>p
<span id="d1">div>p>span</span>
</p>
<span>333</span>
</div>
<p>555</p>
<p>666</p>
</body>
</html>
6.链式操作的底层原理
对象调用方法之后还会返回一个对象，从而实现链式操作的效果
二、操作标签
1.样式操作(与原生js做对比)
| jQuery操作 | JS操作 |
| addClass() | classList.add() |
| removeClass() | classList.remove() |
| hasClass() | classList.contains() |
| toggleClass() | classList.toggle() |
2.CSS样式
| .css('样式名','样式值') | style.样式名 = '样式值' |
3.位置操作
| offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
| position()// 获取匹配元素相对父元素的偏移 |
| scrollTop()// 获取匹配元素相对滚动条顶部的偏移 |
| scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 |
4.文本操作
| jQuery操作 | JS操作 |
| text() // 取得所有匹配元素的html内容 | innerText() |
| html() // 取得第一个匹配元素的html内容 | innerHTML() |
| val() // 取得第一个匹配元素的当前值 | value |
| [0].files | files |
5.属性操作
1.用于ID等或自定义属性:
| attr() // 返回第一个匹配元素的属性值(匹配静态属性) | setAttribute() getAttribute() |
| prop() 匹配动态属性(checked、select) |
attr针对动态变化的属性是无法识别的，它只能识别底层的代码
2.用于checkbox和radio和option
prop()是专门用于判断checkbox和radio和option这三个动态属性的
6.prop和attr的区别
attr全称attribute(属性)
prop全称property(属性)
二者虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而pprop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
7.文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
remove是整个全部清除掉，而empty是外壳还留着，里面的东西都清除了
三、jQuery绑定事件
1.JS绑定事件
标签对象.on事件名 = function(){时间代码}
btnEle.onclick = function(){alert(123)}
2.jQuery绑定事件
方式一
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function() {alter(123)})
方式二
jQuery对象.on('事件名',function() {事件代码})
$btnEle.on('click',function() {alter(123)})
有时候使用jQuery的方式1绑定事件如果无法触发，可以切换为方式2
3.hover事件示例
4.实时监听
每次输入的值都会被监测到
四、阻止后续事件
1.能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
2.给已经有事件的标签绑定事件，会先执行绑定的，再去执行默认的
我们也可以让标签之前的事件不执行
return false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form action="">
<p>username:<input type="text" name="username"></p>
<input type="submit" value="提交"><button>按我</button>
<script>
$(':submit').click(function (e){
alert('一定要细心 千万不要慌!!!')
// return false
e.preventDefault()
})
</script>
</form>
</body>
</html>
五、事件冒泡
涉及到标签嵌套并且具有相同事件的时候，那么会逐级往上反馈并执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function (e) {
alert('div')
})
$('p').click(function (e) {
alert('p')
e.stopPropagation()
})
$('span').click(function (e) {
alert('span')
// return false
})
</script>
</body>
</html>六、事件委托
"""
创建标签的两种方式
JS
document.createElement()
jQuery
$('<标签名>')
"""事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托
$('div').on('click','button',function () {
alert('加油加油，博客马上写完了')
})上述方式就可以解决动态标签事件的执行问题(注意委托指的是标签内部的标签)
七、Bootstrap框架
提前写好所有的样式标签，直接拷贝使用即可
使用之前需要先导入，bootstrop涉及到js的部分需要使用jQuery
布局容器
栅格系统
全局css样式
组件
浙公网安备 33010602011771号