jQuery详解
文章目录
- 一、jQuery认识
-
-
- 1.jQuery介绍与安装
- 2.jQuery语法
- 3.jQuery对象与DOM对象
- 4.选择器
- 5.事件
-
- 5.1鼠标事件
- 6.2键盘事件
- 6.3表单事件
-
- 二、jQuery效果
-
-
- 1.效果-隐藏和显示
-
- 1.1hide()
- 1.2show()
- 1.3speed 参数
- 1.4toggle()
- 2.效果-淡入淡出
-
- 2.1fadeIn()
- 2.2fadeOut()
- 2.3fadeToggle()
- 2.4fadeTo()
- 3.效果-滑动
-
- 3.1slideDown()
- 3.2slideUp()
- 3.3slideToggle()
- 4.效果- 动画
-
- 4.1animate()
- 4.2animate() - 操作多个属性
- 4.3animate() - 使用相对值
- 4.4animate() - 使用预定义的值
- 4.5 animate() - 使用队列功能
- 5.停止动画
- 6.Callback 方法
- 7.链
-
- 三、jQuery DOM 操作
-
-
- 1.HTML
-
- 1.1获取内容和属性
-
- （1）text() 和 html()
- （2）val()
- （3）获得属性
- 1.2设置内容
-
- （1）text()、html()、val()
- （2）设置属性
- 1.3添加元素
-
- （1）append()
- （2） prepend()
- （3） append() 和 prepend() 添加元素
- （4）after() 和 before() 添加新元素
- 1.4删除元素
-
- （1） remove()
- （2）empty()
- （3）过滤
- 1.5获取并设置CSS类
-
- （1） addClass()
- （2）removeClass()
- （3）toggleClass()
- （4）css()
- 1.7尺寸
-
- （1）width() 和 height()
- （2）innerWidth() 和 innerHeight()
- （3）outerWidth() 和 outerHeight()
- 2.遍历
-
- 2.1遍历介绍
- 3.jQuery - AJAX
-
- 3.1AJAX load() 方法
- 3.2 get() 和 post()
- 3.3 $.get()
- 3.4 $.post()
-
一、jQuery认识
1.jQuery介绍与安装
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
具有以下功能：
HTML 元素选取、操作、 事件函数；CSS 操作；JavaScript 特效和动画；HTML DOM 遍历和修改；AJAX；
进入官网下载：http://jQuery.com
两个版本：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
引入方式：
<head>
<script src="jquery-1.10.2.min.js">script>
head>
注意：需要将下载的文件放在网页的同一目录之下。
2.jQuery语法
<script>
$(selector).action();
script>
- 美元符号定义jQuery
- 选择符selector：获取需要操作的DOM元素
- action() 执行对元素的操作
例如：
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有
元素
- $(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
- $(“#test”).hide() - 隐藏 id=“test” 的元素
3.jQuery对象与DOM对象
DOM对象和jQuery对象不能混用。
$("#title").html;
//等同于
document.getElementById("title").innerHTML;
DOM对象转jQuery对象:
var i = document.getElementById("name");
// i是DOM对象
var j = $(i); // j是jQuery对象
jQuery对象转DOM对象:
var i = $("#name");
// i是jQuery对象
var j = jqObject.get(i); // b是DOM对象
4.选择器
| 名称 | 描述 |
|---|---|
| 标签选择器（element） | 根据给定的标签名匹配元素 |
| 类选择器（class） | 根据class匹配元素 |
| ID选择器（#id） | 根据id匹配元素 |
| 并集选择器（selector1,selector2,…） | 将选择器的元素合并后返回 |
| 交集选择器（element.class或elecment#id） | 匹配指定class或id的某元素或元素集合 |
<body>
<p id="pp">李白p>
<p class="cp">杜甫p>
<p>白居易p>
body>
<script type="text/javascript">
$("p").css("color","pink");//标签选择器设置所有p标签属性
$(".cp").css("color","red");//类选择器选择类名为cp
$("#pp").css("color","green");//id选择器
$(".cp,#pp").css("color","blue");//并集选择器
script>
html>
| $(“*”) | 选取所有元素 |
|---|---|
| $(this) | 选取当前 HTML 元素 |
| $(“p.cls”) | 选取 class 为 cls 的 p 元素 |
| $(“p:first”) | 选取第一个 p 元素 |
| $(“ul li:first”) | 选取第一个 ul元素的第一个 li 元素 |
| $(“ul li:first-child”) | 选取每个 ul 元素的第一个 li>元素 |
| $(“[href]”) | 选取带有 href 属性的元素 |
| $(“a[target=‘_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 a 元素 |
| $(“a[target!=‘_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 a元素 |
| $(“:button”) | 选取所有 type=“button” 的 input 元素 和 button 元素 |
| $(“tr:even”) | 选取偶数位置的 tr 元素 |
| $(“tr:odd”) | 选取奇数位置的 |
5.事件
5.1鼠标事件
| 方法 | 描述 |
|---|---|
| click() | 单击鼠标时 |
| dbclick | 鼠标双击时 |
| mouseenter( ) | 鼠标进入时 |
| mouseout( ) | 鼠标移除时 |
| mouseleave | 鼠标离开时 |
（1）click()
$("p").click(function(){
$(this).hide();
});
（2）dblclick()
$("p").dblclick(function(){
$(this).hide();
});
（3）mouseenter()
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
（4）mouseleave()
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
（5）mousedown()
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
（6）mouseup()
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
6.2键盘事件
| 方法 | 描述 |
|---|---|
| keydown() | 按下键盘时 |
| keyup( ) | 释放按键时 |
（1）keydown()
$("#p1").keydown(function(){
alert("按下键盘。");
});
（2）keyup()
$("#p1").keyup(function(){
alert("弹起键盘。");
});
6.3表单事件
| 方法 | 描述 |
|---|---|
| focus() | 获得焦点 |
| blur() | 失去焦点 |
（1）focus()
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
（2）blur()
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
二、jQuery效果
1.效果-隐藏和显示
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
注意：
（1）speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
（2） callback 参数是隐藏或显示完成后所执行的函数名称
1.1hide()
$("#hide").click(function(){
$("p").hide();
});
1.2show()
$("#show").click(function(){
$("p").show();
});
1.3speed 参数
带有 speed 参数的 hide() 方法
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
1.4toggle()
$("button").click(function(){
$("p").toggle();
});
2.效果-淡入淡出
2.1fadeIn()
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
2.2fadeOut()
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
2.3fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(