一、筛选器方法
查找下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
查找上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
查找父元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
查找儿子与兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
'''链式操作的底层原理'''
对象调用方法之后还会返回一个对象 从而实现链式操作的效果
如果面向对象里面返回的对象也想继续再通过句点符的方式使用函数内添加一个 return self(具体看图2、3)
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div id="d1">div1<span id="s1">span1<span id="ss1">sspan1</span></span></div>
<div id="d2">div2<span id="s2">s2</span></div>
<div id="d3">div3<span id="s3">s3</span></div>
</body>
</html>
二、操作标签
JQuery与JS操作的区别
JQuery操作 JavaScript操作
addClass() classList.add() 添加指定的类名
removeClass() classLIst.remove() 移除指定的类名
hasClass() classList.contains() 判断当前类是否存在
togggleClass() classList.toggle() 判断当前类是否存在 存在则删除 不存在则添加
.css('样式名','样式值') style.样式名 = '样式值'
text() innerText() 获取text里所有的内容
html() innerHTML() 获取html里所有的内容
val() value() 取得匹配的内容值
[0].files files 取得匹配的文件值
atter() setAttribute() getAttribute() 获取匹配的属性值
prop() 获取属性值 可以动态变换(checked)
append() append() 追加内容
prepend() prepend() 放置到前标签前面
after() after() 追加内容
before() before() 放置到前标签前面
remove() remove() 从DOM中删除所有匹配的元素
empty() empty() 删除匹配的元素集合中所有的子节点
三、JQuery绑定事件
Js绑定事件
绑定方式1: 提现写好函数 标签内部指定点击的时候运行
<input type="button" value="点我" onclick="func1()">
function func1(){alert('我说点点我就点我啊？')}
绑定方式2: 先查询到标签 然后绑定使用 可以批量绑定
<button id="d1">点一点</button>
let butEle = document.getElementById('d1')
butEle.onclick = function(){alert('你个傻儿 你又点！')}
'''对于JS绑定事件不明白 可以查看前篇文章'''
JQ绑定事件
绑定方式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>
让标签自带的属性不执行有两种方法
1. return false
2. e.preventDefault()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form action="">
<p>再加把劲: <input type="text" name="info" placeholder="加油啦！！！"/></p>
<input type="submit" value="提交"/><button>but提交</button>
</form> '''我们输入的内容通过点击按钮可以发送出去刷新页面'''
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
我们也可以让标签之前的事件不执行 看方式1、2
<script>
$(':submit').click(function (e){
alert('一定要细心 千万不要慌!!!')
return false 方式1
e.preventDefault() 方式2
})
</script>
</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>
六、事件委托
我们在使用静态创建的标签的时候 一个JQ对象就可以使一样的标签拥有同样的效果
但是我们使用动态方法创建一个标签 默认情况JQ是不会对动态创建标签生效的 如果想生效需要事件委托
创建标签的两种方式
JS
document.createElement()
jQuery
$('<标签名>')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button>123</button><button>456</button>
<script>
# $('button').click(function(){alert('这个时候button都是我的！！！')}) 静态方法对动态创建的无效
'''如果想动态创建的标签也有用需要用到委托事件'''
$('body').on('click','button',function () {alert('这个时候button真的全部都是我的！！！')})
</script> # 此处可以body表示什么标签内的标签
</body>
</html>
七、Bootstrap框架
本地服务下载网站 https://www.bootcss.com/
在线CDN服务网站 https://www.bootcdn.cn/
Bootstrap在线CSS https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.css
Bootstrap在线JS https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.esm.js
提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入 bootstrap涉及到js的部分需要使用jQuery
图标组件 http://www.fontawesome.com.cn/
技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请
点点赞收藏+关注谢谢支持 !!!
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
