JavaWeb--------jQuery基础

 

一. 概念

1.1 简介

jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。jQuery是一个快速、简洁的JavaScript框架,能够兼容各种浏览器,核心理念是write less,do more(写得更少,做得更多)。jQuery封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery让用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery能够让用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

可以参考jQuery API文档:http://jquery.cuishifeng.cn/index.html  点击打开链接

在企业日常开发中,原生的JavaScript使用得是比较少的,更多的是在使用jQuery。

JavaWeb--------jQuery基础_第1张图片

1.2 jQuery的导入和获取对象

  JavaWeb--------jQuery基础_第2张图片

Jquery它是一个库(框架),要想使用它,必须先引入!
    jquery-1.8.3.js:    一般用于学习阶段。
    jquery-1.8.3.min.js:一般用于项目使用阶段

范例一,jQuery的导入。代码如下:



	
		
		jquery入门
		
		
	
	
		
	

范例二,jQuery获取对象。代码如下:



	
		
		JQ的获取
		
		
	
	
		
	

1.3 jQuery与JavaScript页面加载的区别

jQuery提供ready()方法,用于页面成功加载后执行。与window.onload()方法作用相似。 jQuery与JavaScript页面加载是有区别的。

1) 传统的JS方式页面加载会存在覆盖问题,jQuery不存在覆盖问题,加载的时候是顺序执行。

2) 传统的JS方式页面加载,要等整个页面加载完毕(包括里面的其它内容,比如图片)才加载,。jQuery的加载,当整个dom树结构绘制完毕就会加载,速度



	
		
		JavaScript与jQuery页面加载的区别
		
		
	
	
	

整个页面加载完毕<包括里面的其它内容,比如图片>)
			window.onload = function(){
				alert("老王");
			}
			
			//JQ的加载比JS加载要快!(当整个dom树结构绘制完毕就会加载)
			jQuery(document).ready(function(){
				alert("李四");
			});
			
			//JQ不存在覆盖问题,加载的时候是顺序执行
			$(document).ready(function(){
				alert("王五");
			});
			
			//简写方式
			$(function(){
				alert("汾九");
			});
			
		
	
	
	

1.4 Dom 与 jQuery对象之间的转换

注意:JQ对象无法操作JS里面的属性和方法。DOM对象也无法操作JQ对象里面属性和方法。需要通过转换来解决。

jQuery对象和DOM 对象的函数不能彼此互相调用,jQuery对象只能使用自己的函数,但是jQuery对象和DOM 对象间可以相互转换。

DOM对象转换成jQuery对象,语法:jQuery(dom对象),使用 $( ) 

jQuery对象转换成DOM对象,语法:$username[index]



	
		
		Dom与JQ对象之间的转换
		
		
	
	
		
		
班长:你好帅!

1.5  toggle 的使用



	
		
		toggle的使用
		
		
		
	
	
		

|

1.6 使用jQuery完成首页定时弹出广告图片

实现步骤:
第一步:引入jQuery相关的文件
第二步:书写页面加载函数
第三步:在页面加载函数中,获取显示广告图片的元素。
第四步:设置定时操作(显示广告图片的函数)
第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
第六步:清除显示广告图片的定时操作
第七步:设置定时操作(隐藏广告图片的函数)
第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
第九步:清除隐藏广告图片的定时操作

具体代码,如下所示:



	
		
		首页定时弹出广告图片
		
		//JQ部分:
		
		
		
	
	
		
    最新商品   

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

    热门商品   

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

二. jQuery 选择器

在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例。
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中:
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

2.1 基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

示例代码,如下所示:



	
		
		基本选择器
		
		
		
			
	
	
		
		
		
		
		
		
111
222
333
444
555
666

2.2 层级选择器

 

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素 (儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素 (儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素 (紧挨着的兄弟)

 

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素 (所有的兄弟)

示例代码,如下所示:



	
		
		层级选择器
		
		
		
		
		
	
	
		
		
		
		
		
		
111
222
333
444
555
666

2.3 过滤选择器 (重点)

1) 基本过滤选择器
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于4的li
$("li:gt(2)")    //下标大于2的li
$("li:lt(2)")    //下标小于2的li

$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li



	
		
		基本过滤选择器
		
		
		
	
	
	
		
		
		
		
		
		
111
222
333
444
555
666

2) 内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素

$("td:parent")                //含有子元素或者文本的元素

3) 可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素,或type为hidden的元素

$("li:visible")      //匹配所有可见元素

4) 属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素

$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素



	
		
		属性过滤选择器
		
		
		
		
	
	
		
		
		
		
111
222
333
444
555
666

5) 状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input

$("option:selected")  // 匹配选中的 option

2.4 表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

1) :input表单选择器 
如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有input标记的表单元素,而且还包括textarea、select 和 button标记的表单元素,因此,它选择的表单元素是最广的。 

使用:input表单选择器获取表单元素,并向这些元素增加一个CSS样式类别,修改它们在页面中显示的边框颜色。


修改全部表单元素的边框色




2) :text表单文本选择器 
:text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。 

在表单中添加多个元素,使用:text选择器获取单行的文本输入框元素,并修改字的边框颜色:


修改单行输入框表单元素的边框色



3) :password表单密码选择器 
如果想要获取密码输入文本框,可以使用:password选择器,它的功能是获取表单中全部的密码输入文本框元素。 

在表单中添加多个输入框元素,使用:password获取密码输入文本框元素,并修改它的边框颜色:


修改密码输入框表单元素的边框色




4) :radio单选按钮选择器 
表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio选择器可轻松获取表单中的全部单选按钮元素。 

在表单中添加多种类型的表单元素,使用:radio选择器获取并隐藏这些元素中的全部单选按钮元素:


隐藏表单中单选按钮


5) :checkbox复选框选择器 
表单中的复选框常用于多项数据的选择,使用:checkbox选择器可以快速定位并获取表单中的复选框元素。 

在表单中增加多个不同类型的元素,使用:checkbox选择器获取其中的全部复选框元素,并将它们全部设为选中状态:


将表单的全部复选框设为选中状态





6) :submit提交按钮选择器 
通常情况下,一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit选择器可获取表单中的这个提交按钮元素。 

在表单中添加多个不同类型的按钮,使用:submit选择器获取其中的提交按钮,并使用attr()方法修改按钮显示的文本内容:


修改表单中提交按钮显示的文字



7) :image图像域选择器 

当一个input元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素。例如,在表单中添加两种类型的图像元素,使用:image选择器获取其中的一种图像元素,并改变该元素的边框样式:


修改表单中图像元素的边框


8) :button表单按钮选择器 
表单中包含许多类型的按钮,而使用:button选择器能获取且只能获取“type”属性值为“button”的input和button这两类普通按钮元素。 

在表单中添加多种类型的按钮元素,使用:button选择器获取其中的普通按钮元素,并修改它们的边框色:


修改表单中按钮元素的边框



9) :checked选中状态选择器 
有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。 

在表单中添加多个复选框和单选按钮,其中有一些元素处于选中状态,使用:checked获取并隐藏处于选中状态的元素:


隐藏处于选中状态的元素







10) :selected选中状态选择器 
与:checked选择器相比,:selected选择器只能获取select下拉列表框中全部处于选中状态的option选项元素。 

在一个添加多个option选项的下拉列表框中,使用:selected选择器修改处于选中状态的内容值:


修改处于选中状态元素的内容

三. 案例

下面,以案例的形式来复习上面的知识点,并学习新的知识点

案例一,使用jQuery 完成表格隔行换色



	
		
		使用jQuery完成表格隔行换色 
     	          
		   

	
	
		
编号 姓名 年龄
1 张三 22
2 李四 25
3 王五 27
4 赵六 29
5 田七 30
6 汾九 20

案例二,使用jQuery完成复选框的全选和全不选



	
		
		使用jQuery完成复选框的全选和全不选
		  
		   
	
	
		
编号 姓名 年龄
1 张三 22
2 李四 25
3 王五 27
4 赵六 29
5 田七 30
6 汾九 20

案例三,使用jQuery 完成省市二级联动

1) 需求分析:

JavaWeb--------jQuery基础_第3张图片

2) 技术分析

I.】数组的遍历操作

方式一:

$(function(){
	// 全选/ 全不选
	$("#checkallbox").click(function(){
		var isChecked = this.checked;
		//使用对象访问的方式进行遍历,语法:$().each(function(){})
		$("input[name='hobby']")[被遍历的对象(是一个集合)].each(function(){
			this.checked = isChecked;
		});
	});
});

方式二:

$.each( [0,1,2][被遍历的对象], function(i[角标], n[被遍历后的内容]){
  alert( "Item #" + i + ": " + n );
});

II.】文档处理操作
追加内容
apend:  A.append(B)  将B追加到A的内容的末尾处
appendTo: A.appendTo(B)  将A加到B内容的末尾处
3) 步骤分析
第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步:创建二维数组来存储省份和城市
第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步:接着遍历数组中的城市
第五步:创建一个城市文本节点
第六步:创建option元素节点
第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步:获取第二个下拉列表并将option元素节点添加进去
第九步:清除第二个下拉列表的option内容
4) 代码实现



	
		
		使用jQuery完成省市二级联动
		
		
		
			
	
	
		
会员注册
用户名
密码
确认密码
email
姓名
籍贯
性别
出生日期
验证码

案例四,使用JQ完成下拉列表左右选择

1) 需求分析

JavaWeb--------jQuery基础_第4张图片

见图片文字部分内容。
2) 步骤
第一步:确定事件(鼠标单击事件click)
第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

3) 代码实现



	
		
		下拉列表左右选择
		
		
	
	
	
		
分类名称
分类描述
分类商品 已有商品

>>

>>>

未有商品

<<

<<<

JavaWeb--------jQuery基础_第5张图片

案例五,使用JQ完成表单校验

在学习JavaScript 时,我们手动完成过表单数据的校验,此功能在开发中非常常见,属于通用功能范畴,实际开发中一般会使用第三方工具。本案例我们将使用jQuery 插件validation 进行表单的校验。

JavaWeb--------jQuery基础_第6张图片

validate入门案例,代码如下:



	
		
		validate入门案例
		
		
		
		
		
		
		
	
	
		
用户名:
密码:

网站注册页面



	
		
		网站注册页面
		
		
		
		
		
		
		
	
	
		
           会员注册   USER REGISTER
                  *   
                  密码 *   
                  确认密码 *   
                  Email *   
                  姓名 *   
                  性别 *   
                  出生日期 *   
                  验证码 *   
                                         

 

×(×××××××××××××××××

四. 小结

下面,以小案例的形式,对jQuery 中的知识点做一个总结。

4.1 jQuery属性操作

1) attr 属性操作



	
		
		属性操作_attr
		
		
	
	
		
	

2) CSS类 属性操作




	
		
		属性操作_CSS类
		
		
		
	

	
		
AAAAAA

3) html代码 属性操作




	
		
		属性操作_html代码
		
		
	

	
		

传智播客

4)文本text 属性操作




	
		
		属性操作_文本text
		
		
	

	
		

传智播客

5) 值val 属性操作




	
		
		属性操作_值val
		
		
	

	
		用户名  
性别
城市

4.2 jQuery文档处理

1) 插入操作




	
		
		文档处理_插入操作
		
		

	

	
		

	

2) 复制操作



	
		
		文档处理_复制操作
		
		
	
	
		

你最喜欢的水果是?

  • 苹果
  • 橘子
  • 菠萝

3) 替代操作



	
		
		文档处理_替换操作
		
		
	
	
		

你最喜欢的水果是?

  • 苹果
  • 橘子
  • 菠萝

4) 删除操作




	
		
		文档处理_删除操作
		
		

	

	
		

AAA

BBB

5) 删除相关操作的区别



	
		
		删除相关操作的区别
		
		
	
	
		

你最喜欢的水果是?

  • 苹果
  • 橘子
  • 菠萝

4.3 jQuery遍历操作

1) 使用对象访问方式遍历,代码如下:



	
		
		使用对象访问方式遍历
		
		
	
	
		请选择您的爱好
全选/全不选
足球 篮球 游泳 唱歌

2) 使用工具类遍历,代码如下:



	
		
		使用工具类遍历方式
		
		
	
	
		请选择您的爱好
全选/全不选
足球 篮球 游泳 唱歌

4.4 jQuery的CSS 操作

小案例,代码如下:




	
		
		属性操作_CSS类
		
		
		
	

	
		
AAAAAA

4.5 jQuery事件

1) 问题抛出

页面未加载执行失败:




	
		
		页面未加载执行失败
		
	

	
		
click me.

解决办法:




	
		
		4-1-2
	
	

	
		
click me.

2) 事件绑定

点击展开:




	
		
		点击展开
		
		
		
	

	
		
什么是jQuery?
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

鼠标滑过:




	
		
		鼠标滑过
		
		
		
	

	
		
什么是jQuery?
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

3) 移除事件




	
		
		事件移除
		
		
		
	

	
		
		

4) 合成事件

合成事件 hover:




	
		
		合成事件hover
		
		
		
	

	
		
什么是jQuery?
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

合成事件 toggle:




	
		
		合成事件toggle
		
		
		
	

	
		
什么是jQuery?
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

 

-----------------------------------------------  我是低调的分隔线  -----------------------------------------------

 

 

你可能感兴趣的:(编程)