JQuery笔记(二)-选择器

最新推荐文章于 2024-04-19 15:10:07 发布

Kevin_Snake

最新推荐文章于 2024-04-19 15:10:07 发布

阅读量759

点赞数

分类专栏：框架类文章标签： jquery input div button class filter

本文链接：https://blog.csdn.net/Kevin_Snake/article/details/5259287

版权

框架类专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上一篇文章谈到了UI的重要性，以及用一个简单的例子说明了一下JQuery是什么样子的。从这篇文章看是，我们开始深入JQuery。

首先我们需要下载JQuery的类库，可以从JQuery的官方站点下载。http://jquery.com/

JQuery的类库包有两种，一种是用于生产环境的压缩版本,"JQuery-x.x.x.min.js" 大概几十K,另一种为开发环境用的版本"JQuery-x.x.x.js" 要100多K。

JQuery的内容很多，我这里不能一一讲解。所以我只能根据我的理解，就我认为在开发UI时用处最大的几个部分进行介绍和讨论。

Selector
节点操作
事件的绑定
Form对象的操作
对Ajax的支持
JQuery工具类
JQuery的插件

这一章我们首先讨论一下JQuery最强大也是最有特色的Selector,即选择器

Selector是JQuery中对HTML元素快速定位的工具，例如 $("a") 表示页面中所有的<a>元素

JQuery中的Selector共有以下几种：

1.根据Tag Name查找

例如 $("a") 表示页面中所有的<a>;$("div") 表示页面中所有的<div>等等

2.取得某个特定节点下的元素

2.1

那么$("input","form") 就代表两个form下的所有input元素，共8个

$("input",document.forms[0])表示第一个form下的所有input元素，共4个

$("input","body")表示body下所有的input元素，共12个

2.2

        <body>
                <a href="/category">Category</a>
                <ul id="nav">
                            <li><a href="#anchor1">Anchor 1</a></li>
                          <li><a href="#anchor2">Anchor 2</a></li>
                            <li><span><a href="#anchor3">Anchor 3</a></span></li>
                </ul>
        </body>

$("ul#nav li a") 表示ul下面的li下的<a>（最后一个不是，因为它位于<span>下）

3.根据ID定位元素

$("#TestID")取得ID为TestID的元素

$("div#TestID") 取得ID为TestID的div

4.利用filter函数

$("a").filter(".external") 选择class为external的<a>

同$("a").filter(function(){return $(this).hasClass("external");})

5.利用find函数

$("div").find("span")选择<div>下的<span>

filter和find的区别

filter只能查找第一级子标签，而find可以查找任意层级的子标签

例如 $("#testDIV").filter("a") 无法选择出任何标签，而$("testDIV").find("a")可以选择出<div>下的<span>下的<a>

6.end()函数

$("div#testDIV").find("a").end() 选择id为testDIV的<div>

7.andSelf()函数

$("div#testDIV").find("a").andSelf() 选择id为testDIV<div>和<a>

8.精确定位

$("li:eq(1)")选择第二个<li>

$("li:eq(1)").next()选择第三个<li>

$("li:eq(1)").prev()选择第四个<li>

$("li:eq(1)").parent()选择<ul>

$("li:eq(1)").parent().children()选择所有<li>

$("li:eq(1)").nextAll()选择序号大于1的<li>

$("li:eq(1)").prevAll()选择序号小于1的<li>

9.siblings()函数

<div id="content">
       <h1>Main title</h1>
       <h2>Section title</h2>
       <p>Some content...</p>
       <h2>Section title</h2>
       <p>More content...</p>
   </div>

$("h1").sibling("h2,h3,p") 选择<h1>的兄弟节点中的<h2>,<h3>,<p>

10.索引函数

:first 选择第一个值

:last 选择最后一个值

:even 选择偶数行

:odd 选择奇数行

:eq(n)选择指定行数(从0开始)

:lt(n)选择小于n的行数

:gt(n)选择大于n的行数

   <ol>
         <li>First item</li>
         <li>Second item</li>
         <li>Third item</li>
         <li>Fourth item</li>
   </ol>

$("ol li:first"),$("ol li:last")

$("tr:even").addClass("even") 将偶数行的<tr>的class置为even

11.contain

<span>Hello World</span>

$("span:contains('World')")

12.not

$("a:not(div.important a,a.nav)") 选择不在class为important的div下的<a>或class不为nav的<a>

13.根据可见性选择

$("p:hidden") 选择隐藏的<p>, $("p:visible")选择可见的<p>

14.根据属性选择

$("a[attr]")选择具有attr属性的<a>

$("a[attr=val]")选择属性attr等于val的<a>

$("a[attr!=val]")选择属性attr不等于val的<a>

$("a[attr^=val]")选择属性attr的值以val开头的<a>

$("a[attr$=val]")选择属性attr的值以val结尾的<a>

$("a[attr~=val]")选择属性attr中包含val的<a>

15.选择form中的组件

    :text <input type="text" />
    :password <input type="password" />
    :radio <input type="radio" />
    :checkbox <input type="checkbox" />
    :submit <input type="submit" />
    :image <input type="image" />
    :reset <input type="reset" />
    :button <input type="button" />
    :file <input type="file" />
    :hidden <input type="hidden" />

16.根据样式class选择

$(".style")选择class为style的标签

$("div.style")选择class为style的<div>

Kevin_Snake

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JQuery笔记(二)-选择器

上一篇文章谈到了UI的重要性，以及用一个简单的例子说明了一下JQuery是什么样子的。从这篇文章看是，我们开始深入JQuery。首先我们需要下载JQuery的类库，可以从JQuery的官方站点下载。http://jquery.com/JQuery的类库包有两种，一种是用于生产环境的压缩版本,"JQuery-x.x.x.min.js" 大概几十K,另一种为开发环境用的版本"JQuer
复制链接

扫一扫