jQery-优快云博客

本文深入介绍jQuery，一个流行的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。文章涵盖jQuery的下载、安装及核心选择器，如基础、层次和表单选择器，同时提供DOM操作指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery,一切 soeasy."–因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。
一、jQuery 的下载和安装

官网
http://jquery.com/ 下载
版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
优点
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
太多了! 等待我们一一去发现…
安装
在页面引入即可
四、jQuery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。
基础选择器 Basics（掌握即可）选择器名称举例 id选择器 #id $("#testDiv")选择id为testDiv的元素元素名称选择器 element $(“div”)选择所有div元素类选择器 .class $(".blue")选择所有class=blue的元素选择所有元素 * $("*")选择页面所有元素组合选择器 selector1, selector2, selectorN $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素

id选择器1 span中的内容

元素选择器

样式选择器

dom：innerHTML="…"，innerText="…"
jquery： .html("…")，.text("…")
2. 层次选择器Hierarchy 选择器名称举例后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

层次选择器

层次择器

父选择器

子选择器

选择器2

选择器2中的div

var child = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲parent>div'); c\dots$ (this).text()); }); console.log("=====相邻选择器="); var pre_next = $(".gray + img"); console.log(pre_next.length); console.log("=====同辈选择器,其后，（弟弟）="); var pre_siblings = $quot;.gray ~ img"); console.log(pre_siblings.length); </script> </html> 3. 表单选择器 Forms j/x 选择器名称举例表单选择器 :input 查找所有的input元素：$ (":input")；注意：会匹配所有的input、textarea、select和button元素。文本框选择器 :text 查找所有文本框： $(" : t e x t ") 密码框选择器 : p a s s w o r d 查找所有密码框：$ (":password") 单选按钮选择器 :radio 查找所有单选按钮： $(" : r a d i o ") 复选框选择器 : c h e c k b o x 查找所有复选框：$ (":checkbox") 提交按钮选择器 :submit 查找所有提交按钮： $(" : s u b m i t ") 图像域选择器 : i m a g e 查找所有图像域：$ (":image") 重置按钮选择器 :reset 查找所有重置按钮： $(" : r e s e t ") 按钮选择器 : b u t t o n 查找所有按钮：$ (":button") 文件域选择器 :file 查找所有文件域：$(":file")

表单验证

姓名:
密码:
年龄:小屁孩你懂得
爱好:篮球爬床代码
来自: 请选择北京上海
简介:
头像:
提交重置
五、jQuery DOM操作
jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式；动画操作等。注意：以下的操作方式只适用于jQuery对象。

操作元素的属性
获取属性方法说明举例 attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr(‘checked’) attr(‘name’) prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)

aa bb