jQuery 基础

一、安装jQuery 

去jq官网下载jq文件，然后添加到代码里：

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

在代码中添加这一句，就引入了js库jq.

jq有两份版本，后缀分为.js和.mim.js，后者时压缩版，压缩版时删除了不必要的空行和空白，比较难读，但是体积非常小，当许多页面用到jq的时候可以用压缩版的。

当不知到你适合选择哪一个jq的时候可以用条件注释来选择：

<span style="white-space:pre">	</span><!--[IF lt IE 9]>
<span style="white-space:pre">	</span><script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<span style="white-space:pre">	</span><![endif]-->
<span style="white-space:pre">	</span><!--[if gte IE 9]><!-->
<span style="white-space:pre">	</span><script type="text/javascript" src="jquery-2.0.2.js"></script>
<span style="white-space:pre">	</span><!--<![end if]-->

二、理解jq的$函数

$函数时Jq函数的简写形式，全写是：jquery(选择的dom),因为别的js里面有$符号，可以使用jQuery.noConflict();函数放弃$符号；也可以自定义别的简写符号来代替$，如：var jq = jQuery.noConflict();就可以用jq代替$符号了。

三、jq主函数的参数

$(function) 等dom就绪后才执行的函数
$(selector) $(selector,context) 从页面中选择元素
$(HTMLElement) $(HTMLElement[])选择一个html元素护着一组html元素
$() 选择0个元素
$(HTML) $(HTML, map) 基于html代码片段生成新元素，支持科选的Map对象参数，利用它定义新元素的属性

四、选择元素

使用上下文限制搜索范围

如：

<span style="white-space:pre">		</span>$("img:odd"),<strong>$(".drow")</strong>.onmouseenter(function(e){
			$(this).css("opacity",0.5);
		}).onmouseout(function(e){
			$(this).css("opacity",1.0);
		});

第二个选择是限制范围，也可以使用html元素当作选择的起点，如：

<span style="white-space:pre">		</span>var elem = document.getElementById('oblock');
		$("img:odd"),$(elelm).onmouseenter(function(e){
			$(this).css("opacity",0.5);
		}).onmouseout(function(e){
			$(this).css("opacity",1.0);
		});

$函数选择元素时，返回的时0个或多个DOM元素。

jQuery对象有许多的方法和属性：

context 选择元素时使用的上下文对象

each( function ) 在每个选中元素上运行给定的function( 并返回function 修改后的jQuery对象)

get（index） 返回给定索引值对应的htmlelement对象

index( htmlelement) 返回给定htmlelement在Jq对象中的索引序号

index(selector)利用selector，返回选择sq中匹配selector元素的索引

length  返回jq对象中包含元素的个数

selector 返回选择器

size() 返回jq对象中包含元素的个数

toArray() 返回一个有Jq对象中包含的元素组成的element对象数组

五、事件处理

可以形成方法链，如：

$("img:odd"),$(elelm).onmouseenter(function(e){
			$(this).css("opacity",0.5);
		}).onmouseout(function(e){
			$(this).css("opacity",1.0);
		});

 或者：

$("label").css("color","blue").css("font-size",".75em");