JQuery入门学习总结

最新推荐文章于 2024-05-07 14:42:48 发布

Toozky

最新推荐文章于 2024-05-07 14:42:48 发布

阅读量318

点赞数

分类专栏： # jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/u012175183/article/details/115835657

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery入门学习总结

一、jQuery入门

1.jQuery简介

jQuery是一个JavaScript函数库

jQuery库包含以下特性：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilies

下载jQuery: http://www.jQuery.com.

添加jQuery库

<script tyoe="text/javascript" src="jquery.js"></script>

2.jQuery语法

jQuery 语法是为HTML元素的选取编制，可以对元素执行某些操作
基础语法

$(selector).action();

美元符号定义jquery
选择符（selector）"查询"和"查找"HTML元素
jQuery action() 执行对元素的操作

文档就绪函数（这是为了防止文档在完全加载就绪之前运行jquery代码）

//第一种写法
$(document).ready(function(){
	 //需要加载的jQuery函数
});
//第二种写法（后续学习中采用这种写法）
$(function () {
	 //需要加载的jQuery函数
})

3.jQuery选择器

HTML、DOM术语中选择器允许对DOM元素组或单个DOM节点进行操作
jQuery 元素选择器
jQuery 使用CSS选择器来选取HTML元素

$("p")				//选取<p>元素
$("p.intro") 		//选取所有class="intro" 的<p>元素
$("p#demo") 		//选取id="demo" 的第一个<p>元素

jQuery属性选择器
jQuery 使用Xpath 表达式来选择带有给定属性的元素

$("[href]")				//选取所有带有href属性的元素
$("[href='#']")			//选取所有带有href值等于"#"的元素
$("[href!='#']")		//选取所有带有href值不等于"#"的元素
$("[href$='.jpg']")		//选取所有href值以".jpg"结尾的元素

jQuery CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性

$("p").css("background","red");		//把所有p元素的背景颜色更改为红色

4.DOM 对象转换 jQuery 对象

DOM（Document Object Model）对象
个人理解为例如JavaScript中用document.相应方法创建得出的对象（document文档创建得出网页上的各种标签元素，html、body、div……）

var v = document.getElementById("v"); 	//DOM对象
var $v = $(v); 							//jQuery 对象

转换后，就可以任意使用 jQuery 的方法
两种转换方式将一个 jQuery 对象转换成 DOM 对象： [index] 和 .get(index)

var $v = $("#v"); 		//jQuery 对象
var v = $v[0]; 			//DOM 对象							方法一
var v = $v.get(0); 		//DOM对象 （$v.get()[0] 也可以）		方法二

通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是：DOM 对象才能使用DOM 中的方法，jQuery 对象不可以使用DOM中的方法。

alert(v.checked); 		//检测这个checkbox是否被选中

二、jQuery 事件

1.jQuery事件

jquery 是为是按处理特别设计的(selector)jQuery元素选择器

Event 函数	绑定函数值
$(document).ready(function)	文档的就绪函数事件（当HTML文档就绪可用）
$(selector).click(function)	被选元素的点击事件
$(selector).dblclick(function)	被选元素双击事件
$(selector).focus(function)	被选元素的获得焦点事件
$(selector).mouseover(function)	被选元素的鼠标悬停事件

2.jQuery名称冲突

jQuery 使用$符号作为jQuery的简介方式某些其他JavaScript 库中的函数同样使用$符号(比如ProtoTyope)
jQuery 使用名为noConflict()的方法来解决问题

 var jq=jQuery.noConflict();		//使用自己定义的名称比如(jq)来代替$符号

用了以上代码
$(function(){…})可以写成jq(function(){…})
建议
把所有jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把jquery 代码置于单独的.js文件中
如果存在名称冲突则重命名jQuery库

// 加载函数例子
$(function(){
	$("#inp1").click(function(){
		alert("666")
	});
});

三、jQuery效果

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换(在隐藏与显示之间)被选元素
$(selector).sldieUp()	向上滑动（隐藏）被选元素
$(selector).slideDown()	向下滑动(显示)被选元素
$(selector).fadeOut()	淡出
$(selector).fadeIn()	淡入
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画

1.hide()/show()示例

//body体部分
<span id="sp_01">aa1</span>
<button id="btn_hide">隐藏</button>
<button id="btn_show">显示</button>
//script部分
$("#btn_hide").click(function(){
	$("#sp_01").hide()//隐藏
})
$("#btn_show").click(function(){
	$("#sp_01").show()//展示
})

hide()/show()

2.toggle()示例

//body体部分
<span id="sp_02">aa2</span>
<button id="btn_toggle">toggle button</button>
//script部分
$("#btn_toggle").click(function(){
	$("#sp_02").toggle() //显示/隐藏切换
})

btn_toggle

3.sldieUp()/slideDown()示例

//body体部分
<button id="btn_slideup">slide up</button>
<button id="btn_slidedown">slide down</button>
<div id="div_01"></div>		<!--设置background:grey-->
//script部分
$("#btn_slideup").click(function(){
	$("#div_01").slideUp()//向上滑动隐藏
})
$("#btn_slidedown").click(function(){
	$("#div_01").slideDown()//向下滑动显示
})

sldieUp()/slideDown()

4.fadeOut()/fadeIn()示例

//body体部分
<button id="btn_fadeout">fadeout</button>
<button id="btn_fadein">fadein</button>
<div id="div_01"></div>		<!--设置background:grey-->
//script部分
$("#btn_fadeout").click(function(){
	$("#div_01").fadeOut()//淡出
})
$("#btn_fadein").click(function(){
	$("#div_01").fadeIn()//淡入
})

fadeOut()fadeIn()

5.补充示例

fadeTo()见w3school链接.
animate()见w3school链接.

四、jQuery文档操作

方法	描述
addClass()	向匹配的元素添加指定的类名
after()	在匹配的元素之后插入内容
append()	向匹配的元素内部追加内容
appendTo()	向匹配的元素内部追加内容
attr()	设置或返回匹配元素的属性和值
html()	设置或返回匹配的元素集合中的HTML内容
text()	设置或返回匹配元素的内容
val()	设置或返回匹配元素的值
empty()	删除匹配的元素集合中所有的子节点
remove()	移除所有匹配的元素

jQueryCSS的操作

$(selector).css(name,value)		//为所有匹配元素的给定CSS属性值
$(selector).css({properties})	//为所有匹配元素的一系列CSS属性设置值
$(selector).css(name)			//返回指定的CSS属性的值

css属性	描述
css()	设置或返回匹配元素的样式属性
heigth()	设置或返回匹配元素的高度
offset()	返回第一个匹配元素相对于文档位置
offsetParent()	返回最近的定位祖先元素
position()	返回第一个匹配元素相对于父元素的位置
scrollTop()	设置或返回匹配元素相对滚动顶部的偏移
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移
width()	设置或返回匹配元素的高度

五、jQueryUI

待补充完善

属性	描述
According	可折叠的
Autocomplete	自动完成
Button	按钮
Datepicker	日期选择器
Dialog	对话框
Menu	菜单
Spinner	下拉列表
Tabs	选项卡
Tooltip	提示框

六、jQuery Ajax

1.Ajax

Ajax(Asynchronous JavaScript And XML)：异步javaScript 和可扩展标记语言
Ajax是一种运用JavaScript 和可扩展标记语言(xml) 在网络浏览器和服务器之间传送或接受数据的技术
Ajax由HTML JavaScript 技术DHTML和DOM组成
Ajax与传统WEB比较

传统web	Ajax
传统web应用野蛮的完全刷新简单操作也导致页面重新加载全部数据	部分刷新只做必要的数据交换异步访问服务器端

2.JQuery对Ajax的支持

使用JQuery将使Ajax变得及其简单。jQuery提供一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂
Ajax最常见的用户就是把一块HTML代码加载到页面的某个区域中去，只需简单地选择所需的元素，然后使用load()函数即可
以下为一个代码示例

//网页script标签部分
$(function() {
	$("#btn_login").click(function() {
		name1 = $("#in_name").val();
		pass1 = $("#in_pass").val();
		//$.ajax({type,url,data,dataType,success,error})
		$.ajax({
			type: "post",
			url: "user.do",
			data: {
				"name": name1,
				"pass": pass1
			},
			dataType: "text",
			success: function(data) {
				//传出data的相关操作
				if (data == "ok") {
					window.location.href = "success.jsp";
				}
			},
			error: function(e) {
				//传出e的相关操作
			}
		})
	})
})
//业务逻辑层部分
//……
response.getWriter().print("ok");
//……