jQuery基础知识和常用API(选择器/DOM操作/UI)

一、选择器

1. 入口函数

jQuery的入口函数一般为:

$(document).ready(function () {
     //1.文档加载完毕，图片不加载的时候就可以执行这个函数。
        })

这种写法类似于原生js中的window.onload = function () {}
当然，jQuery也有其他的入口函数，比如：

$(function () {
          //这个与第一个入口函数是相同的，最简洁的代码
       });

$(window).ready(function () {
      //文档加载完毕，图片也加载完毕的时候再执行这个函数
       })

2. jQuery的DOM对象和原生js中的DOM对象的区别和转换

• 区别：jquery对象是一个数组。数组中包含着原生JS中的DOM对象。数组的长度和原生js中的DOM对象的个数是一致的。换句话说，jQuery对象数组中的前几个元素就是原生js中的DOM对象。
• 转换：

1.js对象转换成jquery对象：$(js对象);

var box = document.getElementById("box");
var jqbox = $(box);//jqbox就变成了jQuery对象

2.jquery对象转换成js对象。（jquery对象[索引值]或jquery对象.get(索引值)）

var jqbox = $("box);
var box = jqbox[0]|jqbox.get(0);//box就是原生js对象

3.基本选择器

• 通过标签名获取：$(“div”)
• 通过类名获取：$(".box")
• 通过id名获取：$("#box")

4.层级选择器

• 在后代中获取：$(“ul li”)
• 在子代中获取：$(“ul>li”)

5.筛选选择器

• 利用过滤选择器获取偶数位元素：$(“ul li:odd”)
• 利用过滤选择器获取奇数位元素：$(“ul li:even”)
• 利用过滤选择器获取指定索引值元素：$(“ul li:eq(0)”)
• 从jquery对象的后代中查找：$(“ul”).find(“li”)—必须有参数，参数为选择器。若不写参数获取不到元素。
• 从jquery对象的子代中查找：$(“ul”).children(“li”)—可以不写参数。不写参数则获取所有子元素。
• 获取该元素的下一个兄弟元素：$(“ul”).children(“li”).next()
• 获取元素的所有兄弟元素：$(“ul”).children(“li”).siblings()
• 获取元素的父元素：$(“ul”).children(“li”).eq(0).parent()

二、DOM操作

1.样式操作

$("div").css() //若参数只有一个，则是获取样式。若参数有两个，则是设置样式
//如果想一次设置多个样式，可以将参数设为json

2.类操作

• 添加类：addClass()—参数为类名
• 删除类：removeClass()—参数为类名
• 判断类：hasClass()—参数为类名，在此方法中jquery对象数组中有一个带有类名的是true，所有都不带才是false；

3.动画

1.显示：

• $(“div”).show()—不加参数，通过display:block控制
• $(“div”).show(1000)—一个参数，毫秒值。通过控制宽高透明度实现，有动画的效果
• $(“div”).show(1000,回调函数)

2.隐藏：

• $(“div”).hide()—不加参数，通过display:none控制
• $(“div”).hide(1000)—一个参数，毫秒值。通过控制宽高透明度实现，有动画的效果
• $(“div”).hide(1000,回调函数)

3.显示隐藏切换

• $(“div”).toggle()—用法和1 2两种类似

4.滑入

• $(“div”).slideDown()—用法和1 2两种类似

5.滑出

• $(“div”).slideUp()—用法和1 2两种类似

6.滑入滑出切换

• $(“div”).slideToggle(1000)—用法和1 2两种类似

7.淡入

• $(“div”).fadeIn()—用法和1 2两种类似

8.淡出

• $(“div”).fadeOut()—用法和1 2两种类似

9.淡入淡出切换

• $(“div”).fadeToggle()—用法和1 2两种类似

10.改透明度

• $(“div”).fadeTo()—必须要有两个参数。第一个参数是毫秒值，第二个参数是透明度（0-1），可以有第三个参数，为回调函数。

11.停止动画

• $(“div”).stop()—有两个参数，参数为布尔类型，第一个参数表示后续动画是否停止（true:后续动画不执行 ;false:后续动画会执行），第二个参数表示当前动画是否执行完（true:立即执行完当前动画 ;false:立即停止当前动画）。如果不写参数，默认两个都是false。
• 此函数针对的是同一对象（元素）

12.自定义动画

• $(“div”).animate()—要实现多个属性的变换可以用json作为参数传入。
  第一个参数是要改变的属性（可以为json），第二个参数是毫秒值，第三个参数是回调函数。（自定义动画默认为缓动动画，若需要匀速可以设置第三参数为"linear"）

3.节点操作

• 创建节点

//创建节点1: $("标签")   类比于js中的document.createElement("li");
    $("<li class='aaa'>我是li标签</li>");

//创建节点2: $("ul").html("");  类比innerHTML属性。因为此属性，识别标签。
    $("ul").html("<li>我是html方法创建出来的li标签</li>");

• 添加节点

//append();    在盒子的最末尾添加一个元素。
$("ul").append(jqNewLi);    //把新创建的li塞进ul中

//prepend();   在盒子最前面添加
$("ul").prepend(jqNewLi);

//下面两个方法是操作兄弟元素的。放在兄弟元素之后或者之前
//after();
$("li").after(jqNewLi);
//before();
$("li").before(jqNewLi);

• 删除和清空节点

//清空li所在的ul
 //方法1：.html("");
$("ul").html("");

//方法2：.empty();
$("ul").empty();

//自己删除自己
$("li:eq(0)").remove()//自杀

• 复制节点

//复制节点：  clone();
var newUl  = $("ul").clone();//默认为深层复制

4.属性操作

• 添加属性：$(“ul”).attr()—两个参数是给属性赋值，单个参数是获取属性值。
• 删除属性：$(“ul”).removeAttr()—只有一个参数
• 特殊属性：$(“ul”).prop(“checked”,true)—在form中的特殊属性，用prop，比如表单元素的checked、selected、disabled等属性
• value属性：$(“ul”).val()—不写参数是获取，一个参数是赋值
• innerHTML属性：$(“ul”).html()—不写参数是获取，一个参数是赋值
• innerText属性：$(“ul”).text()—不写参数是获取，一个参数是赋值

5.坐标操作及事件机制

1.坐标操作

• $(“box”).width()—只获取本身的宽。没有参数是获取，一个参数是设置宽度（设置的时候不用带“px”单位）
• $(“box”).height()：只获取本身的高。没有参数是获取，一个参数是设置高度（设置的时候不用带“px”单位）
• $(“box”).offset()：类比于原生js中的event.pageY。作用：获取或设置元素相对于文档(body)的位置。无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置，有参数表示设置，参数推荐使用数值类型（不带“px”单位）
• $(“box”).position()：类比于原生js中的offsetTop。作用：获取相对于其最近的具有定位的父元素的位置，无参数表示获取，返回值为：{left:num, top:num}。注意：此方法只能获取，不能设置。
• $(“box”).scrollTop()/scrollLeft()：类比于原生js中的scrollTop。作用：获取或者设置元素垂直/水平方向被卷去的长度。无参数表示获取，有参数表示设置，参数为数值类型。对scrollTop的理解：垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。
• $(window).width():类比于原生js中的clientWidth获取可视区域的宽高一致(可视区域不包括地址栏、工具栏)
• $(window).height():类比于原生js中的clientHeight获取可视区域的宽高一致(可视区域不包括地址栏、工具栏)

2.事件机制

• 事件绑定：

// 这种绑定事件的方法是不会层叠的。
       $(document).click(function () {
           alert(1);
       });
       $(document).click(function () {
           alert(2);
       });

        // 第二种绑定：bind
       $(document).bind("click mouseenter", function () {
           alert(1);
       })
       $(document).bind("click mouseenter", function () {
           alert(2);
       })

        // 第三种
       $(document).delegate(".box","click mouseenter", function () {
           alert(1);
       })

        // 第四种(重点)
       $(document).on("click mouseenter",".box",{"name":111}, function (event) {
           alert(event.data.name);
       });

       $(document).on("click",".box", function () {    
       });

• 事件解绑

 $(document).unbind("mouseenter click");//适用于第一种和第二种绑定

//第三种
$(document).delegate(".box","click mouseenter", fn)//绑定
 $(document).delegate(".box","click mouseenter", fn2)
function fn(){
     alert(1);
}
function fn2(){
    alert(2);
}
$(document).undelegate(".box","mouseenter",fn)//解绑


//第四种(重点)
 $(document).on("click mouseenter",".box",{"name":111}, function (event) {
     alert(event.data.name);
});//绑定

$(document).off("mouseenter",".box");//解绑

• 事件触发

//事件触发(1)(触发浏览器行为)(只执行程序，不触动事件)
$(document).click();
$(document).mouseenter();

//事件触发(2)(触发浏览器行为)(只执行程序，不触动事件)
$(document).trigger("mouseenter");
$(document).trigger("click");

//事件触发(3)(不触发浏览器行为)(只执行程序，不触动事件)
$(document).triggerHandler("mouseenter");
$(document).triggerHandler("click");

• 事件对象

$(function () {
          $(document).on("click", {},function (event) {
            console.log(event.data) 				//	传递给事件处理程序的额外数据
            console.log(event.currentTarget) 	//		等同于this，当前DOM对象
            console.log(event.pageX)			//		鼠标相对于文档左部边缘的位置
            console.log(event.target)			//		触发事件源，不一定===this
            console.log(event.stopPropagation())	//阻止事件冒泡
            console.log(event.preventDefault()) //	阻止默认行为
            console.log(event.type)			//	事件类型：click，dbclick…
            console.log(event.which)		//鼠标的按键类型：左1 中2 右3
            console.log(event.keyCode)			//键盘按键代码
          });
    })

• 两个特殊方法

//1.获取焦点
   $("input").focus();//原生js和jQuery中一模一样的方法
   
//2.选定所有内容(能够输入内容的标签)
   $("input").select();//内容被选中

3.链式编程和隐式迭代

• 链式编程
  链式编程原理：return this;通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。end(); // 结束当前链最近的一次过滤操作，并且返回链之前的元素节点。
• 隐式迭代
  隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
• each方法

jQuery(function () {
    //设置不一样的盒子透明度逐渐递增
     $("ul li").each(function (index,element) {//index是索引值，ele是原生js节点
     $(element).css("opacity",(index+1)/10);
    });
});

三、UI

1.插件(jQuery有很多插件，可以根据自己的需求选择不同的插件)

• 改变背景色
  如果不使用插件，通过css()这个方法是不能对背景色进行获取和设置的，这时候就必须引用一个jquery.color.js插件，这样就可以通过css()这个方法对背景色进行获取和设置了。
• 图片之懒加载
  效果：只有当图片显示在屏幕上（可视区域），图片才会加载

<script src="jquery.lazyload.min.js"></script>
    <script>
        $(function () {
            //懒加载调用
            //使用插件：1.引包。(必须在jquery之下)   2.通过调用方法实现功能，而参数的不同，功能也可能不同。
            $("img.lazy").lazyload();
       })
    </script>
<img class="lazy" data-original="images/02.jpg">

2.更多UI插件请前往官方API：http://api.jqueryui.com/category/all/

其他教程：http://www.runoob.com/jqueryui/jqueryui-intro.html

ps：每个插件都有自己的使用方法，一般下载插件之后里面会有一些样例和使用说明