Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）

最新推荐文章于 2024-03-05 14:58:20 发布

絵飛的

最新推荐文章于 2024-03-05 14:58:20 发布

阅读量1.9k

点赞数

分类专栏：前端HTML+css+js 文章标签：前端 jquery bootstrap

本文链接：https://blog.csdn.net/fonnt/article/details/124543251

版权

前端HTML+css+js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今日学习目标

继续学习jQuery框架剩余的内容。

学习内容

jQuery操作标签
jQuery事件操作
jQuery动画效果(了解)
前端第三方框架(一种基础)

一、jQuery操作标签

class操作

方法	用法
addClass()	添加指定的CSS类名
removeClass()	移除指定的CSS类名
hasClass()	判断样式存不存在
toggleClass()	切换CSS类名，如果有就移除，如果没有就添加

语法结构

$("#i1").addClass();  // jQuery对象可以使用jQuery的方法

样式操作

语法结构

jQuery对象.css('属性名','属性值');

举例

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作

方法	用法
offset()	获取匹配元素在当前窗口的相对偏移或设置元素位置
position()	获取匹配元素相对父元素的偏移
scrollTop()	获取匹配元素相对滚动条顶部的偏移
scrollLeft()	获取匹配元素相对滚动条左侧的偏移

注意.
offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

一个回到顶部的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Title</title>
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 3000px;
            }

            .header{
                width: 100%;
                height: 80px;
                display: flex;
                background-color: #b5bce6;
                font-size: 30px;
                color: #545bb6;
                padding:20px 883px 40px 900px
            }

            .goTop{
                width: 50px;
                height: 50px;
                background-color: #b5bce6;
                font-size: 20px;
                text-align: center;
                line-height: 25px;
                color: #545bb6;

                position: fixed;
                bottom: 50px;
                right: 50px;
                display: none;
            }
        </style>
</head>
<body>
    <div class="header">顶部通栏</div>
    <div class="goTop">回到顶部</div>

    <script>
        let header = document.querySelector('.header')
        let goTop = document.querySelector('.goTop')
        window.onscroll = function () {
            let height = document.documentElement.scrollTop || document.body.scrollTop
            if(height >= 300){
                header.style.top = '0px'
                goTop.style.display = 'block'
            }else {
                header.style.top = '-80px'
                goTop.style.display = 'none'
            }
        }
        goTop.onclick = function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        }
    </script>
</body>
</html>

文本值操作

方法	用法
html()	取得第一个匹配元素的html内容
html(val)	设置所有匹配元素的html内容
text()	取得所有匹配元素的内容
text(val)	设置所有匹配元素的内容
val()	取得第一个匹配元素的当前值
val(val)	设置所有匹配元素的值
val([val1, val2])	设置多选的checkbox、多选select的值

属性操作

用于ID等或自定义属性：

attr(attrName)
返回第一个匹配元素的属性值
attr(attrName, attrValue)
为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})
为所有匹配元素设置多个属性值
removeAttr()
从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop()
获取属性
removeProp()
移除属性

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。

prop和attr的区别：

attr全称attribute(属性)
prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

总结：

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

举例

实现简单的全选、反选、取消全选功能


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选全不选反选</title>
	</head>
	<body>
		
		<br />
		<input type="button" id="checkBtn" value="全选"/>
		<input type="button" id="cancelBtn" value='取消全选' />
		<input type="button" id='inverseBtn' value="反选">
<br />
		<input type="checkbox" name="hobbies" />吃饭
<br />
		<input type="checkbox" name="hobbies" />睡觉
<br />
		<input type="checkbox" name="hobbies" />打豆豆
<br />
		<input type="checkbox" name="hobbies" />蹦迪
	</body>
	<script>
		var rBtn = document.getElementById('rBtn');
		var cBtn = document.getElementById('checkBtn');
		var hobbyObj = document.getElementsByName('hobbies');
		var cancelBtn = document.getElementById('cancelBtn');
		var inverseBtn = document.getElementById('inverseBtn');
		// 全选
		cBtn.onclick = function(){
			for(var i = 0 ; i < hobbyObj.length ;i++ ){
				hobbyObj[i].checked = true; 
			}
		}
		// 取消全选
		cancelBtn.onclick = function() {
			for(var i = 0 ; i < hobbyObj.length ;i++ ){
				hobbyObj[i].checked = false; 
			}
		}
		// 反选
		inverseBtn.onclick = function(){
			for(var i = 0 ; i < hobbyObj.length;i++){
				if(hobbyObj[i].checked == true){
					hobbyObj[i].checked = false;
				}else {
					hobbyObj[i].checked = true;
				}
			}
		}
		
	</script>
</html>

文档处理操作

添加到指定元素内部的后面

 $(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()// 删除匹配的元素集合中所有的子节点。

二、jQuery事件操作

jQuery绑定

jQuery对象.click(function(){})
jQuery对象.change(function(){})

悬浮事件

鼠标悬浮上去和移开各自触发一次

$('#d1').hover(function () {alert(123)})

如果想要将悬浮和移开分开执行不同的操作需要写两个函数

$('#d1').hover(
	function () {alert(123)},  # 悬浮触发
	function () {alert(123)}  # 移走触发
)

值监听事件

jQuery绑定事件有两种方式

$('#d1').click(function(){})
$('#d1').on('click',function(){})

有时候第一种绑定事件的方式无法生效那么就使用第二种

<input type="text" id="d1">
<script>
	$('#d1').on('input',function () {
    	console.log($(this).val())
 })
</script>

阻止后续事件

如果给已经有事件的标签绑定事件那么会依次执行
如果想要取消后续时间的执行可以使用两种方式阻止

方式1(推荐使用)

$('#d1').click(function () {
 alert(123)
 return false  //  取消当前标签对象后续事件的执行
})

方式2(自带关键字)

$('#d1').click(function (e) {
        alert(123)
        e.preventDefault()
})

阻止事件冒泡

在多个标签嵌套的并且都有相同事件的情况下会出现逐级汇报的现象

方式1
函数最后添加
```
return false
```
方式2
函数内加入方法：
```
e.stopPropagation()
```

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

三、jQuery动画效果

// 基本
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使用即可

bootstrap版本

推荐使用v3版本

基本使用

必须先导入后使用
1.本地导入
2.cdn导入
	bootcdn
bootstrap需要使用jQuery来实现动态效果

使用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <!-- Bootstrap CDN导入 -->
    
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Title</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

文件组成

bootstrap需要导入两个文件
一个是css文件
一个是js文件

具体使用方法请参考官方文档

絵飛的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）

今日学习目标继续学习jQuery框架剩余的内容。文章目录今日学习目标学习内容一、jQuery操作标签class操作样式操作位置操作文本值操作属性操作文档处理操作二、jQuery事件操作jQuery绑定悬浮事件值监听事件阻止后续事件阻止事件冒泡事件委托三、jQuery动画效果四、前端第三方框架(bootstrap框架)bootstrap框架bootstrap版本基本使用文件组成学习内容jQuery操作标签jQuery事件操作jQuery动画效果(了解)前端第三方框架(一种基础)
复制链接

扫一扫