前端-(6)

今日内容概览

• 筛选器方法
• 操作标签
• 事件
• Bootstrap框架

筛选器方法

//下一个标签
$("#id").next()  //下一个标签
$("#id").nextAll()  //后边所有标签
$("#id").nextUntil("#i2")  //后边所有标签,直到遇到id为i2的标签为止

//上一个标签
$("#id").prev()  //上一个标签
$("#id").prevAll()  //前边所有标签
$("#id").prevUntil("#i2")  //前边所有标签,直到遇到id为i2的标签为止

//父亲标签
$("#id").parent()  //当前标签的父标签
$("#id").parents()  // 当前标签的所有父辈标签
$("#id").parentsUntil("i2")  //当前标签的所有父辈标签,直到遇到id为i2的标签为止

//儿子标签与兄弟标签
$("#id").children()  //当前标签的所有子标签
$("#id").siblings()  //当前标签的所有兄弟标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

链式操作：在对象调用一个方法后会返回一个对象，可以基于返回值再调用方法，从而实现链式操作

操作标签

• 样式类

$("#id").addClass();  //添加指定的类
$("#id").removeClass();  //删除指定的类
$("#id").hasClass();  //判断指定的类是否存在
$("#id").toggleClass();  //如果标签存在指定类就删除,反之则添加
1
2
3
4

• CSS

$("#id").css('样式名','样式值')
1

• 位置操作

$("#id").offset();  //获取标签当前位置
$("#id").position();  //获取标签相对父标签的位置
$("#id").scrollTop();  //获取标签相对滚动条顶部的偏移
$("#id").scrollLeft();  //获取标签相对滚动条左侧的偏移
1
2
3
4

• 文本操作

//HTML代码
$(".cls").html();  //获取第一个匹配标签HTML内容
$(".cls").html(val);  //修改所有匹配标签的HTML内容

//text文本
$(".cls").text();  //获取所有标签内的文本内容
$(".cls").text(val);  //修改所有匹配标签的文本内容

//值
$(".cls").val();  //获取第一个匹配标签的值
$(".cls").val(val);  //设置所有匹配标签的值
1
2
3
4
5
6
7
8
9
10
11

• 属性操作

$(".cls").attr(attrName);  //返回第一个匹配标签的属性值
$(".cls").attr(attrName,attrValu);  //设置所有匹配标签的属性值
$(".cls").attr({k1:v1, k2:v2})  //为匹配标签设置多个属性值
$(".cls").removeAttr();  //删除所有匹配标签的指定属性

//用于选择框等可能会改变的属性
$(".cls").prop()  //返回第一个匹配标签的属性值
$(".cls").removeProp()  //删除所有匹配标签的属性
1
2
3
4
5
6
7
8

• 文档处理

//添加到指定标签内部末尾
$(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前边
//移除和清空元素
$("div").remove()  //移除指定标签以及后代
$("div").empty()  //清空指定标签内所有子标签,保留自身标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

事件

• jQuery绑定事件

//方式1:
$("#id").事件名(function(){事件代码})
//方式2:
$("#id").on("事件名",function(){事件代码})
1
2
3
4

• 常用事件

click：单击
hover：鼠标悬浮
blur：失去焦点
focus：获取焦点
change：文本域改变
keyup：抬起键盘按键
1
2
3
4
5
6

• 阻止后续事件
  给已经有事件的标签绑定事件，会先执行新绑定的事件，再执行原有的事件
  可以设置让标签只执行新绑定的事件

$(":submit").click(function(e){
	alert('按钮')
	
	return false  //方式1
	e.preventDefault()  //方式2
	})
1
2
3
4
5
6

• 事件冒泡
  涉及到标签嵌套并且有相同事件的时候，那么事件会逐层的往父标签反馈并执行
  可以设置让标签只执行当前事件，不会向上级反馈

$("p").click(function(e){
	alert("p标签")

	return false  //方式1
	e.stopPropagation()  //方式2
})
1
2
3
4
5
6

• 事件委托
  绑定的事件默认情况下是不会对动态创建的标签生效的
  如果想要让动态创建的标签也能使用到则需要使用事件委托

$("div").on("click","button",function(){alert("111")})
//事件委托是使用了事件冒泡,利用父标签去触发子标签的事件
//所以只能够委托标签内部的子标签
1
2
3

Bootstrap框架

提前写好了所有的标签样式，直接使用即可
使用前需要先导入
Bootstrap需要结合jQuery使用
具体使用方式查看官方文档即可：https://www.bootcss.com/
更多组件样式可以使用Font Awesome：http://www.fontawesome.com.cn/