首页 > 代码库 > Ajax学习笔记(三)

Ajax学习笔记(三)

2024-07-12 21:42:05   222人阅读

三、jQuery库详解
1、使用jQuery之后，javascript操作的不再是HTML元素对应的DOM对象，而是包装DOM对象的jQuery对象。js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性，从而实现动态更新HTML页面。
  由此可见，使用jQuery动态更新HTML页面只需以下两个步骤：
  (1)获取jQuery对象。jQuery对象通常是DOM对象的包装
  (2)调用jQuery对象的方法来改变自身。当jQuery对象被改变时，jQuery包装的DOM对象随之改变，HTML页面的内容也就随之改变了。
2、一个入门小案例
<body>
	<div id="zpc1"></div>
	<div id="zpc2"></div>
	<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>3、以CSS选择器访问DOM元素 
   每个CSS选择器可以对应一个或多个HTML元素，如果以CSS选择器作为$()函数的参数，$(selector)将可以获取该选择器对应的一个或多个HTML元素包装成的jQuery对象。
例程：
	<body>
		<ul>
			<li id="java">
				疯狂Java讲义
			</li>
			<li id="javaee" class="test">
				疯狂JavaEE讲义
			</li>
			<li id="ajax">
				疯狂Ajax讲义
			</li>
			<li id="xml">
				疯狂XML讲义
			</li>
			<li id="hadoop">
				疯狂Hadoop讲义
			</li>
			<li >
				<span id="workflow">疯狂workflow讲义</span>
			</li>
		</ul>
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>4、表单相关选择器
Jquery提供了专门匹配各种表单控件的选择器
5、jQuery操作数组的工具方法
   jQuery的$()函数都返回一个类似数组的jQuery对象，jQuery提供了如下几个常用方法操作类数组的jQuery对象。
例程：jQuery操作数组
  	<body>
		<div>
			<div id="java">
				疯狂Java讲义
			</div>
			<div id="javaee" class="test">
				疯狂JavaEE讲义
			</div>
			<div id="ajax">
				疯狂Ajax讲义
			</div>
			<div id="xml">
				疯狂XML讲义
			</div>
			<div id="hadoop">
				疯狂Hadoop讲义
			</div>
			<div >
				<span id="workflow">疯狂workflow讲义</span>
			</div>
		</div>	
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>6、jQuery对象和DOM对象间可以相互转化：jQuery对象的get()、get(index)方法返回DOM对象，$()和jQuery()方法返回jQuery对象
7、对jQuery对象进行过滤的相关方法
   例程:
  	<body>
		<div>
			<div id="java">
				疯狂Java讲义
			</div>
			<div id="javaee" class="test">
				经典企业级JavaEE应用框架讲义
			</div>
			<div id="ajax">
				疯狂Ajax讲义
			</div>
			<div id="xml">
				疯狂XML讲义
			</div>
			<div id="hadoop">
				疯狂Hadoop讲义
			</div>
			<div >
				<span id="workflow">疯狂workflow讲义</span>
			</div>
		</div>	
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>8、jQuery提供了类似DOM导航的方法，可以更加便捷地访问当前结点的兄弟结点、父节点和子节点，
   而且这些方法的返回值依然是jQuery对象，因此可以直接调用jQuery对象提供的工具方法。
例程：
  
<body>
		<div>
			<div id="java">
				疯狂Java讲义
			</div>
			<div id="javaee" class="test">
				经典企业级JavaEE应用框架讲义
			</div>
			<div id="ajax">
				疯狂Ajax讲义
			</div>
			<div id="xml">
				疯狂XML讲义
			</div>
			<div id="hadoop">
				疯狂Hadoop讲义
			</div>
			<div >
				<span id="workflow">疯狂workflow讲义</span>
			</div>
		</div>	
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>
9、链接方法
例程：
  	<body>
		<div>
			<div id="java">
				疯狂Java讲义
			</div>
			<div id="javaee" class="test">
				经典企业级JavaEE应用框架讲义
			</div>
			<div id="ajax">
				疯狂Ajax讲义
			</div>
			<div id="xml">
				疯狂XML讲义
			</div>
			<div id="hadoop">
				疯狂Hadoop讲义
			</div>
			<div >
				<span id="workflow">疯狂workflow讲义</span>
			</div>
		</div>	
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>10、jQuery支持的方法(jQuery()和$()的效果一样、jQuery和$效果一样)
    注意：jQuery.unique(array):删除array数组中的重复值。该array通常是DOM对象数组，如果是普通字符串或数值型数组将不起作用。
    使用jQuery命名空间的属性和方法
     如：jQuery.browser、jQuery.trim(str)、jQuery.unique(array)
     虽然jQuery命名空间下提供的这些工具方法不是用于DOM操作，而是用于操作普通的字符串、数组和对象的，但这些方法简化了js编程。  
    例程：
  	<body >
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>11、jQuery允许把jQuery对象当做一个临时的“数据存储中心”，可以将数据(可以是基本类型或者js对象)以key-value的形式存储到jQuery对象里。
例程：
 	<body >
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>12、操作DOM对象属性的相关方法
13、操作DOM元素的CSS属性的相关方法
14、操作元素内容的相关方法
例程：
  	<body >
  	<div></div><div></div>
  	<input id="book" name="book" type="text"/></br>
  	<input id="desc" name="desc" type="text"/></br>
  	<select id="gender">
  	 <option id="p1" value=http://www.mamicode.com/"male">男人>15、操作DOM结点的相关方法
(1)在指定结点内插入新的结点:append(content)在jQuery对象包含的所有DOM结点的尾部插入;appendTo(selector):将jQuery对象包含的DOM元素添加到selector匹配的所DOM的内部的尾端
(2)prepend(content)、prependTo(selector)与上面的功能相反，即不是插前面，而是插后面
(3)在指定结点外添加新的结点
  	<body >
  	<div id="test1" style="border:1px dotted black;" >id为test1的元素</div>
  	<div id="test2" style="border:1px solid blue;" >id为test2的元素</div>
  	<hr/>
		<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>>16、jQuery事件相关方法
(1)通用的事件编程相关函数如bind()、hover()、trigger()等
(2)具体事件相关的方法，如：blur、click
$("#test1").click(function(event){
});
17、一些动画效果
   jQuery提供了一些效果方法，可直接使用jQuery对象调用
   例程：
  	<body >
  	<input  type="button" value=http://www.mamicode.com/"toggle" onclick="$('#test1').toggle(1000);" />
>  18、★Ajax相关方法
  (1)例程：将所有表单控件输入元素转化为数组
	<body >
  	<form id="test">
		用户名:<input type="text" id="user" name="user"/><br/>
		个人介绍：<textarea id="desc" name="desc" rows="6" cols="20"></textarea><br/>
		喜欢的图书：<select id="book" name="book">
		<option value=http://www.mamicode.com/"hadoop">Hadoop权威指南>19、扩展jQuery：
用户可以通过jQuery.fn.extend(object)和jQuery.extend(object)来为jQuery对象扩展新的方法或为jQuery命名空间扩展新的方法


联系
我们