jQuery整理笔记2----jQuery选择整理

一个、基本的选择

1、ID选择器

JavaScript提供了原生方法实如今DOM中选择指定ID值得元素。

使用方法例如以下：

var element=document.getElementById("id");

jQuery简化了其操作： var $element=$("#id");

实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在运行效率上要低于JavaScript的原生方法。

2、类型选择器

跟ID选择器一样，JavaScript相同提供了原生的方法用来在DOM中选择指定类型的元素。

var elements=document.getElementByTagName(tagName"");

jQuery对其包装后的简化方法是 var $elements=$("tagName");

3、类选择器

JavaScript没有提供内置的类选择方法，我们能够自己为其拓展一个。代码例如以下：

document.getElementsByClassName=function(className){

     var el=[],

         _el=document.getElementsByTagName("*");   //获取全部元素

         for(var i=0;i<_el.length;i++){

            if(_el[i]==className){

              el[el.length]=_el[i];

            }

          }

    return el;

}

以下举个样例，一个页面有4个div,通过JavaScript使div1和div3的前景色设置成红色，通过jQuery将div2和div4的前景色设置成蓝色

代码例如以下实例2-1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  document.getElementsByClassName=function(className){

     var el=[],

         _el=document.getElementsByTagName("*");   //获取全部元素

         for(var i=0;i<_el.length;i++){

            if(_el[i].className==className){

              el[el.length]=_el[i];

            }

          }

		 return el;

	}

	window.onload=function (){

		var redDiv= document.getElementsByClassName("red");

		for(var i=0;i<redDiv.length;i++){

		  redDiv[i].style.color="red";

		}

	};

	$(function(){

		$(".blue").css("color","blue");

	})

  </script>

 </head>

 <body>

  <div id="" class="red">

	div1

  </div>

  <div id="" class="blue">

	div2

  </div>

  <div id="" class="red">

	div3

  </div>

  <div id="" class="blue">

  </div>

 </body>

</html>

上述样例能够看得到jQuery的写法要相对简单一些。并且jQuery已经是一个成熟的框架了，它内部封装的类选择器方法要比咱们自己定义的效率高。

4、通配选择器（"*"）

该选择器能够匹配上下文中的全部元素，以下演示样例将选择body下的全部元素

实例2-2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

	$(function(){

		$("body *").css("color","red");

		$("div *").css("color","blue");

	})

  //-->

  </script>

 </head>

 <body>

	<div id="" class="">

		div1

		<span class="">div下的span</span>

		<table>

		<tr>

			<td>div下的table</td>

		</tr>

		</table>

	</div>

	</br>

	<span class="">span1</span>

	</br>

	<textarea name="" rows="3" cols="80">textarea1</textarea>

	<table>

	</br>

	<tr>

		<td>table1</td>

	</tr>

	</table>

 </body>

</html>

5、分组选择器

jQuery支持CSS的分组选择器，通过这样的方式能够扩大选择器的选择范围，同一时候增强jQuery选择器的应用能力。选个多组元素能够通过逗号分隔符来分隔多个不同的选择器。

，这些选择器能够是随意类型的。也能够是复合选择器。

实例2-3：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

	$(function(){

		$("h2,#wrap,span.red,[title='text']").css("color","red");//分别选择了元素h2、id为wrap的、span下的class为red的、title为text的

	})

  </script>

 </head>

 <body>

	<h2>H2</h2>

	<div id="wrap" class="">

		DIV

	</div>

	<div id="" class="red">

		DIV_CLASS_RED

	</div>

	<span class="red">SPAN</span>

	<p title="text">P</p>

 </body>

</html>

二、层级选择器

层级选择器就是依据HTML文档结构中节点之间的包括或者并列关系，决定匹配元素的一种方法。

1、关系选择器

表2-1 关系选择器
选择器	说明
ancestor descendant	在给定祖先元素下匹配全部后代元素。ancestor，表示不论什么有效选择器，descendant表示用以匹配元素的选择器，而且它是第一个选择器的后代元素。比如：$("form input")能够匹配表单下的全部input元素。
parent>child	在给定父元素下匹配全部子元素。perent表示不论什么有效选择器。descendant表示用以匹配元素的选择器。而且它是第一个选择器的后代元素。比如：$("table>tr")能够匹配table下的全部tr元素
prev + next	匹配全部紧接在prev元素后的next元素。prev表示不论什么有效选择器。next表示一个有效选择器而且紧接着第一个选择器。比如：$("lable + input")匹配全部跟在lable后面的input元素
prev ~ siblings	匹配prev元素之后的全部siblings元素。prev表示不论什么有效选择器，siblings表示一个选择器，而且它是作为prev选择器的同辈。比如：$("form ~ input")匹配全部跟form元素同辈的input元素。

通过上面的表格我们不一定能全然明确这几个选择器的细节地方，还是写个实例演示一下。

实例2-4：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 关系选择器演示实例 </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

	$(function(){

		$("div").css("border","solid 1px red");			//控制全部div元素的边框宽度为1 颜色为红色

		$("div>div").css("margin","2em");				//控制div下属的全部子div缩进两个中文字符

		$("div div").css("background","#ff0");			//控制一级div下属的全部div元素的背景色为#ff0

		$("div div div").css("background","#f0f");		//控制第三层div背景色为#f0f

		$("div + p").css("margin","2em");				//控制与div相邻的p元素缩进两个中文字符，仅仅匹配div后面紧接着那个p元素

		$("div:eq(1) ~ p").css("background","blue");	//控制页面第二个div（eq(1)代表取第二个)之后全部的与第二个div同辈的p元素的背景色为蓝色

	})

  //-->

  </script>

 </head>

 <body>

	 <p>段落文本10</p>

	<div id="" class="">一级div元素

		<div id="" class="">二级div元素

			<div id="" class="">三级div元素

			</div>

			<p>段落文本31</p>

			<p>段落文本32</p>

		</div>

		<p>段落文本21</p>

		<p>段落文本22</p>

	</div>

	<p>段落文本11</p>

	<p>段落文本12</p>

 </body>

</html>

2、子元素选择器

这个写个实例吧。

实例2-5：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

 <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

 <script type="text/javascript">

 <!--

	$(function(){

		//$("ul li:nth-child(1)").css("background","#ff6")		//匹配每一个ul元素下的第一个li元素，可能匹配0个或者多个

		//$("ul li:nth-child(3n+2)").css("background","#6ff")	//匹配每一个ul元素下第3n+2个li元素，n取值为0，1,2。.......

		//$("ul li:first-child").css("color","red");			//匹配每一个ul元素下的第一个li元素

		//$("ul li:first").css("color","red");					//匹配第一个ul元素下的第一个li元素 跟上面的那个是有差别的

		//$("ul li:last-child").css("color","blue");			//匹配每一个ul元素下的最后一个li元素

		//$("ul li:last").css("color","red");					//匹配最后一个ul元素下的最后一个li元素

		$("ul li:only-child").css("color","red")				//假设li元素是ul元素下的唯一子元素(仅仅有一个li元素,没有其它元素)，

																//那么能够匹配。否则不可匹配

	})

 //-->

 </script>

 <body>

	<ul>

		<li>列表11</li>

		<li>列表12</li>

		<li>列表13</li>

		<li>列表14</li>

		<li>列表15</li>

		<li>列表16</li>

	</ul>

	<ul>

		<li>列表21</li>

		<li>列表22</li>

		<li>列表23</li>

		<li>列表24</li>

		<li>列表25</li>

		<li>列表26</li>

	</ul>

 </body>

</html>

注意：

A、:nth-child(even) :nth-child(odd) //各自是匹配偶数位元素和奇数位元素能够用2n和2n+1替代

B、我们用过的eq(n)选择器是从0開始计数的。而刚刚整理的那些选择器是从1開始计数的，使用的时候要注意

三、过滤选择器

过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器与CSS的伪类选择器语法格式同样，即以冒号作为前缀标识符。依据需求的不同，过滤选择器又能够分为定位过滤器、内容过滤器、可见过滤器。

以下分别介绍：

1、定位过滤器

定位过滤器主要通过编号和排位筛选特定位置上的元素，或者过滤掉特定元素.

以上效果实现代码实例2-6：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

		$(function(){

			$("tr:first").css("color","red");					//设置第一行字体为红色

			$("tr:eq(0)").css("font-size","20px");				//设置第一行字体大小为20像素 font-size:20px

			$("tr:last").css("color","blue");					//设置最后一行字体为蓝色

			$("tr:even").css("background","#ffd");				//设置偶数行背景色为#ffd

			$("tr:odd").css("background","#dff");				//设置技术行背景色为#dff

			$("tr:gt(3)").css("font-size","14px");				//设置从第五行開始全部的字体大小为14px

			$("tr:lt(4)").css("font-size","14px");				//设置1-4行字体大小为14px

		})

  //-->

  </script>

 </head>

 <body>

	<table>

	<tr>

		<th>选择器</th>

		<th>说  明</th>

	</tr>

	<tr>

		<td>:first</td>

		<td>匹配找到的第一个元素。比如。$("tr:first")表示匹配表格的第一行</td>

	</tr>

	<tr>

		<td>:last</td>

		<td>匹配找到的最后一个元素，比如。$("tr:last")表示匹配表格的最后一行</td>

	</tr>

	<tr>

		<td>:not</td>

		<td>去除全部与给定选择器匹配的元素。比如，$("input:not(:checked)")能够匹配全部未选中的input元素</td>

	</tr>

	<tr>

		<td>:even</td>

		<td>匹配全部索引值为偶数的元素，从0開始计数。比如$("tr:even"),能够匹配表格的偶数行</td>

	</tr>

	<tr>

		<td>:odd</td>

		<td>上面是偶数，这个是奇数</td>

	</tr>

	<tr>

		<td>:eq</td>

		<td>匹配一个给定索引值的元素，比如。$("tr:eq(0)")能够匹配第一个tr</td>

	</tr>

	<tr>

		<td>:gt</td>

		<td>匹配全部大于给定索引值的元素。从0開始计数。比如，$("tr:gt(0)")能够匹配表格的第二行以及后面的行</td>

	</tr>

	<tr>

		<td>:lt</td>

		<td>上面是大于，这个是小于，eq就相当于等于呗</td>

	</tr>

	<tr>

		<td>:header</td>

		<td>匹配如h1\h2\h3类标题元素</td>

	</tr>

	<tr>

		<td>:animated</td>

		<td>匹配全部正在运行动画效果的元素</td>

	</tr>

	</table>

 </body>

</html>

2、内容过滤器

内容过滤器主要依据匹配元素所包括的的子元素或者文本内容进行过滤。主要有四种方式：

表2-2 内容选择器
选择器	说明
:contains	匹配包括给定文本的元素。比如，$("div:contains('图片')") 匹配全部包括文本"图片"的div元素
:has	匹配含有选择器所匹配的元素的元素。比如，$("div:has(p)")匹配全部包括p元素的div元素
:empty	匹配全部不包括子元素或者文本的空元素
:parent	匹配含有子元素或者文本的元素。与empty相互相应

实例2-7：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

		$(function(){

			$("li:empty").text("空内容");				//匹配空li元素

			$("div ul:parent").css("background","#ff1");//匹配div下包括的不为空的ul元素

			$("h2:contains('标题')").css("color","red");//匹配包括文本内容"标题"的h2元素

			$("p:has(span)").css("color","blue");		//包括span元素的p元素

		})

  //-->

  </script>

 </head>

 <body>

	 <div id="" class="">

		<h2>标题</h2>

		<p>段落文本1</p>

		<p><span>段落文本2</span></p>

		<ul>

			<li></li>

			<li></li>

		</ul>

	 </div>

 </body>

</html>

运行效果例如以下：

3、可见过滤器

可见过滤器就是依据元素的可见或者隐藏来进行匹配的

表2-3 可见过滤器
选择器	说明
:hidden	匹配全部不可见元素，或者type为hidden的元素
:visible	匹配全部可见元素

这个比較简单好记

实例2-8：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

	$(function(){

		$("p:odd").hide();

		$("p:odd").css("color","red");

		$("p:visible").css("color","blue");

		$("p:hidden").show();

	})

  //-->

  </script>

 </head>

 <body>

	<p>段落文本1</p>

	<p>段落文本2</p>

	<p>段落文本3</p>

	<p>段落文本4</p>

 </body>

</html>

运行效果：

四、属性选择器

属性选择器通常是依据元素的属性和其值作为过滤的条件来匹配对应的DOM元素

1、七种属性选择器

表2-4 属性选择器
选择器	说明
[attribute]	匹配包括给定属性的元素，比如。$("div[id]") 匹配全部包括id属性的div元素
[attridute=value]	匹配属性等于特定值的元素。属性值的引號大多数是可选的，假设属性值包括"]"时，须要加引號以避免冲突。
[attridute!=value]	跟上面的相相应。非常好理解
[attridute^=value]	匹配给定的属性是以某些值開始的元素，比如，$("input[name^='text']")表示全部name属性值是以text開始的input元素
[attridute$=value]	匹配给定的属性是以某些值结尾的元素。跟上面的相相应
[attridute*=value]	匹配给定的属性是包括某些值得元素
[selector1][selector2][selector3]	复合属性选择器。须要同一时候满足多个条件时使用，比如。$(input[name*='text'][id])表示匹配全部name属性值包括text的且包括id属性的input元素。

2、使用属性选择器演示样例

看一个演示样例。在这个演示样例中将依据超链接文件的类型，分别为不同类型的文件加入图标。

实例2-8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

	$(function(){

		var $a1=$("a[href$=pdf]");

		$a1.html($a1.attr("href")+"<img src='images/pdf.jpg'/>");

		var $a2=$("a[href$=rar]");

		$a2.html($a2.attr("href")+"<img src='images/rar.jpg'/>");

		var $a3=$("a[href$=jpg],[href$=bmp]");

		$a3.html($a3.attr("href")+"<img src='images/jpg.jpg'/>");

		var $a4=$("a[href^='http']");

		$a4.html($a4.attr("href")+"<img src='images/html.jpg'/>");	

	})

  //-->

  </script>

 </head>

 <body>

  <a href="1.pdf">超链接</a><br>

  <a href="2.rar">超链接</a><br>

  <a href="3.jpg">超链接</a><br>

  <a href="4.bmp">超链接</a><br>

  <a href="http://www.baidu.com">超链接</a>

 </body>

</html>

运行前后效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

五、表单选择器

表单是页面中使用频率较高的元素之中的一个，可是非常多表单域都是使用input元素来定义的，为了方便用户可以灵活操作表单。jQuery专门定义了表单选择器。使用表单选择器可以方便地获取表单中某类表单域对象。

1、基本表单选择器

表2-5 表单选择器
选择器	说明
:input	匹配全部input、textarea、select和button元素
:text	匹配全部单行文本框
:password	匹配全部password框
:radio	匹配全部单选button
:checkbox	匹配全部复选框
:submit	匹配全部提交button
:image	匹配全部图像域
:reset	匹配全部重置button
:button	匹配全部普通button
:file	匹配全部文件域
:hidden	匹配全部隐藏域

以下看一个表单实例

实例2-9：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

		$(function(){

			$("#form1 :text").val("改动后的文本域");

			$("#form1 :password").val("改动后的密码域");

			$("#form1 :checkbox").val("改动后的复选框");

			$("#form1 :radio").val("改动后的单选框");

			$("#form1 :image").val("改动后的图像域");

			$("#form1 :file").val("改动后的文件框");

			$("#form1 :hidden").val("改动后的隐藏域");

			$("#form1 :button").val("改动后的普通button");

			$("#form1 :submit").val("改动后的提交button");

			$("#form1 :reset").val("改动后的重置button");

		})

  //-->

  </script>

 </head>

 <body>

	<form id="form1" method="post" >

		<input type="text" name="" value="文本域"><br>

		<input type="password" name="" value="密码域"><br>

		<input type="checkbox" name="" value="复选框">复选框<br>

		<input type="radio" name="" value="单选button">单选button<br>

		<input type="image" src="" value="图像域"><br>

		<input type="file" src="" value="文件域"><br>

		<input type="hidden" name="" value="隐藏域"><br>

		<input type="button" value="普通button" onclick=""><br>

		<input type="submit" value="提交button" onclick=""><br>

		<input type="reset"  value="重置button" onclick=""><br>

	 </form>

 </body>

</html>

处理前后效果图：

注意：$("#form1 text") 在form1后面有一个空格

2、高级表单选择器

除了简单的表单域选择器外，jQuery还依据表单域中特有的属性定义了4个表单属性选择器，这些选择器与基础表单选择器不同。它们能够选择不论什么类型的表单域，由于它主要依据表单属性来选择。

表2-6 高级表单选择器
选择器	说明
:enabled	匹配全部可用元素
:disabled	匹配全部不可用元素
:checked	匹配全部被选中的元素（复选框、单选button等，不包含select的option）
:selected	匹配全部选中的option元素

实例2-10：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  <!--

		$(function(){

			$("#form1 :disabled").val("不可用");

			$("#form1 :enabled").val("可用");

			$("#form1 :checked").removeAttr("checked");

			$("#form1 :selected").removeAttr("selected");

		})

  //-->

  </script>

 </head>

 <body>

	<form id="form1" method="post" >

		<input type="text" name=""  disabled="disabled" value="文本域"><br>

		<input type="text"          disabled="disabled" value="文本域"><br>

		<input type="text"  value="文本域"><br>

		<input type="checkbox" name="" value="复选框" checked="checked">复选框<br>

		<input type="radio" name="" value="单选button">单选button<br>

		<select name="">

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

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

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

		</select>

	 </form>

 </body>

</html>

前后效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

jQuery整理笔记2----jQuery选择整理的更多相关文章

jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
jQuery:自学笔记(2)——jQuery选择器
jQuery:自学笔记(2)——jQuery选择器基本选择器说明 jQuery的基本选择器与CSS的选择器相似: 实例标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery整理笔记八----jQuery的Ajax
Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...
JQuery学习笔记【CSS选择符】--02
Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...
jQuery学习笔记（jquery.ui插件）
官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...
jQuery学习笔记（jquery.validate插件）
jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...
锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器常见的CSS选择器有以下几种: 选择器语法描述示例标签选择器 E{CSS规则} 以文档元素为选择符 t ...
jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作查找节点创建节点删除节点复制节点替换节点包裹节点属性操作样式操作对HTML.文本和值的操作遍历节点 CSS-DOM操作小结本 ...

随机推荐

nginx & flup & django & python3.x @ window7配置备忘录
最近考虑原Prism建筑(非职业.半专业人士认为C/S建筑)至B/S迁移,主要是由于部署问题,包括两个因素:已经做,虽然一键安装和部署的一个因素,心存顾虑,虽然我一再声明这是一个绿色软件.还有一个因素 ...
HDU 3277Marriage Match III（二分+并查集+拆点+网络流之最大流）
题目地址:HDU 3277 这题跟这题的上一版建图方法差点儿相同,仅仅只是须要拆点.这个点拆的也非常巧妙,既限制了流量,还仅仅限制了一部分,曾经一直以为拆点会所有限制,原来也能够用来分开限制,学习了. ...
hdu5172（线段树）
传送门:GTY's gay friends 题意:判断区间[l,r]内的数字是否符合1~len(r-l+1)的一个全排列. 分析:pos[i]记录数字i出现的最大位置,pre[i]记录在位置i的数字a ...
sdbntrjm57k
http://www.zhihu.com/collection/24337307 http://www.zhihu.com/collection/24337259 http://www.zhihu.c ...
C++ Primer 学习笔记_61_重载操作符与转换 --自增/自减操作符
重载操作符与转换 --自增/自减操作符引言: 自增,自减操作符常常由诸如迭代器这种类实现,这种类提供相似于指针的行为来訪问序列中的元素.比如,能够定义一个类,该类指向一个数组并为该数组中的元素提供訪 ...
HDU 5009 Paint Pearls （动态规划）
Paint Pearls Problem Description Lee has a string of n pearls. In the beginning, all the pearls have ...
PropertiesDemo
import org.apache.commons.configuration.ConfigurationException; import org.apache.commons.configurat ...
hdu1505（dp求最大子矩阵）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1505 分析: 这题是HDU 1506 的加强版,定义一个二维数组,d[i][j]表示第i行j列元素在前 ...
泛泰A850 (高通8064+720p)刷4.4专用中文recovery TWRP2.7.1.3版
欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...
WPF中不规则窗体与WebBrowser控件的兼容问题解决办法
原文:WPF中不规则窗体与WebBrowser控件的兼容问题解决办法引言这几天受委托开发一个网络电视项目,要求初步先使用内嵌网页形式实现视频播放和选单,以后再考虑将网页中的所有功能整合进桌面程序. ...

jQuery整理笔记2----jQuery选择整理

jQuery整理笔记2----jQuery选择整理的更多相关文章

随机推荐

热门专题