jQuery的学习（一）

jQuery和原生JS的对比

	原生JS	JQuery
加载模式	原生JS会等到dom元素加载完毕，并且图片也加载完毕才会执行	jQuery会等到dom元素加载完毕，但不会等到图片也加载完毕
入口函数	原生JS如果编写多个入口函数，后面的会覆盖前边的	jQuery编写的多个入口函数，后边的不会覆盖前边的

jQuery入口函数的写法

//第一种写法
$(document).ready (function () { 
	// 代码
});

//第二种写法
jQuery(document).ready(function () {
	//代码
});

//第三种写法(推荐)
$(function () {
	//代码
});

//第四种写法
jQuery(function () {
	//代码
});

jQuery冲突解决

• 释放 $ 的使用权限

//释放操作必须在编写jQuery代码之前，并且不能再使用 $ 符号，改用jQuery
jQuery.noConflict();

• 自定义访问符号

var a = jQuery.noConflict();
a (function () {
	//代码
});

jQuery的核心函数

$(); //调用jQuery的核心函数

//1.接收一个函数，即入口函数
//2.接收一个字符串
//3.接收一个字符串选择器(返回一个jQuery对象) 
//4.接收一个字符串代码片段(返回一个jQuery对象) 
//5.接收一个dom元素(返回一个jQuery对象)

jQuery对象

• jQuery对象是一个伪数组
• 伪数组有 0 到 length - 1 的属性，并有 length 属性

静态方法和实例方法

	静态方法	实例方法
添加	直接给类添加	给类的 prototype 添加
调用	静态方法通过类名调用	实例方法通过类的实例调用

forEach

• 原生的 forEach 不能遍历伪数组

	原生的 forEach	jQuery的each方法
代码	arr.forEach(function (value,index){ });	$.each(arr, function (index, value){ });
参数	(元素值，索引)	(数组, 回调函数(索引，元素值 )

map方法

	原生的map方法	jQuery的map方法
代码	arr.map(function (index,value, array){ });	$.map(arr, function(value, index){ });
参数	(元素值，索引，数组)	(数组, 回调函数(元素值，索引 )

jQuery的 each 静态方法和 map 静态方法的区别

	each方法	map方法
默认返回值	返回遍历的数组	返回一个空数组
回调函数中对遍历的数组进行处理	each方法不支持在回调函数中对遍历的数组进行处理	map静态方法可以在回调函数中通过 return 对遍历的数组进行处理，返回一个新的数组

其他静态方法

$.trim(str);
//作用：去除字符串两端的空格
//参数：字符串
//返回值：去掉两端空格的字符串
$.isWindow();
//作用：判断传入的对象是否为window对象
//返回值：true/false
$.isArray();
//作用：判断传入的对象是否为真数组
//返回值：true/false
$.isFunction();
//作用：判断传入的对象是否为函数
//返回值：true/false
`注：JQuery框架本质上是一个匿名函数`
$.holdReady();
//作用：true暂停ready事件，false恢复ready事件
//参数：true/false

jQuery内容选择器

• :contains(text) 找到包含指定文本内容text的指定元素
• :empty 找到既没有文本内容也没有子元素的指定元素
• :parent 找到有文本内容或有子元素的指定元素
• :has(seletor) 找到包含指定子元素的指定元素

var $div = $("div:contains(XXXXX)");
var $div = $("div:empty");
var $div = $("div:parent");
var $div = $("div:has('span')");

属性节点

• 在HTML标签中添加的属性就是属性节点
• dom元素中，attributes 属性中的所有内容都是属性节点
• dom.setAttribute('属性名', ‘值’)
• dom.getAttribute(‘属性名’)
• 任何对象都有属性，但是只有 dom 对象才有属性节点

attr 方法

attr(name|pro|key.val|fn )

• 作用：获取或者设置属性节点的值
• 一个参数：代表获取属性节点的值
• 两个参数：设置属性节点的值
• 获取（一个参数）：无论找到多少元素，都只会返回第一个元素指定的属性节点
• 设置（两个参数）：如果能找到元素，那么有多少元素，就会设置多少元素的属性；如果找不到，会自动新增该属性

$('span').attr('class');
$('span').attr('class', 'box');

removeAttr(name)

• 删除所有找到元素指定的属性节点

$('span').removeAttr('class');

• 删除所找元素的多个属性节点

$('span').removeAttr('class name');

prop 方法

• prop 方法不仅能操作属性，还能操作属性节点
• 官方推荐：在操作属性节点的时候，具有 true 和 false 两个属性的属性节点，如 checked、selected 或 disabled，使用 prop()，其他的使用 attr()

CSS类操作方法

• addClass(class|fn)
• removeClass(class|fn)
• toggleClass(class|fn[,sw]) ：切换类，有就删除，没有就添加

文本值相关操作方法

• html([val|fn]) 等同于原生JS的 innerHTML 方法
• html() 获取 html 的内容
• text([val|fn]) 等同于原生JS的 innerText 方法
• text() 获取 text 内容
• val([val|fn|arr]) 等同于原生JS的 value 方法
• val() 获取 value

CSS样式操作方法

• css(键：值)

//批量设置
$("div").css({
	width: "100px",
	height: "100px",
	background: "red"
});

• 获取 css 样式值

$("div").css("width");

尺寸和位置操作方法

• width([val]|fn)
• height([val|fn])
• innerHeight()
• innerWidth()
• offset([coordinates]) 获取元素距离窗口的偏移
• position() 只能获取元素距离定位元素的距离，无法设置
• scrollTop() 获取/设置滚动的偏移位

//为了保证浏览器的兼容
$("body").scrollTop()+$("html").scrollTop();
//IE 用 body 进行获取

//设置网页滚动偏移位
$("html,body").scrollTop(200);