标签：jQuery function 绑定 span 标签 Bootstrap div fn
jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架
一、jQuery查找标签
1.各种选择器
1.基本选择器
$('#id') id选择器
$('.c1') 类(class)选择器
$('tagName') 标签选择器
2.组合选择器
$('div.c1') 查找有c1 class类的div标签
$('div#d1') 查找id是d1的div标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p') 查找div里面的所有的后代p标签
$('div>p') 查找div里面的所有的儿子p标签
$('div+p') 查找div里面的所有的毗邻p标签
$('div~p') 查找div里面的所有的兄弟p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('input[username = 'jia']') 查找含有username属性名值等于jia的标签输入框
5.基本筛选器(了解)
:first 第一个
:last 最后一个
:eq(index) 索引等于index那个值
:even 匹配所有索引值为偶数的元素(从0开始)
:odd 匹配所有索引值为奇数的元素(从0开始)
:gt(index) 索引大于index那个值(从0开始)
:lt(index) 索引小于index那个值(从0开始)
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或者多个标签之内的标签
2.表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
代码练习
<!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" class="c" disabled value="明天要学习jango啦"></p>
<p>password: <input type="password" class="c" value="明天要学习jango啦"></p>
<p>data: <input type="date" class="c"></p>
<p>data1: <input type="email" class="c"></p>
<p>data2: <input type="radio" class="c"></p>
<p>data3: <input type="checkbox" class="c"></p>
<p>data4: <input type="submit" class="c"></p>
<p>data5: <input type="reset" class="c"></p>
<p>data6: <input type="button" class="c"></p>
<select name="" id="">
<option value="">111</option>
<option value="" selected>222</option>
<option value="">333</option>
</select>
</form>
</body>
</html>
$(':text')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':radio')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':password')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':checked')
jQuery.fn.init(3) [input.c, input.c, option, prevObject: jQuery.fn.init(1)]
disabled:就是这个标签只能看不能进行点击，输入等操作
selected和checked的区别：
checked在寻找的时候把selected也包含在内，selected在寻找的时候只能找到它自己，如果不要找到:selected那可以在前面设置一下标签过滤掉:selected
3.筛选器方法
1.下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2.上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3.父元素
$("#id").parent()
$("#id").parents() //查找当前元素的所有的父辈元素
$("#id").parentUntil("#i2") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4.儿子和兄弟元素
$("#id").children()
$("#id").siblings()
html:
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
<p>div>p
<a href="">div>p>a</a>
</p>
<span>div>span</span>
<p>div>p
<span id="d2">div>p>span</span>
</p>
</div>
<span>span</span>
<span>span</span>
</body>
let $pEle = $('#d1')
undefined
$pEle.next()
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]
$pEle.parent()
jQuery.fn.init [body, prevObject: jQuery.fn.init(1)]
$pEle.children()
jQuery.fn.init(3) [p, span, p, prevObject: jQuery.fn.init(1)]
二、jQuery操作标签
1.操作类js与jQuery的区别
js：
classList.add()
classList.remove()
classList.contains()
classList.toggle()
jQuery:
addClass() 添加元素
removeClass() 移除某个类的属性
hasClass() 验证是否包含某个属性
toggleClass() 有删无添加
2.位置操作
offset() 获取匹配当前窗口元素的位置
position() 获取匹配元素相对父元素的偏移量
scrollTop() 获取匹配元素相对滚动条的偏移量
scrollLeft() 获取匹配元素相对滚动条左侧的偏移量
offset()方法允许我们检索一个元素相对于文档的当前位置，而position()是相对于父级元素的位移
3.文本操作
js:
innerText 操作文本
innerHTML 操作文件与标签
values
files[0]
jQuery:
text() 操作文本内容
html() 操作文本内容与标签
val() 获取匹配元素的值
val(val) 设置所有匹配元素的值
jQuery对象[0].files
4.创建标签
document.createElement()
jQuery:
$('<a>')
5.jQuery获取标签
$('div').text()
'div\n div>p 好好学习，努力提高\n div>p>a\n \n div>span 以后可能会特别怀念现在这段时光\n div>p\n div>p>span 一群人并行，热血有梦想的青年\n \n '
$('div').html()
'div\n <p>div>p 好好学习，努力提高\n <a href="">div>p>a</a>\n </p>\n <span>div>span 以后可能会特别怀念现在这段时光</span>\n <p>div>p\n <span id="d2">div>p>span 一群人并行，热血有梦想的青年</span>\n </p>\n '
6.属性操作
js版本
setAttribute()
getAttribute()
removeAttribute()
jQuery:
attr(name,value) 设置属性
removeAttr(name) 移除属性
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()// 删除匹配的元素集合中所有的子节点。
三、事件
常用事件：
click(function () {})
hover(function () {})
blur(function () {})
fours(function () {})
change(function () {})
keyup(function () {})
js绑定事件：
标签对象.on事件名 = function(){
事件代码
}
btnEle.onclick = function(){alert(123)}
jQuery绑定事件：
方式1：
jQuery对象.事件名 = function(){
事件代码
}
$btnEle.onclick = function(){alert(123)}
方式2：
jQuery对象.on(事件名,function(){
事件代码
})
$btnEle.on(click,function(){alert(123)})
四、克隆事件
默认情况下只会克隆它的标签，不会克隆它的点击事件，所以只能第一个点击进行克隆，而后面克隆出来的不能进行点击克隆。但是如果想要更完美的克隆就是原封不动的全部克隆出来，就在clone()的括号里设置true
<button style="border: 1px solid cornflowerblue">小布丁</button>
<script>
$('button').click(function () {
$('body').append($(this).clone(true))
})
</script>
五、事件相关补充
1.取消后续事件 事件函数的最后return false即可
2.阻止事件冒泡 事件函数的最后return false即可
3.等待页面加载完毕再执行代码
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
4.事件委托 主要针对动态创建的标签也可以使用绑定的事件 $('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行
六、hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 2px solid black;
background-color: coral;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p>在我上面干嘛1</p> <!--所有p标签都有下面鼠标悬浮上去或移走的提示-->
<p>在我上面干嘛2</p>
<p>在我上面干嘛3</p>
<script>
$('p').hover(function (){
alert('来了老弟')
},
function (){
alert('慢走哦~')
}
)
</script>
</body>
</html>
七、jQuery动画效果
<style>
div {
position: relative;
display: inline-block;
border: 2px solid cornflowerblue;
margin-left: 100px;
border-radius: 15%;
}
div>i {
display: inline-block;
color: peru;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">觉得我棒的话，请给我点赞</div>
<script>
$("#d1").on("click",function () {
var newI = document.createElement('i')
newI.innerText="+10"
$(this).append(newI)
$(this).children('i').animate({
opacity:0
},100000)
})
</script>
</body>
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
八、Bootstrap页面框架
1.引入与应用
CDN：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
2.核心部分讲解
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class = "row" 一行均分12份
class = "col-md-8" 划分一行的12份
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
3.重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
4.组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
3.其他
标签：jQuery,
function,
绑定,
span,
标签,
Bootstrap,
div,
fn
From： https://www.cnblogs.com/zx0524/p/16964589.html