jQuery入门

1.先导入jQuery的库

${pageContext.request.contextPath }：用的是全限定路径名，这样做跟相对路径比以后移植代码不容易报错

2.jQuery的基本格式

注：1. 其中$(function(){ }) 作为程序入口
$就是jQuery简写

2. $(fn)、$(document).ready(fn)与window.onload的区别？（项目维护时用到）
   · $(fn)、$(document).ready(fn)是等价的，哪个代码在前面哪个先执行
   Jsp的dom树结构加载完毕即刻调用方法
   · window.onload 最后执行
   Jsp的dom树结构加载完，css、js等静态资源加载完毕执行

3. jQuery三种工厂方法（把js看成一个类，一个jQuery的对象）

①.jQuery(exp[,context])

  exp：选择器
  context：上下文，环境/容器，documemt

例：

	<a id="a4" class="c1" href="#">点我4</a>
</div>
<div>
	<p>
		<a id="a5" class="c1" href="#">点我5</a>
	</p>
</div>

标签选择器

//利用a标签获取jQuery实例

ID选择器（#）

//利用id=a3获取jQuery实例

类选择器（ . ）

包含选择器

（单层的，p下的a标签，如果上是p下的div里面包一个a就不行了）

p标签里有a标签的就会被选择，中间隔的是空格

组合选择器

标签之间用（，号）隔开，可以选择多个标签

·第二个参数的作用。（在div标签内部寻找a标签，然后给找到的标签添加事件）
如果第二个参数没有填写，那么默认是document（去整个jsp页面去找符合的）

② jQuery ( html )

html：基于html的一个字符串

例：

<select id="selId1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="selId2">
		<option value="-1">---请选择---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">


$(function( ){
$(“ : input [ name=’name1’ ] ” ) . click ( function () {
//在id=selId1的select的jQuery实例上追加“<option value=’1’>湖南</option> ” 的html的jQuery 的实例 
$( “ # selId1 ” ) . apped( “<option value=’1’>湖南</option> ” );
});

$(“ : input [ name=’name2’ ] ” ) . click ( function () {
//将“<option value=’1’>长沙</option> ” 的html的jQuery 的实例追加到id=selId2的select标签jQuery实例中
$( “<option value=’1’>长沙</option> ” ) . appedTo( “ # selId2 ” );
});

})

③jQuery(element)

element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

例：

<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">

·jQuery对象转js对象

·js对象转jQuery对象

4. this指针的作用

·事件源（获取当前按钮的按钮值）在方法里面出现的this就是事件源
·当前元素（点击按钮，获取所有a标签的值）