一、安装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);
		});





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");