jQuery入门

一、jQuery3.3.1

1、jQuery是什么？

简介：jQuery是一个快速、简洁的JavaScript框架，于2006年1月由John Resig发布。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2、为什么要学习jQuery？

正如简介所说，jQuery的设计宗旨是“write Less，Do More”，可以简化JavaScript开发；用更少的代码做更多的事。

3、哪些情况下使用jQuery

jQuery一般应用于中大型网站开发

是一些前端框架的基础

4、怎么使用jQuery

使用工具：HBuilder

下载jQuery库，将其引入到项目中，调用外部js

二、案例1：点击按钮获取输入框的值（js方式与jQuery方式对比）

js代码：

jQuery代码：

三、css

1、单个属性访问

对象.css(“width”);

2、单个属性修改

对象.css(“width”,“100px”)

3、多个属性修改

对象.css({‘width’:‘100px’,‘height’:‘100px’});

四、案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色

演示：

html代码：

五、层次选择器：查找所有元素，查询子元素  以及案例3选择某个元素下面的所有元素和子元素 改变其样式

1、selector1,selector2：并集，即两者相同的部分

2、selector1 selector2：交集，即两者的和

3、例如：div>span 是找到div下的子级span即“他们的内部爱情故事”。“单身羡慕”不是。

4、例如：p+div 是找和p同一级的span 即 “单身羡慕”  和   “这些人的外部爱情故事”

html代码：

这是第一个外面的段落

2.3过滤选择器

• 0-单身强
• 1-好男人朱
• 2-高冷男
• 3-逗比波
• 4-清高刘

JQuery代码：

六、过滤选择器 及其 案例

html代码：

这是第一个外面的段落

2.3过滤选择器

• 0-单身强
• 1-好男人朱
• 2-高冷男
• 3-逗比波
• 4-清高刘

JQuery代码：

七、案例：表格隔行换色

html代码：

案例5：表格隔行换色

JQuery代码：

获取偶数下标的元素:even、获取奇数下标的元素:odd

八、表单选择器 及其 案例

html代码：

2.4 表单选择器

jQuery代码：

九、总结

使用jQuery的感觉，比js的代码量相对减少，但是代码量少做的功能一点不少，还是比较好上手的。今天的学习笔记分享就到这，886~

HTML jQuery

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。