JQuery -- 第九课

文章目录

前言
一、JQuery是什么？
二、JQuery的使用步骤
- 1.引入
- 2.书写位置
- 3. 表示方法
三、JQuery选择器
- 1.层级选择器
- 2. 筛选选择器
- 3. 排他思想
- 4. 精品展示
四、jQuery样式操作
- 1. 修改样式
- 2.类操作
- - 1. 添加
  - 2. 移除
  - 3. 切换
五、jQuery动画
- 1. 显示和隐藏
- 2. 滑动
- - 1. slide
  - 2. hover
- 3. 停止
- 4.淡入淡出
- 5. 自定义动画
六、jQuery属性操作
- 1. prop方法
- 2. attr方法
七、jQuery内容操作
八、元素操作
- 1. 遍历元素
- 2. 创建元素
- 3. 添加元素
- 4. 清除元素
九、尺寸和位置操作
- 1. 尺寸方法
十、事件操作
- 1. 事件绑定
- - 1.一次绑定一个事件
  - 2.一次性绑定多个事件
  - 3.为不同的事件绑定相同的处理函数
- 2. 事件委派
- 3. 案例 -- 留言板
- 4. 事件解绑
- 5. 触发事件
- 6. 事件对象
总结

前言

首先,很抱歉本专栏的最后一个内容JQuery拖到现在才发出来,因为最近事情真是有点多,来不及持续更新,望谅解!

一、JQuery是什么？

jQuery：jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。

二、JQuery的使用步骤

1.引入

<script'src="jquery-3.3.1.min.js"></script>
<script>
	$("div").hide()；//隐藏div元素
</script>

2.书写位置

//语法1（简写形式）
$（function（）{
	// 页面DOM加载后执行的代码
	}）；
//语法2（完整形式）
$（document）.ready（function（）{
	//页面DOM加载后执行的代码
	}）；

3. 表示方法

在这里插入图片描述

三、JQuery选择器

jQuery选择器和css选择器非常类似(有如下几种常用的选择器)

请添加图片描述

1.层级选择器

jQuery层级选择器：层级选择器可以完成多层级元素之间的获取。

请添加图片描述

// 隐式迭代
<div>第1个div</div><div>第2个div</div><div>第3个div</div><div>第4个div</div>
<script>
	console.log（$（"div"））；
	// 使用css（）方法修改元素CSS样式，将背景色设为pink
	$（"div"）.css（"background"，"pink"）；//对所有的div进行相同操作
</script>

2. 筛选选择器

筛选选择器：筛选选择器用来筛选元素，通常和别的选择器搭配使用。

请添加图片描述
常用筛选方法

请添加图片描述

3. 排他思想

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        $(function(){
            // 隐式迭代
            $('button').click(function(){
                $(this).css({'background': 'skyblue'});
                $(this).siblings().css({'background': ''}); // 调节其他兄弟节点
            })
        })
    </script>
</body>

4. 精品展示

<script>
    $（“#left li”）.mouseover（function（）{
        //鼠标指针经过左侧的li 
        var index = $（this）.index（）；
        //得到当前li的索引
        console.log（index）；
        //让右侧盒子相应索引的图片显示出来
        $（"#content div"）.eq（index）.show（）；
        //将其他图片隐藏起来
        $（"#content div"）.eq（index）.siblings（）.hide（）；
	}）；
</script>

链式编程

$（"#left li"）.mouseover（function（）{
	var index = $（this）.index（）；
	//用一行代码完成当前索引元素的显示和其他兄弟元素的隐藏
	$（"#content div"）.eq（index）.show（）.siblings（）.hide（）；
}）；

四、jQuery样式操作

1. 修改样式

获取样式：css（）方法接收参数时只写样式名，则返回样式值。

<style>
    div{
        width：200px；
        height：200px；
        background-color：'pink'；
    }
</style>

<div></div>

<script>
    console.log（$（"div"）.css（"width"））；//结果为：200px
</script>

2.类操作

1. 添加

addClass（）添加类：基本语法$（selector）.addClass（className）

2. 移除

removeClass（）移除类：基本语法$（selector）.removeClass（className）

3. 切换

toggleClass（）切换类：基本语法$（selector）.toggleClass（className，switch）

五、jQuery动画

1. 显示和隐藏

请添加图片描述

2. 滑动

1. slide

请添加图片描述

2. hover

hover（）方法实现上述功能：基本语法$（selector）.hover（[over.]out）

$(".nav > li"). hover(function() {
	$(this). children("ul"). slideToggle(200);
}

3. 停止

stop（）方法：基本语法$（selector）.stop（stopAll，goToEnd）；

$（"div"）.stop（）；//停止当前动画，继续下一个动画
$（"div"）.stop（true）；//清除div元素动画队列中的所有动画
$（"div"）.stop（true，true）；//停止当前动画，清除动画队列中的所有动画
$（"div"）.stop（false，true）；//停止当前动画，继续执行下一个动画

4.淡入淡出

请添加图片描述

5. 自定义动画

animate（）方法：基本语法$（selector）.animate(params[,speed] [,easing] [ fn])

六、jQuery属性操作

1. prop方法

prop（）方法：prop（）方法用来设置或获取元素固有属性值。
prop（）方法获取属性值语法：$（selector）.prop（“属性名”）。
prop（）方法设置属性值语法：$（selector）.prop（“属性”，“属性值”）

2. attr方法

attr（）方法：attr（）用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性。
attr（）方法获取属性值语法：$（selector）.attr（“属性名”）。
attr（）方法设置属性值语法：$（selector）.attr（“属性”，“属性值”）

七、jQuery内容操作

请添加图片描述

八、元素操作

1. 遍历元素

遍历元素：基本语法$（selector）.each（function（index，domEle））；
1. 该方法的参数是一个函数。这个函数将会在遍历时调用
2. 在函数中，index参数是每个元素的索引号
3. domEle是每个DOM元素的对象（个元素调用一次不是jQuery对象）
4. 如果要想使用jQuery方法，需要将这个DOM对象转换成为jQuery对象，即$（domEle）。
$. e a c h （）方法：基本语法$ .each（Object，function（index，element）

2. 创建元素

创建元素：通过jQuery可以很方便地动态创建一个元素，直接在“$（）”函数中传入一个HTML字符串即可进行创建。

$（function（）{
	var li = $（"<li>我是后来创建的li</li>"）；//创建元素
    console.log（li）；//将元素输出到控制台
}）；

3. 添加元素

内部添加：内部添加的方式可以实现在元素内部添加元素，并且可以放到内部的最后面或者最前面。

var li = $（"<li>我是后来创建的li</li>"）；
$（"ul"）.append（li）；//内部添加并且放到内部的最后面
$（"ul"）.prepend（li）；//内部添加并且放到内部的最前面

外部添加：外部添加就是把元素放入目标元素的后面或者前面，通过after（）和before（）方法来实现。

var div = $（"<div>我是后来创建的div</div>"）；
$（".test"）.after（div）；//div放入到目标元素的后面
$（".test"）.before（div）；//div放入到目标元素的前面

4. 清除元素

删除元素：删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节素点两种情况。
请添加图片描述

九、尺寸和位置操作

1. 尺寸方法

尺寸操作：在jQuery中，尺寸方法用来获取或设置元素的宽度和高度。
请添加图片描述

十、事件操作

1. 事件绑定

通过**on()**方法绑定事件：on()方法绑定单个事件

通过事件方法绑定事件：已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click（）、change（）等。
请添加图片描述

<div>绑定事件</div>
<script>
    $（"div"）.click（function（）{
    	$（this）.css（"background"，"purple"）；
    }）；
    $（"div"）.mouseenter（function（）{
    	$（this）.css（"background"，"skyblue"）；
    }）；
</script>

1.一次绑定一个事件

// 一次绑定一个事件
$（"div"）.on（"click"，function（）{
	$（this）.css（"background"，"yellow"）
}

2.一次性绑定多个事件

// 一次绑定多个事件
$（"div"）.on（{
	mouseenter：function（）{
    	$（this）.css（"background"，"skyblue"）；
    }，
    click：function（）{$（this）.css（"background"，"purple"）；}，
    mouseleave：function（）{
    	$（this）.css（"background"，"blue"）；
    }

3.为不同的事件绑定相同的处理函数

//为不同事件绑定相同的事件处理函数
$（"div"）.on（"mouseenter mouseleave"，function（）{
	$（this）.toggleClass（"current"）；
}）；

2. 事件委派

事件委派：把原本要给子元素绑定的事件绑定到父元素上，这就表示把子元素的事件委派给父元素

<ul>
	<li>我是第1个li</li>
	<li>我是第2个li</li>
</ul>
<script>
	$（"ul"）.on（"click"，"li:first-child"，function（）{
		alert（"单击了li"）；//单击第1个li会触发此事件
	}）；
</script>

3. 案例 – 留言板

案例分析：

① 编写一个简单的留言板页面

② 单击“发布”按钮，显示用户发布的留言

③ 在每个留言的右边提供一个“删除”链接，用来删除留言

4. 事件解绑

off()方法：该方法可以移除通过on（）方法添加的事件处理程序

$（'p'）.off（）；//解除p元素上的所有事件处理程序
$（'p'）.off（'click'）；//解绑p元素上的单击事件
$（'ul'）.off（'click'，'li'）；//解绑事件委派

5. 触发事件

事件方法触发事件：jQuery中的事件方法在调用时如果传参数，表示绑定事件，如果不传参数，表示触发事件。

//绑定事件
$（"div"）.click（function（）{
	alert（"hello"）；
}）；
//触发事件
$（"div"）.click（）；

trigger（）方法触发事件：使用trigger（）方法可以触发指定事件。

// 绑定事件
$（"div"）.click（function（）{
	alert（"hello"）；
}）；
//触发事件
$（"div"）.trigger（"click"）；

6. 事件对象

事件对象：当事件被触发时，就会有事件对象的产生，在事件处理函数中可以使用参数来接收事件对象。

<div>点我</div>
<script>
$（"div"）.on（"click"，function（event）{
	console.log（event）；
}）；
</script>

事件对象：通过事件对象阻止事件冒泡行为。

event.stopPropagation（）；// 阻止事件冒泡

事件对象：通过事件对象阻止默认事件行为。

<a href="1.html">点我</a>
$（document）.on（"click"，function（）{
	console.log（"单击了document"）；
}）；
$（"a"）.on（"click"，function（event）{
	event.preventDefault（）；
	//阻止事件默认行为
	console.log（"单击了a"）；
}