前端jQuery篇：操作标签、事件操作、动画效果、bootstrap

2022.5.2 jQuery基本使用

• jQuery操作标签
• jQuery事件操作
• jQuery动画效果
• 前端第三方框架bootstrap

一、jQuery操作标签

1、jQuery对象与标签对象

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"""
1.一定要明确你手上的标签到底是什么对象
	如果是原生js代码查找出来的对象,那么只能调用原生js的对象方法
	如果是jQuery查找出来的对象,那么只能调用jQuery对象方法

2.原生js对象与jQuery对象的关系(**)
	可以将jQuery对象看成是数组包了标签对象
	原生js对象就是标签对象
"""
		eg:
		['jason', ]
		'jason'
	$('#d1')[0]  # jQuery对象转原生js对象
	$(标签对象)  # 原生js对象转jQuery对象

2、jQuery操作标签

复制代码
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
32
// 原生js代码查找标签绑定的变量名推荐使用  xxxEle
// jQuery代码查找标签绑定的变量名推荐使用 $xxxEle

// 1.class操作
addClass();  // 添加指定的CSS类名。
removeClass();  // 移除指定的CSS类名。
hasClass();  // 判断样式存不存在
toggleClass();  // 切换CSS类名，如果有就移除，如果没有就添加。

DOM操作
	addClass()							classList.add()
	removeClass()							classList.remove()
	hasClass()							classList.contains()
	toggleClass()							classList.toggle()

// 2.样式操作
$divEle.css('border','5px solid black')  // DOM操作：tag.style.color="red"

// 3.位置操作
scrollTop()  // 获取匹配元素相对滚动条顶部的偏移

offset()  // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  // 获取匹配元素相对父元素的偏移
scrollLeft()  // 获取匹配元素相对滚动条左侧的偏移
/*
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
*/

3、文本值操作

复制代码
1
2
3
4
5
6
# jQuery								DOM
  text()								innerText
  html() 								innerHTML
  val() 								value
  转js对象								files
'''不写值就是获取 写了就是设置'''

4、属性操作

复制代码
1
2
3
4
5
6
7
8
9
10
$('div').attr('style')  # 获取第一个标签的style属性值
$('div').attr('class','c1')  # 批量设置单个
$('div').attr({'name':'jason','pwd':123})  # 批量设置多个
$('div').removeAttr('class')  # 批量移除

"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
	prop('checked')		  	 结果是布尔值
	prop('checked',false)    动态设置
"""

5、文档处理

复制代码
1
2
3
4
5
6
7
8
# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()

二、jQuery事件操作

1、事件操作

（1）绑定事件

复制代码
1
2
3
4
5
6
7
8
9
jQuery对象.click(function(){})
jQuery对象.change(function(){})

...hover(function(){...})
...blur(function(){...})
...focus(function(){...})
...keyup(function(){...})

.off( events [, selector ][,function(){}])  # 移除事件

（2）克隆操作

复制代码
1
2
3
4
5
6
7
8
<button id="d1">是兄弟就来砍我!!!</button>
  <script>
        $('#d1').click(function () {
        // $('body').append($(this).clone())  // 不克隆事件
        $('body').append($(this).clone(true))  // 克隆事件
        })
  </script>
// 括号里为true时可以克隆对象的属性，反之则没有

2、悬浮事件

复制代码
1
2
3
4
5
6
7
8
$('#d1').hover(function () {alert(123)})  // 悬浮操作

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

3、值监听事件

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
"""
jQuery绑定事件有两种方式
	$('#d1').click(function(){})
	$('#d1').on('click',function(){})  动态的
有时候第一种绑定事件的方式无法生效 那么就使用第二种
"""
<input type="text" id="d1">
<script>
    $('#d1').on('input',function () {
        console.log($(this).val())
    })
</script>

4、阻止后续事件

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
如果给已经有事件的标签绑定事件,那么会依次执行
如果想要取消后续时间的执行,可以使用两种方式阻止
方式1：（推荐使用）
$('#d1').click(function () {
     alert(123)
     return false  //  取消当前标签对象后续事件的执行
    })
方式2：（自带关键字）
	$('#d1').click(function (e) {
            alert(123)
            e.preventDefault()
    })

5、事件冒泡

复制代码
1
2
3
4
5
6
7
8
"""
在多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象,就是事件都会被触发
"""
# 解决方法
方式1:
	return false
方式2:
	e.stopPropagation()

6、事件委托

复制代码
1
2
3
4
5
6
7
8
"""
针对动态创建的标签 提前写好的事件默认是无法生效的
"""
语法：
$('body').on('事件类型','选择器',function(){})
eg：
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

三、jQuery动画效果

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 基本
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

bootstrap框架：

内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

https://code.z01.com/bootstrap/

推荐版本：

v3版本

基本使用：

必须先导入再使用：

1.本地导入

2.cdn导入

bootcdn

文件组成：

bootstrap需要导入两个文件

一个是css文件

一个是js文件

1、布局容器

复制代码
1
2
class = 'container'  		// 两边有留白
class = 'container-fluid'	// 没有留白

2、栅格系统

复制代码
1
2
3
4
5
6
class = 'row'  // 默认开设一行均分12行
class = 'col-md-n'  // 指定需要几份，一行最多12份
// 栅格参数可以做到响应式布局:xs sm md lg...

如果一行十二份用不完 可以调整位置
class= 'col-md-offset-3'

3、表格样式

复制代码
1
2
3
4
5
6
7
8
9
参考官网即可 有样式有源码 拷贝使用即可
// 表格样式
class="table table-hover table-striped table-bordered"
// 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"

4、表单样式

复制代码
1
2
3
4
5
.pull-left			左浮
.pull-right			右浮

class='form-control'
针对radio和checkbox不能加!!!

5、按钮与图片

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 按钮样式
class = 'btn'

# 按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>

# 按钮尺寸
<a href="" class="btn btn-sm">言多必失</a>
<a href="" class="btn btn-lg">言多必失</a>
<a href="" class="btn btn-block">言多必失</a>

6、图标样式

复制代码
1
2
3
<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/

总结：尤其是前端框架，几乎都是直接看官网拷贝样式即可

作业1：回到顶部操作

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div style="height: 1500px;width:100%;background-color: white">
    <button id="btn" style="height: 65px;width: 65px;color:pink;position: fixed;right:0;bottom:5px;border: 1px solid;"
            ;>
        点我回到顶部
    </button>
</div>
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 200) {
            $("#btn").slideDown(1000);
        } else {
            $("#btn").fadeOut();
        }
    });
    $("#btn").on("click", function () {
        $(window).scrollTop(0);
    })
</script>

</body>

作业2：全选操作

复制代码
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
<body>
<form action="">
    <input type="checkbox" id="any" checked value="全选">全选
    <input type="checkbox" class="c1" checked value="1">1
    <input type="checkbox" class="c1" checked value="2">2
    <input type="checkbox" class="c1" checked value="3">3
</form>
<script type="text/javascript">
    //     document.getElementById("any").onclick = function (){
    //     a = document.getElementById("any").checked
    //     if(a){
    //     $(".c1").prop('checked',true);
    // }else{
    //     $(".c1").prop('checked',false)
    // }
    // }

    $anyEle = $('#any')
    $anyEle.on('click',
    function (){
        a = document.getElementById("any").checked
        if(a){
        $(".c1").prop('checked',true);
    }else{
        $(".c1").prop('checked',false)
    }
    }
    )
</script>
</body>

作业3：删除单元格

复制代码
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
32
33
34
35
36
37
38
<body>
<table>
    <caption><h3>单身俱乐部</h3></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="t1">jason</td>
            <td class="t1">18</td>
            <td class="t1">打球</td>
            <td><input type="button" value="删除"></td>

        </tr>
        <tr>
            <td class="t2">tony</td>
            <td class="t2">21</td>
            <td class="t2">吃饭</td>
            <td><input type="button" value="删除"></td>
        </tr>
        <tr>
            <td class="t3">marry</td>
            <td class="t3">19</td>
            <td class="t3">健身</td>
            <td><input type="button" value="删除"></td>
        </tr>
    </tbody>
</table>
<script>
    $("[type=button]").on('click',function(){
        $(this).parent().parent().remove()
    })
</script>
</body>