`
nianshi
  • 浏览: 416264 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

jquery选择器摘要

阅读更多


jquery对象访问:

1. each(callback):以每个匹配的元素作为上下文来执行一个函数,return false;停止循环;return true;跳至下一个循环。
来个实例 :               
$("img").each(function(){
       $(this).toggle("example");
})
        

2.size()与length相同,都是返回jquery对象中元素的个数。
   $("img").size();或$("img").length;

3.get():取得所有匹配的DOM元素集合(注意返回是dom对象,而非jquery对象)
$("img").get().reverse();

4.get(index):取得其中一个匹配的元素。index表示匹配第几个元素,可以让你操作一个实际的dom元素。
$("img").get(0);//得到第一个匹配的img元素
$(this).get(0)与$(this)[0]等价

5.index(subject):搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。

选择器-基本:
selector1,selector2,selectorN将匹配到的元素合并后一起返回
$("div,span,p.myClass");

选择器-层级:
1.ancestor descendant在给定的祖先元素下匹配所有的后代元素
    $("div input");//div下所有input

2.parent > child 在给定的父元素下匹配所有的子元素
    $("div > input);//父元素下的子元素

3.prev + next 匹配所有紧接在prev元素后的next元素
$("div + span")//紧接在div后的span

4.prev ~ siblings 匹配prev元素之后的所有siblings元素
$("form ~ input")//找到所有与表单同辈的input元素


选择器-简单:
1.:first 匹配找到的第一个元素
$("tr:first")//查找表格中第一行

2.:last 匹配找到的最后一个元素
$("tr:last")//匹配找到的最后一个元素

3.:not(selector) 去除所有与给定选择器匹配的元素
   ps:jquery 1.3中,已支持复杂选择器了(例如::not(div a)和:not(div,a))
   $("input not(:checked)")//所有未被选中的input元素

4.:even 匹配所有索引值为偶数的元素,从0开始计数
   $("tr:even")//查找表格中偶数行

5.:odd匹配所有索引值为奇数的元素,从0开始计数
   $("tr:odd")//查找表格中奇数行

6.:eq(index)匹配一个给定索引值的元素
   $("tr:eq(1)")//查找第二行

7.:gt(index)匹配所有大于给定索引值的元素
   $("tr:gt(0)")//查找大于0的所有行

8.:lt(index)匹配所有小于给定索引值的元素
$("tr:lt(2)")//查找小于2的所有行

9.:header 匹配如h1,h2,h3之类的标题元素
   $(":header").css("background",red");//所有标题加上背景色

10.:animated 匹配所有正在执行动画效果的元素

选择器-内容:
1.:contains(text) 匹配包含给定文本的元素
   $("div:contains('aaa')")查找所有包含有aaa的div元素

2.:empty()匹配所有不包含子元素或文本的空元素
  
$("td:empty")

3.:has(selector)匹配含有选择器所匹配的元素的元素
  
$("div:has(p)").addClass("test");//给所有包含p元素的div元素添加一个text类

4.:parent匹配含有子元素或者文本的元素
   $("td:parent");//查找所有含有子元素或者文本的td元素

选择器-可见性:
1.:hidden匹配所有不可见元素,input元素的type属性为hidden的话也会被匹配
  
$("tr:hidden");//查找所有不可见的tr元素

2.:visible匹配所有可见元素
   $("tr:visible");//查找所有可见的tr元素

选择器-属性:
1.[attribute]匹配包含给定属性的元素
   
$("div[id]")//查找所有含有id属性的div元素

2.[attribute=value]匹配给定的属性是某个特定值的元素
   
$("input[name='username']")//查所所有name=username的input元素

3. [attribute!=value]匹配所有不含有指定属性,或者属性不等于特定值的元素
     此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
    $("input[name!='username']")//查找所有name!=username的input元素

4. [attribute^=value]匹配给定的属性是以某些值开始的元素
    $("input[name^='user'])//查找所有name以'newws'开始的input元素

5. [attribute$=value]匹配给定属性是以某些值结尾的元素
   $("input[name$='letter']) //查找所有name以'letter'结尾的input元素

6. [attribute*=value]匹配给定的属性是以包含某些值的元素
   $("input[name*='man']")//查找所有name包含'man'的input元素

7. [selector1][selector2][selectorN]复合属性选择器,冉要同时满足多个条件时用。
    $("input[id][name='man']")//含有id属性,并且name为man的

选择器-子元素:
1.:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素
    $("ul li:nth-child(2)")//在每个ul查找第2个li

2. :first-child匹配第一个子元素
    $("ul li:first-child")//在每个ul中查找第一个li

3.:las-child匹配最后一个子元素
    $("ul li:last-child")// 在第个ul中查找最后一个li

4.only-child如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,不会被匹
   $("ul li:only-child")//在ul中查找是唯一子元素的li

选择器-表单:
1.:input ,:text ,:password ,:radio , :checkbox ,:submit ,:image ,:reset ,:button , :file
2.:hidden匹配所有不可见元素,或type为hidden的元素

选择器-表单对象属性:
1.:enable匹配所有可用元素
   $("input:enabled")//查找所有可用的input元素

2.:disabled匹配所有不可用元素
   $("input:disabled")//匹配所有不可用元素

3.:checked匹配所有选中的被选中元素(复选框、单选框、不包括select中的option)
    $("input:checked")//查找所有选中的复选框元素

4.:selected匹配所有选中的option元素
    $("select option:selected")//查找所有选中的选项元素

分享到:
评论

相关推荐

    jQuery学习资料

    五.jQuery选择器全解 13 六 jQuery选择器实验室 19 七.API文档 20 八.总结 20 从零开始学习jQuery (三) 管理jQuery包装集 21 一.摘要 21 二.前言 21 三.动态创建元素 21 四.管理jQuery包装集元素 25 五.常用函数举例...

    jQuery ColorPicker网页取色器、颜色选择器 v1.0

    摘要:脚本资源,jQuery,拾色器, jQuery ColorPicker颜色选择器【网页取色器】,有的也称拾色器,总之它是运行在网页上截取屏幕颜色值的小工具,可以把某点的颜色值转换至对应格式传入需要的地方。ColorPicker基于...

    从零开始学习jQuery (二) 万能的选择器

    编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如”拥有title属性并且值中包含test的元素”, 完成这些工作只需要编写一个jQuery选择器...

    [jQuery实战第二版].pdf

    - jQuery选择器详解。 2. **核心功能讲解**: - DOM操作技巧,包括添加、删除和修改元素。 - CSS类操作方法。 - 动画效果和jQuery UI的使用。 3. **AJAX集成**: - 使用jQuery进行异步数据加载。 - AJAX请求的...

    jquery新闻幻灯片展示(多种)

    2. **jQuery选择器** 在创建新闻幻灯片时,首先需要选取要操作的HTML元素,jQuery提供了丰富的选择器,如ID选择器(#id),类选择器(.class)和元素选择器(element)等,帮助我们精确地定位到幻灯片的各个部分。 3. **...

    jQuery dPassword MD5加密

    只需要在HTML页面中引入jQuery和这个插件的脚本文件,然后通过jQuery选择器找到密码输入字段,并调用相应的插件方法来实现密码的MD5加密。 例如,假设有一个id为"passwordInput"的密码输入框,可以这样使用插件: `...

    jQuery网格视图图片画廊

    - jQuery脚本:使用jQuery选择器获取图片元素,然后应用动画效果,如淡入淡出、滑动切换等。同时,可以添加事件监听器,如点击事件,来触发图片的切换。 - 动态加载:如果图片数量较多,可以使用Ajax技术实现分页...

    jQuery: Novice to Ninja

    读者将学习到如何使用选择器、类和属性选择器等工具来高效地定位页面上的特定元素。此外,还会涵盖如何利用jQuery改变这些元素的样式和内容。 3. **动画、滚动和调整大小 (第3章)** - **章节要点**:这一章深入...

    前端js面试题WORD.docx

    本资源摘要信息汇总了前端JS面试题中的一些重要知识点,涵盖了JQuery选择器、JQuery插件实现方式、bind和live方法的区别、JS和JQ对象的转换、去除数组重复项等内容。 一、JQuery选择器 JQuery选择器是JQuery库中最...

    jquery字数超出规定字数自动生成截取生成省略号

    1. **jQuery 选择器与 DOM 操作**:首先,我们需要通过 jQuery 选择器找到需要截取的文本元素,如 `$("#myElement")`。然后,可以使用 `.html()` 或 `.text()` 方法获取或设置该元素的文本内容。 2. **文本长度检查...

    jquery.js和jquery.md5.js进行md5加密

    例如,使用`$`符号作为选择器可以快速获取DOM元素,而`$.ajax()`方法则方便地封装了Ajax请求。 在使用jQuery.md5.js之前,首先需要在项目中引入jQuery。这可以通过在HTML文件中添加如下代码行来完成: ```html ...

    jquery手风琴插件

    - `header`: 定义面板标题的选择器,默认为`> :header`,即`<h3>`或`<h4>`标签。 - `heightStyle`: 控制手风琴的高度模式,可以是`"content"`(根据内容自动调整高度)、`"fill"`(填充父容器高度)或`"auto"`(每个...

    jquery-textEllipsis-20110314

    2. **调用插件**:在文档加载完成后,通过jQuery选择器找到该元素并调用`textEllipsis`方法: ```javascript $(document).ready(function() { $('#ellipsis').textEllipsis(); }); ``` 这样,`#ellipsis`元素...

    win8 tiles风格标签jQuery插件.zip

    然后,可以使用jQuery选择器选取要转化为磁贴的元素,并调用`.wordbox()`方法来应用插件效果。在方法中,可以设置各种参数来调整磁贴的行为和外观,例如磁贴的大小、颜色、动画速度等。 为了进一步定制磁贴,开发者...

    前端项目-jQuery.dotdotdot.zip

    使用jQuery.dotdotdot插件时,你需要在HTML文件中引入jQuery库和jQuery.dotdotdot.js文件,然后通过jQuery选择器来初始化插件,设置相应的配置项。例如: ```html <script src="path/to/jquery.js"> ...

    通过HTML + jquery + echarts 实现文字云图

    例如,使用jQuery选择器找到echarts容器,然后调用Echarts的实例化方法,如`var myChart = echarts.init(document.getElementById('main'));`。 Echarts是百度开源的一款强大的JavaScript可视化库,支持多种图表...

    很酷的黑色链接预览效果,jQuery niceTitle

    这可以通过在jQuery的选择器中指定链接类名或ID来实现。以下是一个基本的使用示例: ```javascript $(document).ready(function() { $('a.nice-preview').niceTitle(); }); ``` 在这个例子中,`a.nice-preview`是...

    从零开始学习jQuery word格式完整版

    "HELLO WORLD JQUERY"则会展示一个简单的jQuery代码示例,通常是通过`$(document).ready()`函数来确保页面加载完毕后执行代码,以`$("selector").action()`的形式展示jQuery的选择器和方法使用。 3. jQuery核心概念...

    jQuery-printPage.zip

    接着,可以使用JavaScript或jQuery选择器来定义要打印的元素,然后调用插件提供的函数进行打印操作。例如: ```javascript $(document).ready(function() { $('.printable').printPage(); }); ``` 在上述代码中,`...

Global site tag (gtag.js) - Google Analytics