jQuery学习(选择器)

最新推荐文章于 2024-09-05 16:56:18 发布

mockingbirds

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量898

点赞数

分类专栏： jquery 文章标签： jquery 选择器

本文链接：https://blog.csdn.net/mockingbirds/article/details/46662579

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下面的一段时间将会一步一步学习jquery，其实一直想写一系列关于jquery学习的记录，万事开头难，这次需要坚持。

jquery是一个优秀大JavaScript库，使用它，我们可以进行快速开发，不用写那么多的JavaScript代码，包含了对css，ajax，页面动画等重要的操作。更多关于jquery的信息，请百度一下，今天将学习jquery的选择器。

在页面中引入jquery

首先需要下载jquery

http://jquery.com/download/
这里有压缩的，也有没有压缩的，其实两个文件内容都是一样的，区别就是压缩过的对于程序猿来讲，很难读懂，因为去掉了很多空格，代码很紧凑，文件也比较小，这里我下载的是没有压缩的。

创建工程，引入jquery

这是我的工程目录：
这里写图片描述
在html中引入jquery-2.1.4.js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>jquery选择器</title>
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
</head>
<body>

</body>
</html>

添加页面载入函数

页面载入函数就是对window.load事件注册事件的一个代替，使程序员编写代码更加简单，不用绑定页面载入方法，我们可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

<script type="text/javascript">
    $(document).ready(function(){
        alert("hello world");
     });
</script>

此时在该页面载入的时候，就会首先alert一个”hello world”出来。。

jquery选择器

id选择器

使用jquery来选择html元素是很方便的，比如，之前很长的一段根据id选择则的代码document.getelementbyid(“id”) 在使用了jquery以后，只需要$(“#id”)即可。

<div id="id_one">this is first id</div>
<div id="id_two">this is second id</div>

$("#id_one")  将会得到id="id_one"的标签
$("#id_two")  将会得到id="id_two"的标签

element选择器

element选择器是根据给定的元素来进行选择的。比如有如下html内容：

<div id="id_one">this is first id</div>
<div id="id_two">this is second id</div>
<p id="paint">this is p</p>

使用
$("div")
匹配结果：
<div id="id_one">this is first id</div>
<div id="id_two">this is second id</div>

class选择器

class选择器是根据给定的类进行选择，类似于id选择器

<div id="id_one">this is first id</div>
<div id="id_two">this is second id</div>
<div class="class_one">this is first class</div>

使用：
$(".class_one")
匹配结果：
<div class="class_one">this is first class</div>

*选择器

使用*号选择器，可以选择body标签中的每一个元素。

<div id="id_one">this is first id</div>
<div id="id_two">this is second id</div>
<div class="class_one">this is first class</div>
<p id="paint">this is p</p>

使用：
$("*")
匹配结果：
<div id="id_one">this is first id</div>
<div id="id_two">this is second id</div>
<div class="class_one">this is first class</div>
<p id="paint">this is p</p>

selector1,selector2,selectorN选择器

这个选择器是可以添加多个过滤条件，这些条件过滤后的结果叠加以后返回。

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

使用：
$("div,span,p.myClass")
匹配结果：
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>

这里多个条件之间使用”,”分割，这里选择div标签，span标签，和class=”myClass”的标签。

ancestor descendant选择器

这个选择器是选择给定的祖先元素下的所有匹配的子元素。

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

找到form表单中的所有input元素
$("form input")
匹配结果：
[ <input name="name" />, <input name="newsletter" /> ]

parent > child

匹配给定的父元素的所有子元素

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

使用：
$("form > input")
匹配结果：
[<input name="name" />]

prev + next选择器

prev + next选择器将匹配紧接着prev元素后边的所有next元素

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

使用：
$("label + input")
匹配结果：
[<input name="name" />,<input name="newsletter" />]

prev ~ siblings选择器

prev ~ siblings选择器匹配prev的同辈元素

:first ,:last ,:even ,:odd选择器

:first，获取第一个元素。
:last 获取最后一个元素。
:even 匹配索引数是偶数的元素，索引从0开始
:odd 匹配索引数是奇数的元素，索引从0开始

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
</ul>

使用：
$("li:first")
结果：
[<li>first</li>]

$("li:last")
结果：
[<li>fifth</li>]

$("li:even")
[<li>first</li>,<li>third</li>,<li>fifth</li>]

匹配如：h1,h2,h3这样的标题元素

:focus

匹配当前获取获取焦点的元素

:contains(text)

:contains(text)匹配包含指定text的元素

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>

$("div:contains('John')")
匹配结果：
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

:hidden

匹配所有隐藏的元素

:visible

:visible匹配所有可见的元素

属性选择器

[attribute]

[attribute]匹配包含给定属性的元素

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

$("div[id]")
匹配结果：
[ <div id="test2"></div> ]

[attribute=value]
匹配给定的属性是某个特定值的元素
[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value]
匹配给定的属性是以某些值开始的元素

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

$("input[name^='news']")
结果：
[ <input name="newsletter" />, <input name="newsboy" /> ]

[attribute$=value]
匹配给定的属性是以某些值结尾的元素

[selector1][selector2][selectorN]

复合选择器，需要满足所有的条件

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

$("input[id][name$='man']")
结果：
[ <input id="letterman" name="new-letterman" /> ]

表单选择器

:button
匹配所有按钮
:checkbox
匹配所有复选框
:password
匹配所有密码框
:text
匹配所有的单行文本框
:input
匹配所有 input, textarea, select 和 button 元素
:radio
匹配所有单选按钮
:submit
匹配所有提交按钮
:image
匹配所有图像域
:file
匹配所有文件域
:enabled
匹配所有可用元素
:checked
匹配所有选中的被选中元素
:selected
匹配所有选中的option元素