`
piperzero
  • 浏览: 3555531 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jQuery选择器和操作得到的元素

 
阅读更多
基本选择器
#myid 匹配一个Id
element 匹配所有的elemnet元素
.myclass 匹配所有的类
* 匹配所有元素
selector1,selector2,selectorN 匹配满足选择器的所有元素
层次选择器
elementParent elementChild 匹配elementParent下所有的子元素。
elementParent>elementChild 选择所有上级元素为elementParent的元素
prev+next 匹配prev同级之后紧邻的元素next
prev~sibling 匹配prev同级之后的元素sibling

基本滤镜选择器
:first 匹配第一个元素
:last 匹配最后一个元素
:even 从匹配的元素集中选取序数为偶数的元素
:odd 从匹配的元素中选叙述为基数的元素
:eq(index) 从匹配的元素集章选取第index个元素
:gt(index) 从匹配的元素集章选取序数大于index个元素
:lt(index) 从匹配的元素集章选取序数小于index个元素
:empty 匹配所有没有子元素的元素
:parent 匹配包含子元素的所有元素(包含文本内容)
:hidden 匹配所有隐藏的元素,包含属性值type=hidden
:visible 匹配所有非隐藏元素
:header 匹配所有标题元素
:contains(text) 匹配所以包含text的元素
:animated 匹配正在执行动画的元素
:not(selector) 匹配不满足selector的元素
:has(selector) 匹配包含selector的元素

子元素滤镜选择器
E:nth-child(index/even/odd/equation) 匹配所有E在其父元素下满足括号条件的结合。下表从1开始。
E:first-child
E:last-child
E:only-child 只有一个child的。

表单滤镜选择器
:input 匹配所有的input ,textarea ,select ,button
:text 匹配文本域 在IE下选择Type属性为text的元素,非IE下,选择的对象是input与阿奴type属性为text的元素
:password 匹配密码域
:radio 匹配单选按钮
:checkbox 匹配复选框
:submit 匹配submit
:image 匹配图像域
:reset 匹配重置按钮
:button 匹配按钮
:file 匹配文件域
:enabled 匹配所有可用的元素
:disabled 匹配所有不可用的元素
:checked 匹配所有被选中的表单
:selected 匹配所有选择的表单

属性滤镜选择器
[attr] 匹配拥有attr属性的元素
[attr=value]
[attr!=value]
[attr^=value] 匹配attr的值以value开头的
[attr$=value] 匹配attr的值以value结尾的
[attr*=value] 匹配attr包含value的。

操作得到的元素
得到属性
attr(name)获取第一个

修改属性
attr(key,value) 修改第一个
attr(key,fn)
attr(properties)

删除属性
removeAttr(name)

操作样式表
添加样式表
addClass(class) 一个或多个样式表,用空格分开

去除样式表
removeClass(class)删除一个或多个样式表,用空格分开

交替样式表
toggleClass(class)

操作CSS
css(name) 得到第一个匹配元素的的样式属性
css(name,value)在所有匹配的元素中,设置一个样式属性的值
css(properties) 把一个“key/value”对设置为所匹配元素的样式属性

获得元素的偏移信息
offset() 获取匹配元素子当前视口的相对偏移。返回值包含两个整数top left

获得和设置高度
height() 取得第一个匹配元素当前计算的高度值,Integer
height(val) 设置每个匹配元素的CSS属性的高度

获得窗口的高度:$(window).height()

获得和设置宽度
width()
width(val)

操作内容
html() 获得第一个匹配的元素的html内容
html(val) 设置第一个匹配元素的html内容

操作文本
text() 获取所有匹配元素的内容
text(val)

操作值,主要是对文本输入框,多选框等
val()
val(val)

查找与筛选元素
过滤元素集
filter(expr) 筛选出与指定表达式匹配的元素集合,用,分隔多个表达式
filter(fn)

hasClass(class)检查当前元素是否拥有某个特定的类,返回值为boolean
< =>is(expr) not(expr) 返回值都为boolean

JQuery过滤函数集列表
eq(index)
filter(expr)
filter(fn)
hasClass(class)
is(expr)
map(callback)
not(expr)
slice(strat,[end])

在元素中查找
find(expr) 搜索所有与指定表达式匹配的元素,是找出正在处理的元素的后代元素的好方法

next([expr]) 只是找到下一个。找到所有可以用nextAll()

JQuery查找元素集列表
add(expr) 把与表达式匹配的元素添加到JQuery对象中
children([expr])只考虑子元素,不考虑所哟后代元素
contents() 查找匹配元素内部所有子节点
find(expr)
next([expr])
nextAll([expr])
parent([expr]) 查找所有的祖辈
prev([expr]) 紧邻的前一个
prevAll([expr]) 前面的所有
sibling([expr])

链式操作
简化代码数量,但是同时可能造成代码的可读性降低。
end() 将操作回滚到最近的一个破坏性操作之前。也就是将匹配的元素列表变为前一次的状态。

andSelf() 将先前所匹配的元素加入当前元素中
分享到:
评论

相关推荐

    RIA应用开发:2-jquery选择器.ppt

    jQuery 选择器是 RIA 应用开发中一个非常重要的概念, jQuery 选择器是 jQuery 库中的一部分,主要用来选择和操作 HTML 文档中的元素。下面是 jQuery 选择器的详细知识点: 1. jQuery 环境的配置 在使用 jQuery ...

    jQuery选择器源码解读(八):addCombinator函数

    在详细解读addCombinator函数之前,我们先了解下jQuery选择器和Sizzle引擎的基本概念。jQuery选择器允许开发者通过特定的语法选取页面中的DOM元素集合。Sizzle是jQuery所使用的底层选择器引擎,它是用来解析和执行...

    从零开始学jquery

    #### jQuery选择器全解 jQuery提供了一系列选择器,包括基本选择器(如ID选择器、类选择器和元素选择器)、层次选择器(如后代选择器、子元素选择器等)、属性选择器、伪类选择器等。每个选择器都有其特定的用途,...

    jquery获取form表单input元素值的简单实例

    当使用 $("#id") 选择器选中了一个元素后,可以使用 .val() 来获取这个元素的值。这里,“#id”是CSS选择器的一种,用于选中id属性为特定值的元素。例如,如果有一个input元素的id属性为cifNo,则可以使用$("#cifNo...

    jQuery时间日期拖动设置选择器.zip

    《jQuery时间日期拖动设置选择器》是一款基于jQuery库的前端组件,专为现代浏览器设计,用于实现用户交互式的时间和日期选择。该组件通过滑动拖动的方式,让用户能够直观地设定日期、月份、星期以及数值范围(0-100...

    详解jQuery选择器

    总结来说,jQuery选择器具有丰富的种类和强大的功能,它不仅简化了JavaScript的代码量,还提高了页面元素操作的效率。掌握这些选择器对于前端开发者来说非常重要,它能帮助开发者更加灵活地处理页面的各种动态交互。

    使用jQuery管理选择结果

    管理选择结果是 jQuery 中的一个重要概念,它涉及对选择器选中的元素集合的进一步操作和管理。本文将详细探讨 jQuery 中如何管理通过选择器得到的元素集合,以及一些常用的操作方法。 首先,jQuery 中选择器选中的...

    Jquery 1.83 代码和手册

    例如,你可以看到`$(document).ready()`函数是如何工作的,以及如何使用选择器来选取和操作DOM元素。 其次,`jquery-1.8.3.min.js`是经过压缩和优化的版本,适用于生产环境。它在保留功能完整性的前提下,通过删除...

    jQuery开发技术详解

    第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 ...

    jquery物流发货省市区城市地图选择器

    jQuery的核心特性包括选择器、遍历、事件处理、动画和Ajax等,这些功能在"地图选择器"组件中得到了充分的应用。 二、地图选择器原理 地图选择器是基于jQuery构建的,通过联动下拉菜单或者交互式地图,实现省市区...

    jQuery_api和js

    在这个文件中,你可以找到关于选择器、属性操作、DOM操作、事件处理、效果和动画、Ajax请求、插件等所有jQuery功能的详细说明。 2. **jquery-1.11.1.js**:这是jQuery库的核心JavaScript文件,包含了所有jQuery的...

    juqery 学习之三 选择器 简单 内容

    这些选择器在jQuery中提供了极大的灵活性,使得我们能够精确地选取和操作HTML元素。通过组合使用这些选择器,以及与其他jQuery方法和函数一起,我们可以创建复杂的DOM操作,实现丰富的网页交互效果。对于学习jQuery...

    jquery 1.26和1.3的

    1.26版主要改进了DOM操作和事件处理,使得在网页上动态修改元素和响应用户交互变得更加简单。其中的关键特性包括: 1. **选择器**:jQuery 1.26支持CSS1、CSS2和部分CSS3选择器,使开发者能够更准确地定位页面元素...

    jQuery温习篇 强大的JQuery选择器

    jQuery选择器的强大之处在于其简洁性、灵活性和可读性,通过简短的代码即可完成复杂的DOM操作。同时,它还支持自定义过滤器选择器,使得开发者可以创建符合特定需求的选择器。 知识点八:跨浏览器的兼容性 由于...

    jquery1.8.3_api jquery中文开发文档

    在`jquery选择器介绍.txt`中,详细列出了jQuery支持的各种选择器,包括基本选择器(如ID选择器"#id",类选择器".class",元素选择器"tag"),层次选择器(如后代选择器"ancestor descendant",子元素选择器"parent &gt;...

    jquery对象和dom对象

    通过jQuery选择器,我们可以轻松地选取DOM元素,并将其转换为jQuery对象。jQuery对象拥有丰富的API,提供了更加简便的方式来操作DOM,如`$(selector)`用于选择元素,`.html()`、`.css()`、`.on()`等用于操作元素的...

    jquery块元素连接线.zip

    jQuery的核心功能包括选择器(用于选取HTML元素)、DOM操作(添加、删除或修改元素)以及事件处理(监听并响应用户行为)。例如,`$("#id")`可以选取ID为"id"的元素,`.append()`则用于在元素后面添加内容。 在创建...

    非常经典的35个Jquery应用实例

    JQuery 是一个功能强大的 JavaScript 库,提供了许多实用的方法来选择和操作网页元素。在本文中,我们将探索 35 个经典的 JQuery 应用实例,涵盖了选择网页元素、链式操作、元素的操作等多个方面。 一、选择网页...

Global site tag (gtag.js) - Google Analytics