Day 54 前端 jQuery
文章目录
1、jQuery 更多操作
1.1、筛选器方法
同级下面标签
$("#id").next() //找同级下一个
$("#id").nextall() //找 同级下所有
$("#id").nextUntill("#d2") //找同级下至d2 标签
同级上面标签
$("#id").next() //找同级上一个
$("#id").nextAll() // 找同级上所有
$("#id").nextUntill("#d2") //找同级上所有 至d2标签为止
父级标签
$("#id").parent() //父标签
$("#id").parents() //所有 祖宗
$("#id").parentsUntil("#d1") //拿到 父标签 至d1为止
子级标签和兄弟标签
$("#id").children() //儿子们
$("#id").siblings();// 兄弟们
筛选器可以进行链式操作 对象调用一个方法后返回一个对象 所以可以连续 点方法
1.2、操作标签
样式类操作
jQuery操作 | 功能 | js操作 |
---|---|---|
addClass() | 添加 类名 | classList.add() |
removeCla() | 移除指定的类名 | classList.remove() |
hasClass() | 判断 类名存不存在 | classList.contains() |
toggleClass() | 切换css类名,如果有就移除,如果没有就添加 | classList.toggle() |
操作样式
//jQuery 操作
$div1Ele.css('样式名','样式值')
$div1Ele.css('color','red')
//DOM操作
div1Ele.style.样式名="样式值"
div1Ele.style.color="red"
位置操作
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
获取 标签 内值
jQuer | 作用 | js |
---|---|---|
.text() | 获取内部文本 | .innerText() |
.html | 获取标签内所有信息 | innerHTML |
.val() | 获取标签内value值 | Value |
[0].files | 获取文件标签 文件对象(jquery也用js方法) | .file |
属性操作
jQuery | 作用 | js |
---|---|---|
attr | 设置属性和获取属性值(动态变化的无法判断) | setAttribute/getAttribute |
prop() | (获取动态属性判断和修改 ,checked) |
文档处理
jQuery | 作用 |
---|---|
append() | 尾部追加 |
prepend() | 添加到开头 |
after() | 添加到同级后面 |
before() | 添加到同级前面 |
删除移除指定元素
//移除标签
remove()
//清空标签
repty()
2、事件
js绑定事件
标签对象.on事件名 =function(){事件代码}
btnEle.onclick = function(){alert(123)}
2.1、jQuery绑定事件
//方式一:
jQuery对象。事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
//方式二:
jQuery对象.on('事件名',function(){事件体代码})
$btnEle.on('click',function(){alter(123)})
- 有时候 使用jQuery 的方式一 绑定事件如果无法触发 可以切换方式二
jQuery 绑定事件 可以找到多个标签 一起绑定
2.2、事件克隆 实操
clicl
clone()
<body>
<button id="d1" class="c1">影分身</button>
<script>
let $btnEle = $('#d1')
$btnEle.on('click',function (){
$('body').append($(this).clone(true))}) //一模一样克隆 (绑定的事件也跟着克隆)可以在里面加true
</script>
</body>
2.3、监听事件
input propertychange
input
利用on形式 绑定事件 可以简写
<body>
<input type="text" id="d1">
<script>
$('#d1').on('input',function (){console.log(this.value)})
</script>
</body>
2.4、悬浮事件
$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, // 悬浮触发
function () {alert(123)} // 移走触发
)
2.5、阻止后续事件
能够触发form表单提交数据动作的标签有两个
<input type='submit'>
// 当button放在from 表单中 也会有提交内容的功能
<button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行的默认的
我们也可以让标签之前的事件 不执行
return false
$(':submit').click(function (e){
alert('123')
//方式一
return false
//方式二
e.preventDefault()
})
2.6、事件冒泡
涉及到标签嵌套 并且父级标签有相同的事件的时候 那么会逐级往上反馈并执行
$("span").click(function(e){
alert("span")
//方式一:
return false
//方式二:
e.stopPropagation()
})
2.7、事件委托
创建标签
//JS 创建标签 document.createElement() //jQuery $('<标签>')
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效 需要事件委托
// 可以将事件的也绑定给 动态添加进去的 button标签
$('div').on('click','button',function(){
alert('事件委托')
})
3、botstrap框架
提前写号的所有标签样式 直接拷贝使用的即可
使用之前需要先导入 bootstrap涉及到js的部分需要使用jQuery
3.1、布局容器 和栅格系统
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
栅格系统
class = 'row' //默认开设一行平均分12份
class = 'col-md-n' //指定需要几份 n为份数
// 利用 两边 空行 居中
col-md-offset-3
3.3、表格样式
// 表格样式
class="table table-hover table-striped table-bordered"
// 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
<body>
<div class="container c1">
<div class="row">
<h1 class="text-center">用户数据</h1>
<table class="table table-bordered table-hover ">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>kk</td>
<td>123</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
<td>ming</td>
<td>321</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
3.4、表单
表单样式
class="form-control" //radio 和checkbox 加了很丑
<p>username:<input type="text" id="d1" class="form-control "></p>
按钮样式
class = 'btn'
class属性 | 作用 |
---|---|
btn-info | 蓝色 |
btn-primary | 深蓝 |
btn-success | 绿色 |
btn-danger | 红色 |
btn-sm | 变小 |
btn-lg | 变大 |
btn-block | 拉长 |
<div class="row">
<h1 class="text-center">用户注册</h1>
<form action="">
<p>username:<input type="text" id="d1" class="form-control "></p>
<p>password:<input type="password" class="form-control"></p>
<input type="submit" name="" id="" class="btn btn-info btn-block">
</form>
<div class="row">