Jquery简介选择的

时间:2022-11-04 18:28:29

前言

Jquery一个js相框(程序代码相结合)这是一个程序开发过程中的半成品;分类似该框架EXTJS。

依赖库:jquery-XXX.js

语法:$()

正文

5择器

id选择器

$("#id值")

样例:$(#span1).css("color","red");

标签选择器

$("标签名称")

Class选择器

$(".class的值")

群组选择器

$("标签名称1,标签名称2")

包括选择器

$("标签名称1  标签名称2")

表单选择器

$(":input")全部的Input标签

$(":text")选出的Input标签中type为text的全部标签;类似的有:password,:button;:radio;:Reset;:checkbox;:hidden;:submit。:image;:File

演示样例:

$(":input").css("cursor","wait");

条件限定选择器

基本条件限定

:first   :last  :lt :gt  :odd(奇数) :even(偶数)   :not

样例:

$("span:first").css("background-color","red");

$("span:lt(3)").css("background-color","red");

$("span:odd").css("background-color","red");

$("span:not(span:eq(2))").css("background-color","red");

内容限定

1.:contains(字符)  选中含有某个字符的标签

查找全部包括 "John" 的 div 元素

HTML 代码

<div>John Resig</div>

<div>George Martin</div>

<div>Malcom John Sinclair</div>

<div>J. Ohn

jQuery 代码:

$("div:contains('John')")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

2.:empty

匹配全部不包括子元素或者文本的空元素

HTML 代码:

<table>

  <tr><td>Value 1</td><td></td></tr>

  <tr><td>Value 2</td><td></td></tr>

</table>

jQuery 代码:

$("td:empty")

结果:

[ <td></td>, <td></td> ]

3.:parent   返回值:Array<Element(s)>

匹配含有子元素或者文本的元素

描写叙述:

查找全部含有子元素或者文本的 td 元素

HTML 代码:

<table>

  <tr><td>Value 1</td><td></td></tr>

  <tr><td>Value 2</td><td></td></tr>

</table>

jQuery 代码:

$("td:parent")

结果:

[ <td>Value 1</td>, <td>Value 2</td> ]4.:has(selector)返回值:Array<Element(s)>匹配含有选择器所匹配的元素的元素一个用于筛选的选择器演示样例描写叙述:给全部包括 p 元素的 div 元素加入一个 text 类HTML 代码:<div><p>Hello</p></div>

<div>Hello again!</div>jQuery 代码:$("div:has(p)").addClass("test");结果:[ <div class="test"><p>Hello</p></div> ]

属性限定

1.[attribute]

匹配包括给定属性的元素。注意,在jQuery 1.3中。前导的@符号已经被废除!假设想要兼容最新版本号,仅仅须要简单去掉@符号就可以。

參数

attribute String

属性名

演示样例

描写叙述:

查找全部含有 id 属性的 div 元素

HTML 代码:

<div>

  <p>Hello!</p>

</div>

<div id="test2"></div>

jQuery 代码:

$("div[id]")

结果:

[ <div id="test2"></div> ]

2.[attribute=value]   返回值:Array<Element(s)>

概述

匹配给定的属性是某个特定值的元素

參数

attribute   String

属性名

value String

属性值。

引號在大多数情况下是可选的。但在遇到诸如属性值包括"]"时,用以避免冲突。

演示样例

描写叙述:

查找全部 name 属性是 newsletter 的 input 元素

HTML 代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz" />

<input type="checkbox" name="newsletter" value="Cold Fusion" />

<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:

$("input[name='newsletter']").attr("checked", true);

结果:

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

可见性限定

1. :hidden   匹配全部不可见元素。或者type为hidden的元素

演示样例

描写叙述:查找隐藏的 tr

HTML 代码:

<table>

  <tr style="display:none"><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:hidden")

结果:

[ <tr style="display:none"><td>Value 1</td></tr> ]

描写叙述:匹配type为hidden的元素

HTML 代码:

<form>

  <input type="text" name="email" />

  <input type="hidden" name="id" />

</form>

jQuery 代码:

$("input:hidden")

结果:

[ <input type="hidden" name="id" /> ]

2.:visible    匹配全部的可见元素

演示样例描写叙述:查找全部可见的 tr 元素

HTML 代码:

<table>

  <tr style="display:none"><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:visible")

结果:

[ <tr><td>Value 2</td></tr> ]

选中限定

表单对象属性

•:enabled    返回值:Array<Element(s)>    匹配全部可用元素

演示样例描写叙述:查找全部可用的input元素

HTML 代码:

<form>

  <input name="email" disabled="disabled" />

  <input name="id" />

</form>

jQuery 代码:

$("input:enabled")

结果:

[ <input name="id" /> ]

•:disabled 返回值:Array<Element(s)>   匹配全部不可用元素

演示样例描写叙述:查找全部不可用的input元素

HTML 代码:

<form>

  <input name="email" disabled="disabled" />

  <input name="id" />

</form>

jQuery 代码:

$("input:disabled")

结果:

[ <input name="email" disabled="disabled" /> ]

•:checked  匹配全部选中的被选中元素(复选框、单选框等。不包含select中的option;varc = ops[e.selectedIndex].value;通过获取当前訪问的option对象在数组中的位置。来获取option的值)

演示样例描写叙述:查找全部选中的复选框元素

HTML 代码:

<form>

  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />

  <input type="checkbox" name="newsletter" value="Weekly" />

  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

</form>

jQuery 代码:

$("input:checked")

结果:

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

•:selected匹配全部选中的option元素

演示样例:查找全部选中的选项元素

HTML 代码:

<select>

  <option value="1">Flowers</option>

  <option value="2" selected="selected">Gardens</option>

  <option value="3">Trees</option>

</select>

jQuery 代码:

$("select option:selected")

结果:

[ <option value="2" selected="selected">Gardens</option> ]

子标签的限定

:nth-child 返回值:Array<Element(s)>  匹配其父元素下的第N个子或奇偶元素

':eq(index)' 仅仅匹配一个元素,而这个将为每个父元素匹配子元素。

:nth-child从1開始的,而:eq()是从0算起的。能够使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

參数

index Number    要匹配元素的序号。从1開始

演示样例:在每一个 ul 查找第 2 个li

HTML 代码:

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>Ralph</li>

</ul>

jQuery 代码:

$("ul li:nth-child(2)")

结果:

[ <li>Karl</li>,   <li>Tane</li> ]

:first-child

匹配第一个子元素

':first' 仅仅匹配一个元素。而此选择符将为每一个父元素匹配一个子元素

演示样例描写叙述:在每一个 ul 中查找第一个 li

HTML 代码:

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>Ralph</li>

</ul>

jQuery 代码:

$("ul li:first-child")

结果:

[ <li>John</li>, <li>Glen</li> ]

:last-child 返回值:Array<Element(s)>:  匹配最后一个子元素

':last'仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素

演示样例描写叙述:在每一个 ul 中查找最后一个 li

HTML 代码:

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>Ralph</li>

</ul>

jQuery 代码:

$("ul li:last-child")

结果:

[ <li>Brandon</li>, <li>Ralph</li> ]

:only-child 返回值:Array<Element(s) >  假设某个元素是父元素中唯一的子元素,那将会被匹配

假设父元素中含有其它元素,那将不会被匹配。

演示样例描写叙述:在 ul 中查找是唯一子元素的 li

HTML 代码:

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

<ul>

  <li>Glen</li>

</ul>

jQuery 代码:

$("ul li:only-child")

结果:

[ <li>Glen</li> ]

版权声明:本文博主原创文章,博客,未经同意不得转载。

Jquery简介选择的的更多相关文章

  1. jQuery编程基础精华01(jQuery简介&comma;*对象&dollar;&comma;jQuery对象、Dom对象&comma;链式编程&comma;选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  2. jQuery&colon;(一)jQuery简介

    一.jQuery简介jQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装. 二.jQuery的优势1 ...

  3. jQuery 简介

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...

  4. jQuery简介

    jQuery简介 jQuery是继Prototype之后的又一个javascript库,它由John Resig创建于2006年1月. Javascript库作用比较: 1. Prototype(ht ...

  5. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  6. JQUERY 模糊选择

    JQUERY 模糊选择        [属性名称]         匹配包含给定属性的元素      [att=value]       匹配包含给定属性的元素      [att*=value]   ...

  7. jQuery简介&lt&semi;思维导图&gt&semi;

    jQuery是继prototype之后有一个优秀的Javascript库,它由John Resig创建于2006年1月.它简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.它独特 ...

  8. jquery中选择checkbox拼接成字符串,然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

  9. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

随机推荐

  1. js基础篇——变量

    a.变量类型 变量类型 构造函数 举例 类型检测typeof 字符串 function String() var t = "chua"; var m = new String(&q ...

  2. Matlab基本函数-conj函数

    Matlab基本函数-conj函数 1.conj函数:用于计算复数的共轭值 2.用法说明:y=conj(x)函数计算复数x的共轭值.输出结果y的维数跟输入x的维数一致,返回值为:real(y)-i*i ...

  3. django中使用Profile扩展User模块(基于django 1&period;10版本下)

    版本:Django 1.10.1(其他版本可能有不同的实现好解决办法) 参考官方文档:https://docs.djangoproject.com/en/1.10/topics/auth/custom ...

  4. 百度BAE JAVA环境项目部署和调试

    起初在一个应用挂在虚拟主机上,昨天早上虚拟主机挂了.本来考虑迁移到SAE上的,但之前发现SAE的JVM云豆消耗的太快(PS:我是中级开发者,每月 10000云豆,如果有哪位大神对SAE JAVA云豆能 ...

  5. Python新手学习基础之数据结构-列表2 添加

    insert 除了使用索引,我们还可以用列表的insert方法,在列表的指定位置添加新的值. insert的用法: list.insert(index, item) 例如: like_animals ...

  6. Web Api学习一

    接触WebApi读的第一篇文章: ASP.NET Web API(一):使用初探,GET和POST数据 实践过程中,用的Fiddler模拟Post请求时收到的对象总是为空null 解决:将文章中的内容 ...

  7. Rotate It &excl;&excl;&lpar;思维&rpar;

    Rotate It !! Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  8. 端口映射工具 redir&sol;socat&sol;xinetd - 运维技术 - 开源中国社区

    端口映射工具 redir/socat/xinetd - 运维技术 - 开源中国社区 端口映射工具 redir/socat/xinetd    10人收藏此文章, 我要收藏 发表于3天前(2013-08 ...

  9. configparser配置文件模块

    1.configparser的作用 mysql等很多文件的配置如下: [DEFAULT]ServerAliveInterval = 45Compression = yesCompressionLeve ...

  10. 详解node &plus; mongoDb&lpar;mongoDb安装、运行,在node中连接、增删改查&rpar;

    一.序言 好久没写博客了,这次主要聊聊 node 和 mongoDb . 先说明一下技术栈  node + express + mongoose + mongoDb.这篇博客,主要讲述 mongoDb ...