jQuery基础教程:CSS选择器与常见操作详解
本篇文章是关于jQuery基础的整理,特别适合初学者学习和参考。jQuery是一个广泛应用于JavaScript编程的库,它简化了HTML文档遍历、事件处理、动画及AJAX交互等操作,使得前端开发变得更加便捷。以下是一些核心的jQuery选择器和方法的详细介绍: 1. **ID选择器**:`$("#one").css("color","red");` 这行代码通过ID选择符`#one`来选取页面上id为"one"的元素,并设置其文字颜色为红色。 2. **类选择器**:`$(".one").css("color","red");` 通过类名`.one`选取所有拥有该类的元素,并修改它们的文字颜色。 3. **标签选择器**:`$("tr").css("color","red");` 选取所有`<tr>`(表格行)元素,改变它们的颜色。 4. **组合选择器**:`$("p,div").css("color","red");` 选取`<p>`和`<div>`标签下的所有元素,统一更改颜色。 5. **子元素选择器**:`$("div>span").css("color","red");` 选取所有位于`<div>`内的`<span>`元素,设置颜色。 6. **相邻兄弟选择器**:`.item+div` 选取紧跟在`.item`元素后面的`<div>`,同样设置颜色。 7. **同辈元素选择器**:`.item.siblings("div").css("color","red");` 选取`.item`元素的所有同级`<div>`元素并改变颜色。 8. **相邻兄弟选择器(下所有)**:`.item.nextAll("div").css("color","red");` 选取`.item`元素后面所有的`<div>`,包含直接和间接的后继兄弟。 9. **第一个/最后一个元素**:`$("span:first").css("color","red");` 和 `$("span:last").css("color","red");` 分别选取第一个和最后一个`<span>`元素,并改变颜色。 10. **否定选择器**:`$("div:not(.wrap)").css("color","red");` 选取所有不带有`.wrap`类别的`<div>`元素。 11. **索引选择器**:`.eq(2)` 选取指定索引的元素,如`$("tr:eq(2)").css("color","red");` 选取第三个`<tr>`元素。 12. **范围选择器**:`$("ul li:gt(2)").css("color","red");` 和 `$("ul li:lt(2)").css("color","red");` 分别选取所有大于第二个或小于第二个的`<li>`元素。 13. **通配符选择器**:`$(":header")` 选取所有`<header>`元素。 14. **文本内容筛选**:`$("dd:contains('jquery')").css("color","red");` 选取包含文本"jquery"的`<dd>`元素。 15. **属性筛选**:`$("dd:empty").html("û");` 选取所有空的`<dd>`元素,并添加文本"û"。 16. **包含子元素选择器**:`$("div:has(span)").css("color","red");` 选取所有含有`<span>`子元素的`<div>`。 17. **父元素选择器**:`$("dd:parent").css("color","red");` 选取所有`<dd>`元素的直接父元素。 18. **隐藏元素操作**:`$("div:hidden").show();` 展示所有隐藏的`<div>`元素。 通过这些基础的jQuery操作,读者可以快速理解和掌握如何在实际项目中应用jQuery进行高效的选择和样式操作。进一步的学习将包括事件绑定、动画效果和AJAX交互等内容,帮助提升前端开发的技能。
class选择器: $(".one").css("color","red");
标签选择器: $("tr").css("color","red");
div下的所有span: $("p,div").css("color","red");
层次选择器: $("div>span").css("color","red");
下一个兄弟元素: $(".item+div").css("color","red");
$(".item").next("div").css("color","red");
取所有兄弟元素: $(".item").siblings("div").css("color","red");
取之后所有兄弟元素: $(".item~div").css("color","red");
$(".item").nextAll("div").css("color","red");
第一个: $("span:first").css("color","red");
最后一个span标签: $("span:last").css("color","red");
取class不是wrap的元素: $("div:not(.wrap)").css("color","red");
奇数索引元素: $("tr:even").css("color","red");
偶数所以元素: $("tr:odd").css("color","red");
指定索引元素: $("tr:eq(2)").css("color","red");
大于X元素: $("ul li:gt(2)").css("color","red");
小于X元素: $("ul li:lt(2)").css("color","red");
取标题元素: $(":header").css("color","red");
取dd中包含jquery的元素: $("dd:contains('jquery')").css("color","red");
去不包含元素或为空的元素: $("dd:empty").html("没有内容");
去包含span的div元素: $("div:has(span)").css("color","red");
取包含子元素或文本的元素: $("dd:parent").css("color","red");
hidden取不可见元素 $("div:hidden").show();//使不可见的div可见
visible取可见元素 $("div:visible").css("color","red");
取拥有某属性的元素 $("div[id]").css("color","red");//有ID属性的所有div
页面加载完毕后触发事件 window.onload()=function(){}
设置页面背景色。 $("body").css( "background", "black" );
隐藏一个表单中所有元素。 $(myForm.elements).hide()
在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- JSP+SSM科研管理系统响应式网站设计案例
- 推荐一款超级好用的嵌入式串口调试工具
- PHP域名多维查询平台:高效精准的域名搜索工具
- Citypersons目标检测数据集:Yolo格式下载指南
- 掌握MySQL面试必备:程序员面试题解析集锦
- C++软件开发培训:核心技术资料深度解读
- SmartSoftHelp二维码工具:生成与解析条形码
- Android Spinner控件自定义字体大小的方法
- Ubuntu Server on Orangepi3 LTS 官方镜像发布
- CP2102 USB驱动程序的安装与更新指南
- ST-link固件升级指南:轻松更新程序步骤
- Java实现的质量管理系统Demo功能分析与操作
- Everything高效文件搜索工具:快速精确定位文件
- 基于B/S架构的酒店预订系统开发实践
- RF_Setting(E22-E90(SL)) V1.0中性版功能解析
- 高效转换M3U8到MP4:免费下载工具发布