`

jQuery-选择器与滤镜

阅读更多
一.基本选择器
1.ID选择器:$("#temp").addClass("bgred");
2.类选择器:$(".temp").addClass("bgred");
3.合选择器:$("#temp,#test").addClass("bgred");
二.层次选择器:
1.后代选择器:$("form label").addClass("bgred");//只要label的上级有form则会应用上样式
2.孩子选择器:$("form > label").addClass("bgred");//当label的父标签是form则会应用上样式
3.兄弟选择器:$("form + label").addClass("bgred");//当form元素和label元素互为兄弟则会label元素应用上样式
4.兄弟链选择器(自己起的名字):$("form ~ label").addClass("bgred");//所有与form元素同级的label元素则会应用上样式
二.滤镜选择器:
1.位置控制滤镜
$("#dataTable tr:first").addClass("bgred");
$("#dataTable tr:last").addClass("bggreen");
$("#dataTable tr:odd").addClass("bggreen");
$("#dataTable tr:even").addClass("bggreen");
$("#dataTable tr:eq(1)").addClass("bgred");
$("#dataTable td:empty").addClass("bgred");
$("#dataTable td:parent").addClass("bgred");
$("#dataTable tr:hidden").show().addClass("bgred");
$("#dataTable tr:visible").addClass("bgred");
$("#dataTable tr:visible").hide();
2.内容控制滤镜
$("div.temp:contains('博客')").addClass("bgred");
$("div.temp:has(p)").addClass("bgred");//针对标签
$("div.temp:not(.withp)").addClass("bgred");
三.表单选择器:
1.内容滤镜
$("#loginForm :text").addClass("bgred");
$("#loginForm :password").addClass("bgred");
2.功能滤镜
$("#loginForm input:disabled").addClass("bggreen");
$("#loginForm input:enabled").addClass("bggreen");
$("#loginForm select option:selected").addClass("bggreen");
3.属性滤镜
$("#loginForm input[class][name=nickname]").addClass("bgred");

 

分享到:
评论

相关推荐

    CSS-JS-JQuery-xHTML-w3c参考手册(共11册)

    手册涵盖了选择器、布局、颜色、字体、过渡、动画、变换、滤镜等众多模块,帮助开发者深入理解新的样式规则和布局技术,实现更美观、更具交互性的网页设计。 2. **Javascript参考手册**:JavaScript是一种轻量级的...

    jquery图片滤镜特效.rar

    jQuery库通过一个选择器(如$("#id")或$(".class"))来选取HTML元素,然后可以对这些元素执行各种操作。在这个案例中,选择器可能会用于选取图片元素,比如`$("img.filterable")`。 滤镜特效通常涉及CSS样式改变、...

    jQuery相册图片滤镜效果.rar_jQuery相册图片滤镜效果

    在本资源中,我们主要探讨的是如何利用jQuery实现相册图片的滤镜效果。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。在这个“jQuery相册图片滤镜效果”的项目中...

    jquery淘宝商城选择商品尺寸与大小颜色功能

    - **颜色选择器**:可以使用色彩预览图或者颜色选择器插件,让用户直观地选取所需颜色。 ### 4. 动态库存显示 结合后端数据,`jQuery`可以实时更新每个属性组合的库存状态。例如,当用户选定某一尺寸和颜色后,页面...

    jQuery图片文字动画制作图片文字滤镜动画显示代码

    在网页设计中,jQuery是一种广泛...总的来说,使用jQuery制作图片文字动画和文字滤镜效果,需要结合选择器、动画函数、CSS滤镜以及可能的插件应用。通过这些技术,你可以创建出吸引眼球且富有动态美感的网页交互元素。

    jQuery图片相册多格子滤镜切换_图片融合幻灯片切换.zip

    在本项目中,jQuery是实现动态效果的关键,它通过链式调用和选择器等功能,使得代码更加简洁和高效。 2. 图片相册结构:一个典型的图片相册由多个图片元素组成,每个元素通常包含一张图片。在多格子布局中,这些...

    jquery图片滤镜特效

    jQuery通过选择器来选取DOM元素,然后使用各种方法对这些元素进行操作。例如,`$("#elementID")`会选择ID为"elementID"的元素,`$(".class")`会选择所有具有指定类名的元素。一旦选中元素,就可以使用`.css()`方法...

    jQuery滤镜百叶窗幻灯片,超炫效果图片轮换插件。

    这个过程中,可能涉及到CSS定位、jQuery的选择器、遍历和动画函数(如`.fadeIn()`和`.fadeOut()`)。 3. 图片轮换插件开发:图片轮换插件通常包括图片加载、定时器控制、过渡效果、用户交互等功能。开发者需要编写...

    jquery图片滤镜特效插件轻松实现颜色不断渐变

    接着,可以通过选择器选中需要应用效果的图片元素,并调用插件的方法,设置颜色渐变的参数,如起始颜色、结束颜色、渐变速度等。例如: ```javascript $(document).ready(function() { $('.image').colorFade({ ...

    jQuery相册图片滤镜效果.zip

    为了实现相册的交互性,可以使用jQuery的事件监听器,如`.on('click', function() {})`。当用户点击特定元素(如图片或按钮)时,可以触发相应的滤镜效果。此外,还可以结合CSS3的`:hover`伪类,使用户在鼠标悬停时...

    jquery的imgareaselect截图插件

    2. **初始化插件**:接着,为需要使用插件的图片元素添加jQuery选择器,并调用imgAreaSelect方法,如: ```javascript $("#myImage").imgAreaSelect({ handles: true, aspectRatio: "1:1", onSelectEnd: function...

    jQuery插件 - 图片放大镜IE6.zip

    接下来,你可以通过选择器指定要应用放大镜效果的图片,并传递任何自定义选项,如放大倍数、放大镜元素的样式等。 例如,HTML结构可能如下所示: ```html 示例图片"> ``` 然后在JavaScript中应用插件: ```...

    jquery ui幻灯片插件带进度条自动轮播滤镜百叶窗图片切换.rar

    首先,我们要理解jQuery UI的核心——它是一个基于JavaScript库jQuery的扩展,提供了丰富的用户界面组件,如日期选择器、对话框、滑块等。在我们的案例中,我们将利用jQuery UI的动画和事件处理能力来实现图片的动态...

    jQuery图片垂直切换幻灯片代码.zip

    总的来说,"jQuery图片垂直切换幻灯片代码"是一个将jQuery的动态效果与Bootstrap的布局优势相结合的实例,它展示了如何通过JavaScript和前端框架实现创新的用户体验。对于开发者来说,理解并掌握这样的代码有助于...

    jQuery实现图片模糊显示特效.zip

    4. **编写jQuery代码**:在文档加载完成后,使用jQuery选择器找到图片元素,并应用`refocus`方法。例如: ```javascript $(document).ready(function() { $('.blurred-container img').refocus({ focusWidth: 500,...

    jquery黑白效果,任意彩色图片都可以变黑白

    总结起来,jQuery实现彩色图片转黑白效果涉及到了JavaScript、CSS滤镜、Canvas API以及离线应用策略。通过理解和运用这些技术,我们可以创建出既实用又具有广泛兼容性的图像处理功能。在实际开发中,应根据项目需求...

    jQuery和CSS3超绚丽的3D星空动画特效

    5. **选择器和布局**:CSS3提供了更强大的选择器(如nth-child()、nth-of-type())和新的布局模式(如Flexbox和Grid),帮助精确地定位和排列星星。 **文件结构** 项目的文件结构包括以下几个部分: - **index....

    jQuery中间大图两侧小图模糊特效.zip

    每组图片可以通过`class`或`id`进行区分,方便后续的jQuery选择器定位。 2. **CSS样式**:为两侧小图设置模糊效果,可以通过`filter: blur(xpx)`来实现,其中`xpx`是模糊半径。同时,设定合适的布局以保证大图居中...

    blur jquery实现图片动态局部毛玻璃模糊特效

    3. **jQuery介入**:加载jQuery库后,我们可以通过选择器获取图片元素,并在事件(如点击或鼠标悬停)触发时改变其`filter`属性。为了实现局部模糊,我们需要使用CSS伪元素(`:before`或`:after`)并应用模糊效果: ...

    jQuery实现的悬停图片变色并放大特效源码.zip

    在这个特定的项目中,悬停效果的实现主要涉及到jQuery的选择器、事件处理和CSS样式修改。当用户将鼠标悬停在图片上(即触发mouseover事件)时,jQuery会选择该图片元素,并应用预先定义的CSS变化,如改变透明度、...

Global site tag (gtag.js) - Google Analytics