初学之jQuery相关一

一般我们在声明一个jQuery对象变量的时候在变量名前面加上$：
例如：var $varapp = jQuery对象

从DOM对象转换成jQuery对象时需要加：$(DOM对象)

一、查找标签

基本选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

所有元素选择器:

$("*")

组合选择器:

$("#id, .className, tagName")

搭配用法：

$("div.d1") 找到div标签中class类等于d1

层级选择器

x和y可以为任意选择器：

  $(“x y”); // x的所有后代y

  $(“x > y”); // x的所有儿子y

  $(“x + y”) // 找到所有紧挨在x后面的y

  $(“x ~ y”) // x之后所有的兄弟y

基本筛选器

<p>1</p>
<p>2</p>
<p class="p3">3</p>
<p>4</p>
<p>5</p>

  $(“p:first”) // 第一个

  $(“p:last”) // 最后一个

  $(“p:eq(index)”) // 索引等于index的那个元素

  $(“p:even”) // 匹配所有索引值为偶数的元素，从 0 开始计数

  $(“p:odd”) // 匹配所有索引值为奇数的元素，从 0 开始计数

  $(“p:gt(index)”) // 匹配所有大于给定索引值的元素

  $(“p:lt(index)”) // 匹配所有小于给定索引值的元素

  $(“p:not(.p3)”) // 移除所有满足not条件的标签

<div class="p3">
	<p>p3-1</p>
	<p>p3-2</p>
	<p>p3-3</p>
	<div>11111</div>
</div>

  $(“div:has( p)”) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找);div下的所有标签

  $(“div:not(:has( p))”) // 找到所有后代中不含p标签的div标签;<div>11111</div>

属性选择器

<lable>用户名
	<input type="text" maxlength="10">
</lable>
<p>
	<lable>足球</lable>
	<input id="s1" type="checkbox">

	<lable>篮球</lable>
	<input id="s2" type="checkbox">
</p>
<lable>密码
	<input type="password">
</lable>

  $(“p input[type=checkbox]”) // 取到checkbox类型的input标签

  $(“input[type!=‘text’]”) // 类型不等于"text"的input标签

表单选择器

  $(“input:text”)

  $(“input:password”)

  $(“input:file”)

  $(“input:radio”)

  $(“input:checkbox”)

  $(“input:submit”)

  $(“input:reset”)

  $(“input:button”)

表单对象属性

:enabled  // 可用的标签
:disabled 
:checked
:selected // 选中的

二、筛选器方法

<div id="c1">div-c1
	<div id="c2">div-c2</div>
	<div id="c3">div-c3</div>
	<div id="c4">div-c4
		<div id="c5">div-c5
			<p id="p1">1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</div>
	</div>
</div>

下一个元素：

$("#c2").next()
$("#c2").nextAll()
$("#c2").nextUntil("#c4") //不包含查找的条件；<div id="c3">div-c3</div>

上一个元素：

$("#c3").prev()
$("#c4").prevAll()
$("#c4").prevUntil("#c1") // c3、c2

父元素

$("#p1").parent()
$("#p1").parents()  // 查找当前元素的所有的父辈元素
$("#p1").parentsUntil("#c1") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素

$("#c5").children();// 儿子们
$("#c2").siblings();// 兄弟们

查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p") //主要用于前面的结果自己是无法控制的，例如是参数传过来的，后面我们可以用find方法去找我们想要获取的元素
等价于$("div p")

筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter("#p1")  // 从结果集中过滤出有c1样式类的
等价于 $("div #p1")

补充：

<p id="p1">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

  $(“p”).first() // 获取匹配的第一个元素

  .last() // 获取匹配的最后一个元素

  .not() // 从匹配元素的集合中删除与指定表达式匹配的元素

  .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

  .eq() // 索引值等于指定值的元素