概述
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
引入
<script src="../js/jquery-1.11.0.js" type="text/javascript"></script>
获取对象
// 使用原生js获取对象
var demoId = document.getElementById("demoId");
// 命名规定,Jquery对象变量名建议以$开头
var $demoId = $("#demoId");
jQuery对象和DOM转换
- jQuery对象和DOM对象可以相互转换,但两者的对象api不能混搭使用
- DOM对象转换成jQuery对象:jQuery(dom 对象)
- jQuery对象转换成DOM对象:$jQuery对象[index]
// 使用原生js获取对象
var d1 = document.getElementById("demoId");
// 将dom对象转换成jquery对象
var d2 = jQuery(d1);
// 将jquery对象转换成dom对象
// jquery对象内部以数组的方式存放所有匹配的数据,如果只匹配到一个,索引号为0
var d3 = $d2[0];
页面加载
// 原生js页面加载
window.onload = function() {
...
}
// jquery页面加载 方式一
$(document).ready(function() {
...
});
// jquery页面加载 方式二:方式一的简写方式
$(function(){
...
});
- 原生js和jquery页面加载的区别:
- 原生jd的window.onload函数只能执行一次,如果赋多次值的话,后面的会覆盖前面的;jquery的ready函数可以执行多次,依次执行
- 原生js页面加载函数需要页面所有元素加载完成后才能执行;jquery页面加载函数只需要在dom树构建完成后就可以执行
选择器
- 基本选择器
- ID选择器:$("#idName")
- 标签选择器:$(“tagName”)
- 类选择器:$(".className")
- 通配符选择器:$("*")
- 层级选择器
- 后代选择器:A B,A元素中所有的B类型元素
- 子元素选择器:A > B,A元素中的所有B类型的子元素
- 相邻兄弟选择器:A + B,A元素后面的所有B类型的兄弟元素
- 一般兄弟元素:A ~ B,A元素同级的所有B类型的兄弟元素
- 基本过滤选择器
- :first:第一个元素
- :last:最后一个元素
- :not(…):删除指定元素
- eq(index):指定某些元素
- even:偶数,从0开始
- odd:奇数
- gt(index):大于
- lt(index):小于
- 属性选择器
- 表单属性选择器
效果
- 基本
- show
// 直接显示 $("#id").show(); // 按不同速度展示 slow:600毫秒;normal:400毫秒;fast:200毫秒 $("#id").show("fast"); // 按指定速度显示 单位:毫秒 $("#id").show(1000); // 显示完成后,执行函数 $("#id").show(1000, function() {});
- hide
// api和show类似
- toggle
- show
- 滑动
- slideDown():显示,高度变大
- slideUp():隐藏,高度变小
- slideToggle():切换
- 淡入淡出
- fadeIn():淡入
- fadeOut():淡出
- fadeToggle():切换
- fadeTo():指定透明度