JQuery介绍

前言正文1、JQuery 快速上手1.1 下载 JQuery1.2 应用 JQuery

2、寻找标签（直接）2.1 ID选择器2.2 样式选择器2.3 标签选择器2.4 层级选择器2.5 多选择器2.5 属性选择器

3、寻找标签（间接）3.1 找到上一个兄弟3.2 找父子

4、寻找标签案例：菜单的切换5、值的操作6、事件7、前端整合

前言

JQuery 是一个 JavaScript 的第三方模块(第三方类库)，可以基于 JQuery 自己开发一个功能，也有很多现成的工具依赖 JQuery，例如 Bootstrap 动态效果。本篇文章中介绍JQuery 的基本功能和依赖于 JQuery 的一些常用工具。

正文

1、JQuery 快速上手

1.1 下载 JQuery

下载网址：Download jQuery

1.2 应用 JQuery

导入JQuery ：

html 中导入 js 文件：

案例：动态实现将“中国联通”修改为“广西移动”:

中国联通

2、寻找标签（直接）

2.1 ID选择器

中国联通

中国联通

中国联通

JQuery 操作：

$("#txt")

2.2 样式选择器

中国联通1

中国联通2

中国联通3

JQuery 操作：

$(".c1")

2.3 标签选择器

中国联通1

中国联通2

中国联通3

JQuery 操作：

$("h1")

2.4 层级选择器

JQuery 操作：

$(".c1 .c2 a")

2.5 多选择器

JQuery 操作：

$("#c1,#c2,li")

2.5 属性选择器

JQuery 操作：

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

3、寻找标签（间接）

3.1 找到上一个兄弟

JQuery 操作：

$("#c1").prev() //上一个

$("#c1") //

$("#c1").next() //下一个

$("#c1").next().next() //下一个的下一个

$("#c1").siblings() //所有的

3.2 找父子

JQuery 操作：

$("#c1").parent() //父亲

$("#c1").parent().parent() //父亲的父亲

$("#c1").children() //所有的儿子

$("#c1").children(".p10") //所有的儿子中寻找class=p10

$("#c1").find(".p10") //所有的子孙中寻找class=p10

$("#c1").children("div") //所有的儿子中寻找标签 div

4、寻找标签案例：菜单的切换

功能升级： 只允许有一个是展开的

5、值的操作

JQuery 操作：

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

$("#c1").text("abc") //设置文本内容

$("#c2").val() //获取用户输入的值

$("#c2").val("嘿嘿嘿") //设置值

案例：动态创建数据

6、事件

• 百度
• 谷歌
• 搜狗

在 JQuery 可以删除指定的标签：

• 百度
• 谷歌
• 搜狗

案例：表格操作

7、前端整合

HTMLCSSJavascript、JQueryBootStrap（动态效果依赖于JQuery）

Launch demo modal

好文推荐

 您阅读本篇文章共花了：