`

jquery总结

 
阅读更多
 
 

1:选择器

1.1:基本选择器

1.1.1  id选择器-》$("#one").css("background","#bbffaa");

1.1.2 class选择器-》$(".mini").css("background","#bbffaa");

1.1.3 标签选择器-》$("div").css("background","#bbffaa");

1.1.4 通配符选择器-》$("*").css("background","#bbffaa");

1.1.5组合选择器-》$("div,span").css("background","#bbffaa");

1.1.6 --->$("span,#two').css("background","#bbffaa"); span中id为two的

1.2 :层次选择器

1.2.1 后代选择器-》$('body div') .css("background","#bbffaa");   body中所有的div

1.2.2 子选择器-》$('div>span') .css("background","#bbffaa");div中的span(是子,不是所有的)

1.2.3下一个选择器-》$('div +span').css("background","#bbffaa"); div中下一个span(只是第一个)

1.2.4 后面所有选择器-》$('#two ~div').css("background","#bbffaa"); id为two元素后面的所有div

1.3 过滤选择器

1.3.1 :first   $('div:first').css("background","#bbffaa");所有div中第一个div

1.3.2 :last   $('div:last').css("background","#bbffaa");所有div中最后一个div

1.3.3 :not(a)  $('input:not(.myclass)').css("background","#bbffaa"); 选取class不是myclass的所有input元素

1.3.4 :even  $('input:even').css("background","#bbffaa"); 索引为偶数的input元素

1.3.5 :odd   $('input:odd').css("background","#bbffaa"); 索引为奇数的input元素

1.3.6 :eq(index)  $('input:eq(1)').css("background","#bbffaa"); 索引为1的input元素

1.3.7 :gt(index)  $('input:gt(1)').css("background","#bbffaa"); 索引大于1的input元素(不包括1)

1.3.8 :lt(index)  $('input:lt(1)').css("background","#bbffaa"); 索引小于1的input元素(不包括1)

1.3.9 :header  $(':header ').css("background","#bbffaa"); 所有header元素

1.3.10 :animated $('div:animated ').css("background","#bbffaa"); 正在执行动画的div

1.4 内容过滤选择器

1.4.1 :contains(text)  $('div:contains(di) ').css("background","#bbffaa"); 文本中包含di的所有div

1.4.2 :empty  $('div:empty').css("background","#bbffaa");没包含任何元素的div

1.4.3  :has(.class)  $("div:has(.mini)").css("background","#bbffaa"); class为mini的div元素

1.4.4 :parent  $("div:parent").css("background","#bbffaa"); 有子元素的div ,包括含有文本

1.5 可见过滤选择器

1.5.1 :hidden  选择所有不可见的元素,包括 type=hidden,style="visibility:hidden",style="display:none"

          如果只想选择input标签 可以,$("input:hidden")

1.5.2 :visible  $("div:visible")..css("background","#bbffaa");所有可见元素

1.6 属性过滤选择器

1.6.1 [a]  $("div[title]") .css("background","#bbffaa"); 改变含有title的div

1.6.2 $("div[title=text]") .css("background","#bbffaa"); 改变含有title=test的div

1.6.3 $("div[title!=text]") .css("background","#bbffaa"); 改变含有title!=test的div

1.6.4 $("div[title^=text]") .css("background","#bbffaa"); 改变含有title以text开始的div

1.6.5 $("div[title$=text]") .css("background","#bbffaa"); 改变含有title以text结束的div

1.6.6$("div[title*=text]") .css("background","#bbffaa"); 改变含有title中包含text的div

1.6.7$("div[id] [title*=text]") .css("background","#bbffaa"); 改变含有属性id,并且title中包含text的div

1.7 表单选择器

 :input

:test

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

1.8 子元素过滤器

1.8.1 $('div.one :nth-child(2)').css("background","#bbffaa"); 修改每个class为one的div父元素下第二个元素

1.8.2 $('div.one :first-child').css("background","#bbffaa");修改每个class为one的div父元素下第一个元素

1.8.3 $('div.one :last-child').css("background","#bbffaa");修改每个class为one的div父元素下最后一个元素

1.8.4 $('div.one :only-child').css("background","#bbffaa");修改每个class为one的div父元素下只有一个子元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 
分享到:
评论

相关推荐

    jquery总结学习资料JQuery总结

    **jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    6. **总结** jQuery降低了JavaScript开发的复杂度,提高了开发效率,尤其在DOM操作、事件处理和Ajax交互方面表现突出。无论是初学者还是经验丰富的开发者,jQuery都能作为一个强大的工具,提升开发体验和项目质量。...

    Jquery全集 Jquery总结

    **jQuery 全集:深入理解与实践** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作以及 AJAX 交互。本资料旨在全面覆盖 jQuery 的核心概念和实用技巧,通过...

    JQuery总结.docx - 快捷方式.lnk

    JQuery总结.docx - 快捷方式.lnk

    JQuery入门,JQuery总结

    **jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...

    JQuery个人总结(很全面)

    目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果

    jquery总结 Js总结 PHP与jquery

    **jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...

    Jquery全集,Jquery总结

    **jQuery 全集与总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。自2006年发布以来,jQuery 已经成为了前端开发中不可或缺的一部分,因其简洁的API和...

    jQuery总结xmind图超级详细

    jQuery是对JavaScript的封装,使用jQuery可以简化很多之前的JavaScript代码,简化开发 本人学习jQuery是通过xmind这款软件来记载的 现在把资源贡献给大家,希望给更多的人更深入的了解jQuery 也可以查询我的博客看...

    jquery总结学习资料

    总结来说,jQuery通过其高效、易用的特性,改变了JavaScript开发的格局,成为Web开发领域不可或缺的一部分。通过深入学习和实践,开发者可以更好地利用jQuery提升工作效率,构建出更富交互性的Web应用程序。

    jquery技巧总结(转)

    **jQuery 技巧总结** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画制作和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分。这篇总结将探讨一些...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    2022Jquery总结.pptx

    本文将深入探讨2022年jQuery的总结,包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先,jQuery是由John Resig于2006年创立的,它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...

    2022Jquery总结(1).pdf

    jQuery 入门总结 本章节主要介绍了 jQuery 的概述、基本使用、优点、入口函数、DOM 对象和 jQuery 对象的区别等知识点。 1. jQuery 概述 jQuery 是一个 JavaScript 库,由 John Resig 于 2006 年创建,是目前最...

    很好的Jquery总结

    本总结将深入探讨jQuery的核心知识点,包括选择器、DOM操作、事件处理和Ajax应用。** ### 一、jQuery选择器 jQuery 的选择器基于CSS,允许开发者通过简单的语法选取DOM中的特定元素。常见的选择器有: 1. **基本...

    jQuery总结(1).doc

    **jQuery 概述** jQuery 是一个轻量级的 JavaScript 库,它极大地简化了 JavaScript 的使用,特别是对于网页上的交互和动画效果。由于其简洁的语法和强大的功能,jQuery 成为了许多前端开发者首选的工具,尤其适合...

Global site tag (gtag.js) - Google Analytics