Web基础之jQuery
jQuery快速入门教程。
jQuery
jQuery是什么？
jQuery是一个兼容多浏览器的JavaScript库。
jQuery能极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery包含以下内容：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。
相当于：document.getElementById("i1").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像var variable = DOM对象 $variable[0] //jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html(); //jQuery对象可以使用jQuery的方法$("#i1")[0].innerHTML; // DOM对象使用DOM的方法jQuery基础语法
$(selector).action()
查找标签
选择器
id选择器：
$("#id")class选择器：
$(".className")标签选择器：
$("tagName")组合选择器：
$("#id, .className, tagName")层级选择器：
$("#id a"); // 所有的后代a标签$("#id > a"); // 第一个儿子标签a基本选择器：
:first // 第一个:eq(index) // 索引等于index的那个元素:last // 最后一个
属性选择器：
<input type="text"><input type="password"><input type="checkbox">$("input[type='checkbox']"); // 取到checkbox类型的input标签筛选器
下一个元素：
$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2")上一个元素：
$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")父亲元素：
$("#id").parent()$("#id").parentsAll()$("#id").parentsUntil()儿子和兄弟元素：
$("#id").children(); // 儿子们$("#id").siblings(); // 兄弟们查找元素：
$("id").find()示例：左侧菜单
操作
属性
用于自定义属性：
attr()removeAttr()
用于checkbox和radio
prop()removeProp()
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
示例：全选、反选、取消
CSS
CSS类
addClass(); // 添加指定的CSS类名。removeClass(); // 移除指定的CSS类名。toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
示例：开关灯
CSS样式
CSS
css("color", "red") //DOM操作：tag.style.color="red"位置：
offset() // 当对视窗的坐标position()scrollTop()scrollLeft()
尺寸：
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
文档
HTML代码：
html()
文本值：
text()
值：
val() // 针对input标签
文档处理：
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A$(A).appendTo(B) // 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A$(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
移除和晴空元素
remove() // 从DOM中删除所有匹配的元素。empty() // 删除匹配的元素集合中所有的子节点。
替换
replaceWith()replaceAll()
克隆
clone()
示例：
点击按钮复制。
事件
常用事件
click(function(){...})mouseout(function(){...})mouseover(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})事件绑定
bind("click", function(){...})unbind("click", function(){...})on("click", function(){...})off("click", function(){...})页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).read(function(){
// 在这里写你的JS代码...})简写：
$(function(){
// 你在这里写你的代码})事件委托
事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。
示例：
完善克隆那个例子。
动画
基本
.show([speed, [easing], [fn]]) //显示隐藏的匹配元素。.hide([speed, [easing], [fn]]) //隐藏显示的匹配元素。.toggle([speed], [easing], [fn]) //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参数介绍：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”。
fn:在动画完成时执行的函数，每个元素执行一次。
滑动
.slideDown([speed, [easing], [fn]]) //通过高度变化（向下增大）来动态地显示所有匹配的元素。.slideUp([speed, [easing], [fn]]) //通过高度变化（向下减小）来动态地隐藏所有匹配的元素。.slideToggle([speed, [easing], [fn]]) //通过高度变化来切换所有匹配元素的可见性。
参数介绍同上。
淡入淡出
.fadeIn([speed, [easing]<span c
评论 (0)