jQuery基础知识笔记

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

如何使用jQuery？

入口函数：等待文档准备好了，再执行入口函数里面的代码

$(document).ready(function() {
 // 操作dom
})
// 简写
$(function() {
 // 和上面的作用相同
})

jQuery入口函数与js入口函数的区别

js入口函数指的是：window.onload = function() {};

区别一：书写个数不同

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

jQuery的$符号

jQuery使用$符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

$实际上表示的是一个函数，等同于jQuery函数。根据传入参数的不同，进行不同的调用，实现不同的功能，返回的是jQuery对象。

jQuery对象和DOM对象的相互转换

DOM对象转换成jQuery对象：

var btn = document.getElementById("btnShow"); // btn就是一个DOM对象
var $btn = $("#btnShow"); // $btn就是一个jQuery对象
var $btn1 = $(btn);

jQuery对象转换成DOM对象：

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）
// 第二种方式
var btn2 = $btn.get(0); // 此时就把jQuery对象$btn转换成了DOM对象btn2

jQuery选择器

考虑兼容性的话，js里面提供的选择DOM的方法只有两个：

document.getElementById();	通过id属性获取指定元素 返回唯一的DOM对象
document.getElementsByTagName();	通过标签名获取指定元素 返回DOM对象数组（即使只有一个元素）

正是因为js提供的选择DOM的方法太少了，满足不了我们平时开发的需要，所以我们可以使用jQuery选择器来弥补这方面的不足。jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。

基本选择器

符号(名称)	说明	用法
#	Id选择器	$(“#btnShow”).css(“color”,“red”); 选择id为btnShow的一个元素（返回值为jQuery对象，下同）
.	类选择器	$(“.liItem”).css(“color”,“red”); 选择含有类liItem的所有元素
element	标签选择器	$(“li”).css(“color”,“red”); 选择标签名为li的所有元素

层级选择器

符号(名称)	说明	用法
空格	后代选择器	$(“#j_wrap li”).css(“color”,“red”); 选择id为j_wrap的元素的所有后代元素li
>	子代选择器	$(“#j_wrap>ul>li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li

筛选选择器

符号(名称)	说明	用法
find(selector)	查找指定元素的所有后代元素（子子孙孙）	$(“#j_wrap”).find(“li”).css(“color”,“red”); 选择id为j_wrap的所有后代元素li
children()	查找指定元素的直接子元素（亲儿子元素）	$(“#j_wrap”).children(“ul”).css(“color”,“red”); 选择id为j_wrap的所有子代元素ul
siblings()	查找所有兄弟元素（不包括自己）	$(“#j_liItem”).siblings().css(“color”,“red”); 选择id为j_liItem的所有兄弟元素
parent()	查找父元素（亲的）	$(“#j_liItem”).parent(“ul”).css(“color”,“red”); 选择id为j_liItem的父元素
eq(index)	查找指定元素的第index个元素，index是索引号，从0开始	$(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个

操作DOM

名称	说明	用法
css()	设置或获取样式属性	设置： $(selector).css(“color”,“red”); $(selector).css({“clolor”:”red&rdquo}); 获取： $(selector).css(“color”);
addClass(className)	设置样式	$(selector).addClass(“liItem”);
removeClass(className)	移除样式	$(selector).removeClass(“liItem”);
show()	显示，可设置动画时间ms	$(selector).show(1000); $(selector).show(1000,function(){});
stop()	停止动画	$(selector).stop();
html()	设置或获取html内容	设置：（动态创建元素） $(“div”).html(“<p>我是一个p元素</P>”); 清空节点： $(“div”).html(“”); 获取： $(“div”).html();
append()	追加元素	为div元素追加子元素： $(“div”).append(“<p>宅课学院</p>”);

尺寸位置操作

宽高获取与设置

// 带参数表示设置高度
$(selector).height(200);
//不带参数获取高度
$(selector).height();
// 宽度也一样
$(selector).width(200);
$(selector).width();

位置获取与操作

1、offset()，获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置
$(selector).offset();
// 有参数表示设置，参数推荐使用数值类型
$(selector).offset({left:100, top: 150});

2、position()，获取相对于其最近的具有定位的父元素的位置。

// 获取，返回值为对象：{left:num, top:num}
$(selector).position();

3、scrollTop()，获取或者设置元素垂直方向滚动的位置，水平方向为scrollLeft()

// 无参数表示获取偏移
$(selector).scrollTop();
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);

链式编程：通常情况下，只有设置操作才能把链式编程延续下去

 end() 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

$("#j_wrap").find("li").hide().end().css("color","red");

jQuery事件机制

事件绑定

jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

1、简单事件绑定：

$(selector).click(function(){
  // 点击了
});

• click(handler)                       单击事件
• blur(handler)                        失去焦点事件
• mouseenter(handler)            鼠标进入事件
• mouseleave(handler)             鼠标离开事件
• dbclick(handler)                  双击事件
• change(handler) 改变事件，如：文本框值改变，下来列表值改变等
• focus(handler)                      获得焦点事件
• keydown(handler)                键盘按下事件

2、on方式，给匹配到的元素直接绑定事件，支持绑定多个事件，$(selector).on(event,childSelector,data,function)

event（事件）：必需。规定要从被选元素移除的一个或多个事件或命名空间

childSelector（子选择器）：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）

data（数据）：可选。规定传递到函数的额外数据

function（函数）：可选。规定当事件发生时运行的函数

$("p").bind("click mouseenter", function(e){
    //事件响应方法
});

3、delegate方式（特点：性能高，支持动态创建的元素）

$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

事件解绑

1、unbind() 方式，解绑 bind方式绑定的事件

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

2、undelegate() 方式，解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate("click"); //解绑所有的click事件

3、off解绑on方式绑定的事件

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

事件触发

1、简单事件触发

$(selector).click(); //触发 click事件

2、trigger方法触发事件

$(selector).trigger("click");

3、triggerHandler触发 事件响应方法，不触发浏览器行为

// 比如文本框获得焦点的默认行为
$(selector).triggerHandler("focus");