JQuery -- 第九课

莘薪2024-11-26 22:33

文章目录

前言

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

一、JQuery是什么？

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

二、JQuery的使用步骤

1.引入

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

2.书写位置

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

3. 表示方法

三、JQuery选择器

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

1.层级选择器

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

javascript 复制代码 
// 隐式迭代
<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. 排他思想

javascript 复制代码 
<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. 精品展示

javascript 复制代码 
<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>

链式编程

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

四、jQuery样式操作

1. 修改样式

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

javascript 复制代码 
<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）

javascript 复制代码 
$(".nav > li"). hover(function() {
	$(this). children("ul"). slideToggle(200);
}

3. 停止

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

javascript 复制代码 
$（"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方法

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

2. attr方法

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

七、jQuery内容操作

八、元素操作

1. 遍历元素

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

2. 创建元素

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

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

3. 添加元素

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

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

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

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

4. 清除元素

删除元素 ：删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节素点两种情况。

九、尺寸和位置操作

1. 尺寸方法

尺寸操作：在jQuery中，尺寸方法用来获取或设置元素的宽度和高度。

十、事件操作

1. 事件绑定

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

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

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

1.一次绑定一个事件

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

2.一次性绑定多个事件

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

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

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

2. 事件委派

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

javascript 复制代码 
<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（）方法添加的事件处理程序

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

5. 触发事件

  1. 事件方法触发事件：jQuery中的事件方法在调用时如果传参数，表示绑定事件，如果不传参数，表示触发事件。
javascript 复制代码 
//绑定事件
$（"div"）.click（function（）{
	alert（"hello"）；
}）；
//触发事件
$（"div"）.click（）；
  1. trigger（）方法触发事件：使用trigger（）方法可以触发指定事件。
javascript 复制代码 
// 绑定事件
$（"div"）.click（function（）{
	alert（"hello"）；
}）；
//触发事件
$（"div"）.trigger（"click"）；

6. 事件对象

  1. 事件对象：当事件被触发时，就会有事件对象的产生，在事件处理函数中可以使用参数来接收事件对象。
javascript 复制代码 
<div>点我</div>
<script>
$（"div"）.on（"click"，function（event）{
	console.log（event）；
}）；
</script>
  1. 事件对象：通过事件对象阻止事件冒泡行为。
javascript 复制代码 
event.stopPropagation（）；// 阻止事件冒泡
  1. 事件对象：通过事件对象阻止默认事件行为。
javascript 复制代码 
<a href="1.html">点我</a>
$（document）.on（"click"，function（）{
	console.log（"单击了document"）；
}）；
$（"a"）.on（"click"，function（event）{
	event.preventDefault（）；
	//阻止事件默认行为
	console.log（"单击了a"）；
}

总结

本栏目到这里基本就结束了,感谢这么多天大家的陪伴,后续有想要了解的,或者需要什么类型的教程的可以私信我,我会在能力范围之内尽力满足大家的要求!

相关推荐
cnsxjean18 分钟前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_56736 分钟前
uniapp中使用uni-forms实现表单管理，验证表单
前端·javascript·uni-app
沉浮yu大海1 小时前
Vue.js 组件开发：构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆1 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
sunly_1 小时前
Flutter：启动屏逻辑处理02：启动页
android·javascript·flutter
EasyNTS1 小时前
H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅，可以考虑的解决方案
javascript·音视频·h.265
好青崧2 小时前
CSS 样式入门：属性全知晓
前端·css·tensorflow
在路上`2 小时前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
光头程序员2 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总0404 - matlab m_map地学绘图工具基础函数 - 设置网格05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库07鸿蒙LiteOS+Hi3861智能家居网关设计：MQTT协议实现与代码示例08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10centos下静态链接：/usr/bin/ld: cannot find -l某某某