jQuery01 - 基本语法

概述

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
• 滑动
  • slideDown()：显示，高度变大
  • slideUp()：隐藏，高度变小
  • slideToggle()：切换
• 淡入淡出
  • fadeIn()：淡入
  • fadeOut()：淡出
  • fadeToggle()：切换
  • fadeTo()：指定透明度