`
zhuwei2008
  • 浏览: 83500 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery常用的选择器

阅读更多

$('#id');// 在javascript中就相当于document.getElementById("element")
$('element');// 指向 DOM 节点的标签名,也就是HTML元素啦。
$('.class);// 在HTML中元素应用的类Class,一个元素可以有多个类,只要有一个符合就能被匹配到。
$('*');//HTML中所有的元素。
$('selector1,selector2,selectorN');//指定任意多个选择器,并将匹配到的元素合并到一个结果内。
$("form > input");//用以匹配元素的选择器,并且它是第一个选择器的子元素。
$('tr:eq(1)');//从表格中查找第二行(索引从0开始)。
$('li:first');//从列表中查找第一行。
$('li:last);//从列表中查找最后一行。
$("div[id]");//查找所有含有 id 属性的 div
$("input[name='newsletter']").attr("checked", true);//查找所有 name 属性是 newsletter 的 input 标签。
$("input[name!='newsletter']").attr("checked", true);//查找所有 name 属性不是 newsletter 的 input 标签。
$("input[name^='news']");//查找所有 name 以 'news' 开始的 input 标签。
$("input[name$='letter']");//查找所有 name 以 'letter' 结尾的 input 标签。
$("input[name*='man']");//查找所有 name 包含 'man' 的 input 标签。
$("input[id][name$='man']");//找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
$("ul li:nth-child(2)");//在每个 ul 查找第 2 个li
$("ul li:first-child");//在每个 ul 中查找第一个 li
$("ul li:last-child");//在每个 ul 中查找最后一个 li
$("ul li:only-child");//在 ul 中查找是唯一子元素的 li

$("img").attr("src");//获取页面上所有img元素的src值
$("img").attr({ src: "test.jpg", alt: "Test Image" });//为页面上的所有img的src设置test.jpg值,所有的alt属性设置为“Test Image”
$("img").attr("src","test.jpg");//这个方法与上一个方法的不同之处在于只能设置一个属性值
$("img").attr("title", function() { return this.src });//该方法是jquery 1.4.2新增方法,可以通过一个函数返回一个值,作为设置元素某个属性的值
$("img").removeAttr("src");//为元素移出某个src属性

$("p").addClass("selected");//为文档中的段落元素添加类名“selected”,使用addClass方法,你还可以添加多个类名,只需要用空格进行分隔即可。比如:为页面上的所有div添加两个类,highlight和border这两个类,则可以写为:$('div').addClass('hignlight border');
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});//jquery 1.4新增方法,第二个参数通过函数返回值来设置匹配元素的类
$('div').removeClass('highlight');//为文档中的div移出highlight类
$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});//删除最后一个元素上与前面重复的class,jquery 1.4新增方法,第二个参数通过函数返回值来设置匹配元素的

分享到:
评论

相关推荐

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    JQuery常用选择器功能与用法实例分析

    本文实例讲述了JQuery常用选择器功能与用法。分享给大家供大家参考,具体如下: JQuery基础回顾 今天对JQuery内容进行了回顾,下面进行一些总结: JQuery是javascript的一个库,所以二者可以相互转换,例如JQuery到...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jQuery常用选择器详解

    本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下 1、jQuery:(使用jQuery一定标明我们使用的版本号)  它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题) 2、...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jquery 城市选择器

    jQuery城市选择器是网页表单设计中常用的一种组件,通过合理的数据结构和事件驱动,实现了级联选择的效果。理解其工作原理,并结合实际项目需求进行优化,能有效提升网站的用户体验和交互性。随着前端技术的不断发展...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

    一个简单的jQuery时间选择器

    【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中,特别是涉及到用户输入时间的场景,如预订、会议安排等,拥有一个直观易用的时间选择器可以极大提升...

    jquery城市选择器

    《jQuery城市选择器详解》 在网页开发中,常常需要为用户提供便捷的城市选择功能,以满足用户在填写地址或选择服务区域时的需求。jQuery城市选择器便是为此而设计的工具,它结合了jQuery库的强大功能,实现了高效、...

    jquery双向选择器代码

    首先,理解jQuery选择器的基本概念是关键。jQuery提供了多种内置的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更...

    jQuery颜色选择器

    6. **使用示例**:在HTML中,你只需要创建一个`<div>`或其他元素作为颜色选择器的触发器,并通过jQuery选择器和`.colpick()`方法初始化插件。例如: ```javascript $('#colorPicker').colpick({ layout: 'hex', ...

    jquery颜色选择器源码

    1. jQuery选择器和DOM操作:如何使用jQuery选择特定的HTML元素,如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件处理:掌握`.on()`, `.click()`, `.change()`等事件监听器的...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    jQuery日期选择器插件

    **jQuery日期选择器插件**是一种广泛应用于网页开发中的组件,它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验,尤其适用于需要用户输入生日、预约日期或者截止日期...

    jquery 颜色选择器,使用简单

    jQuery,一个流行的JavaScript库,提供了许多插件来简化开发人员的工作,其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能,以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...

    jquery颜色选择器

    4. **初始化插件**:在页面加载完成后(通常在`$(document).ready()`函数中),使用jQuery选择器找到元素并调用颜色选择器插件的初始化方法,设置相关配置,如预设颜色、回调函数等。 5. **事件监听**:你可以监听...

    城市选择器jquery

    jquery 城市选择器代码

    基于jquery实现的地址选择器

    【基于jQuery实现的地址选择器】是一种常用的前端交互组件,常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式,展示省、市、区、乡镇、社区等多级行政区域,使得用户能够方便快捷...

Global site tag (gtag.js) - Google Analytics