今日学习目标

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

---

文章目录

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

---

学习内容

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

一个回到顶部的案例

    
    
    
    
    
    


    
顶部通栏
    
回到顶部

    

文本值操作

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

属性操作

用于ID等或自定义属性：

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

用于checkbox和radio

1. prop()
   获取属性
2. 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。

举例

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

	
		
		
	
	
		
		

		
		
		


		吃饭


		睡觉


		打豆豆


		蹦迪
	
	

文档处理操作

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

    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B
   

2. 添加到指定元素内部的前面

    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B
   

3. 添加到指定元素外部的后面

    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面
   

4. 添加到指定元素外部的前面

    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
   

5. 移除和清空元素

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

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

阻止后续事件

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

1. 方式1(推荐使用)

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

2. 方式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来实现动态效果

使用案例

    
    
    
    
    
    
    
    
  
  
    
你好，世界！
  

文件组成

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

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

---