Day 54 前端 jQuery

文章目录

Day 54 前端 jQuery

1、jQuery 更多操作

1.1、筛选器方法

同级下面标签

$("#id").next()  //找同级下一个
$("#id").nextall()  //找 同级下所有
$("#id").nextUntill("#d2")  //找同级下至d2 标签 
1
2
3

同级上面标签

$("#id").next()  //找同级上一个
$("#id").nextAll()  // 找同级上所有
$("#id").nextUntill("#d2")  //找同级上所有 至d2标签为止
1
2
3

父级标签

$("#id").parent()  //父标签
$("#id").parents()  //所有 祖宗
$("#id").parentsUntil("#d1")  //拿到 父标签 至d1为止 
1
2
3

子级标签和兄弟标签

$("#id").children()  //儿子们
$("#id").siblings();// 兄弟们
1
2

筛选器可以进行链式操作对象调用一个方法后返回一个对象所以可以连续点方法

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"
1
2
3
4
5
6
7

位置操作

scrollTop() // 获取匹配元素相对滚动条顶部的偏移
1

获取标签内值

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()
1
2
3
4
5

2、事件

js绑定事件

标签对象.on事件名 =function(){事件代码}
btnEle.onclick = function(){alert(123)}
1
2

2.1、jQuery绑定事件

//方式一：
jQuery对象。事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})

//方式二：
jQuery对象.on('事件名',function(){事件体代码})
$btnEle.on('click',function(){alter(123)})
1
2
3
4
5
6
7

有时候使用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>
1
2
3
4
5
6
7
8

2.3、监听事件

input propertychange
input 利用on形式绑定事件可以简写

<body>
<input type="text" id="d1">

<script>
  $('#d1').on('input',function (){console.log(this.value)})
</script>
</body>
1
2
3
4
5
6
7

2.4、悬浮事件

$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)},  // 悬浮触发
function () {alert(123)}  // 移走触发
)
1
2
3
4
5
6
7

2.5、阻止后续事件

能够触发form表单提交数据动作的标签有两个

<input type='submit'>

// 当button放在from 表单中 也会有提交内容的功能
<button></button>   
1
2
3
4

给已经有事件的标签绑定事件会先执行绑定的再去执行的默认的

我们也可以让标签之前的事件不执行
return false

$(':submit').click(function (e){
            alert('123')
    		//方式一
            return false
    	//方式二
            e.preventDefault()
        })
1
2
3
4
5
6
7

2.6、事件冒泡

涉及到标签嵌套并且父级标签有相同的事件的时候那么会逐级往上反馈并执行

$("span").click(function(e){
    alert("span")
    //方式一：
    return false
    //方式二：
    e.stopPropagation()
})
1
2
3
4
5
6
7

2.7、事件委托

创建标签

//JS 创建标签
document.createElement()

//jQuery
$('<标签>')
1
2
3
4
5

事件绑定默认情况下是不会对动态创建的标签生效的如果想生效需要事件委托

// 可以将事件的也绑定给 动态添加进去的 button标签
$('div').on('click','button',function(){
    alert('事件委托')
})
1
2
3
4

3、botstrap框架

提前写号的所有标签样式直接拷贝使用的即可

使用之前需要先导入 bootstrap涉及到js的部分需要使用jQuery

3.1、布局容器和栅格系统

布局容器

class = 'container'  					两边有留白
class = 'container-fluid'			没有留白
1
2

栅格系统

class = 'row' //默认开设一行平均分12份
class = 'col-md-n' //指定需要几份 n为份数

// 利用 两边 空行 居中
col-md-offset-3
1
2
3
4
5

3.3、表格样式

// 表格样式
class="table table-hover table-striped table-bordered"
// 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
1
2
3
4
5
6
7
8

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3.4、表单

表单样式

class="form-control"  //radio 和checkbox 加了很丑

<p>username:<input type="text" id="d1" class="form-control "></p>
1
2
3

按钮样式

class = 'btn'
1

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">
1
2
3
4
5
6
7
8
9
10

相关阅读:
VMware——WindowServer2012R2安装jdk1.8及环境变量配置
闲暇之际敲敲代码，记录Leetcode刷题Day-01
SQL 增删改查
基于Protege的知识建模实战
k8s pod访问策略及使用service访问集群中的pod
计算机体系架构初步入门
SQL入门
Java 流(Stream)、文件(File)和IO
【mysql体系结构】--mysql的配置文件
Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）

原文地址：https://blog.csdn.net/weixin_71967396/article/details/126592936

Day 54 前端 jQuery