Jquery简介选择的

Jquery简介选择的

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

前言

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> ]
 

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116902.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Mysql数据库课程设计

    Mysql数据库课程设计Hello小伙伴们,大家好,我是楠橘星!!今天给大家分享一下使用javafx编写的前端的Mysql数据库课程设计题库与试卷生成系统!废话不多说了,直接上截图,希望对大家有所帮助!(建议拿来参考不建议直接CV哦!)1.系统需求分析1-1、功能分析通过深入细致的调查,多方面搜集资料,以及实地考察等方法,经过总结研究,总结出了试卷生成系统的的基本的业务功能,详细如下:学生信息维护:主要完成学生的学号、班级、考试信息等操作。教师信息维护:主要是教师信息的添加、修改和删除等操作。题库信息维护

  • dedecms幻灯片调用图片模糊的解决办法

    dedecms幻灯片调用图片模糊的解决办法

  • 黑盒测试的常见的测试用例设计方法有哪些[通俗易懂]

    黑盒测试的常见的测试用例设计方法有哪些[通俗易懂]测试用例怎么设计?一般根据业务知识掌握,之前已有的回归测试用例,测试知识库,测试需求开始设计。黑盒测试的常见的测试用例设计方法有哪些?1)等价类划分:等价类是指某个输入域的子集合.在该子集合中,各个输入数据对于揭露程序中的错误都是等效的.并合理地假定:测试某等价类的代表值就等于对这一类其它值的测试.因此,可以把全部输入数据合理划分为若干等价类,在每一个等价类中取一个数据作为测试的输入条件,就可以用少量代表性的测试数据.取得较好的测试结果.等价类划分可有两种不同的情况:有效等价类和无效等价类.

  • 找不到指定的模块

    找不到指定的模块找不到指定的模块。(异常来自HRESULT:0x8007007E)

  • ShellExecute, WinExec, CreateProcess区别

    ShellExecute, WinExec, CreateProcess区别ShellExecute  ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件、打开一个目录、打印一个文件等等),并对外部程序有一定的控制。  有几个API函数都可以实现这些功能,但是在大多数情况下ShellExecute是更多的被使用的,同时它并不是太复杂。  ShellExecute函数原型及参数含义如下:  ShellExecute(  HWNDhwnd,…

  • PyCharm设置Python版本

    PyCharm设置Python版本PyCharm默认会使用虚拟的Python解释器,即使没有安装也能够运行Python代码,但有强迫症的程序员一定不能忍受Project中存在这么多的文件目录。设置Python版本File-&gt;Settings-&gt;Project-&gt;ProjectInterpreter,设置本地安装的Python解释器版本创建Python工程创建工程时,选择Existin…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号