文章目录

• 1 JQuery
• 2 快速上手
• 3 寻找标签
• • 3.1 直接寻找
  • 3.2 间接寻找
  • 案例：菜单转换
• 4 操作样式
• 5 值的操作
• • 案例：动态创建数据库
• 6 事件
• 案例：表格操作
• 7 前端整合
• • 案例

1 JQuery

一个 JavaScript 的第三方模块（第三方类库）。

• 基于 JQuery ，自己开发一个功能；
• 现成的工具依赖 JQuery ， 例如 BootStrap 的动态效果；

2 快速上手

1. 下载 JQuery：

   https://jquery.com/
   

2. 应用 JQuery：

   
   
   
   
   中国联通
   
   
   
   
   

3 寻找标签

3.1 直接寻找

1. ID 选择器

   中国联通
   $("#txt")
   

2. 样式选择器

   中国联通
   $(".c1")
   

3. 标签选择器

   中国联通
   $("h1")
   

4. 层级选择器

   
   $(".c1 .c2 a")
   

5. 多选择器

   中国联通
   福建联通
   $(".c1, .c2")
   

6. 属性选择器

   
   
   
   $("input[name='n1']")
   

3.2 间接寻找

$("#c1").prev() // 找前一个
$("#c1").next() // 找下一个
$("#c1").next().next() // 找下下个$("#c1").siblings() // 找所有的兄弟
$("#c1").parent() // 找父亲
$("#c1").children() // 找孩子
$("#c1").children(".p10") // 在所有孩子中寻找class=p10

案例：菜单转换

效果图：

上海
宝山区青浦区浦东新区普陀区
北京
海淀区朝阳区大兴区昌平区

4 操作样式

• addClass;
• removeClass;
• hasClass;

5 值的操作

1. 获取文本内容

   内容
   

   $("#c1").text() // 获取文本内容
   $("#c1").text("rest") // 设置文本内容
   

2. 获取输入内容

   $("#c2").val() // 获取用户内容
   $("#c2").val("rest") // 设置输入内容
   

案例：动态创建数据库

效果图：

6 事件

1. 在 JQuery 中可以删除某个标签：

   内容
   $("#c1").remove();
   

2. 案例：一点击就删除元素。

   
   
   
   百度
   谷歌
   搜狗
   
   
   

3. 当页面框架加载完成之后自动执行代码：

案例：表格操作

效果图：

ID
姓名
操作
1
rice
1
rice
1
rice

7 前端整合

案例

效果图：

Tooltip on leftTooltip on topTooltip on bottomTooltip on right

1. JavaScript 的引用顺序：

2. 有些插件需要搭配 JavaScript 使用， 因此 js 相关函数放在 JavaScript 引用之后， 并且记得使用 script 块：