jQuery具体操作，第三方框架(bootstrap框架)

李智强@

已于 2022-12-16 15:48:36 修改

阅读量603

点赞数

分类专栏：前端开发文章标签： jquery bootstrap html

于 2022-08-29 23:08:16 首次发布

本文链接：https://blog.csdn.net/lzq78998/article/details/126594020

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

筛选器方法

同级别往下查找

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")  //往下查找直到i2

同级别往上查找

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

查找父标签

$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil()

查找子标签或兄弟标签

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)

补充知识：

链式操作
```
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
```
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象

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()是相对于相对于父级元素的位移。

文本值操作

方法	用法
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。

文档处理操作

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

$(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(){})

悬浮事件

关键字：hover

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

$('#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框架

简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来.

版本

目前使用较广的是版本2、3和4，其中2的最新版本的是2.3.2，3的最新版本是3.4.1，4的最新版本是4.4.1

但是建议使用v3版本

基本使用

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

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="../../bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="../../bootstrap-3.4.1-dist/js/bootstrap.js"></script>

文件组成

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

==具体使用方法请参考官网https://www.bootcss.com/