jQuery+Javascript基础知识汇总

jQuery介绍

jQuery是一个Javascript库，里面提供了很多快速方便操作DOM的函数（方法）。学习jQuery的本质就是学习调用这些函数（方法）。

jQuery的入口函数

等DOM结构渲染完毕即执行内部代码，而不必等到所有外部资源加载完成。相当于原生js中的DOMContentLoaded。不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

// 方法一
$(function() {... // 此处是页面DOM加载完成的入口})
// 方法二
$(document).ready(function() {... // 此处是页面DOM加载完成后的入口});

jQuery的顶级对象`$`

$是 jQuery的别称，在代码中可以使用$代替 jQuery；同时它也是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成 jQuery对象，就可以调用 jQuery的方法。

jQuery对象和DOM对象

用原生js获取来的对象就是DOM对象；jQuery方法获取的元素就是jQuery对象。jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）。

1. DOM对象转换为jQuery对象：$(DOM对象)$('div')
2. jQuery对象转换为DOM对象方法一：$('div')[index] index为索引号方法二：$('div').get(index) index为索引号

jQuery常用API

隐式迭代：遍历内部DOM元素，并以伪数组形式存储，简化操作，方便调用。

jQuery筛选选择器

语法	用法	描述
:first	`$('li:first')`	获取第一个 li 元素
:last	`$('li:last')`	获取最后一个 li 元素
:eq(index)	`$('li:eq(2)')`	获取到的 li 元素中，选择索引号为2的元素，索引号 index 从0开始
:odd	`$('li:odd')`	获取到的 li 元素中，选择索引号为奇数的元素
:even	`$('li:even')`	获取到的 li 元素中，选择索引号为偶数的元素

jQuery筛选方法

语法	用法	说明
parent	`$('li').parent()`	查找父级
children(selector)	`$('ul').children("li")`	相当于`$("ul>li")`，查找最近一级的子级
find(selector)	`$('ul'.find("li"))`	相当于`$("ul li")`，后代选择器
siblings(selector)	`$('ul'.find("li"))`	查找兄弟节点，不包括自己本身
nextAll([expr])	`$(".first").nextAll()`	查找当前元素之后所有的同辈元素
prevtAll([expr])	`$(".last").prevAll()`	查找当前元素之前所有的同辈元素
hasClass(class)	`$('div').hasClass("protected")`	检查当前元素是否含有某个特定的类，如果有，则返回 true
eq(index)	`$("li").eq(2)`	相当于`$("li:eq(2)",index)`从0开始

** jQuery排他思想**：当前元素设置样式，其余兄弟清除样式，实现多选一的效果。

$(function() {// 1. 隐式迭代 给所有按钮都绑定了点击事件$("button").click(function() {// 2. 当前的元素变化背景颜色$(this).css("background", "pink");// 3. 其余的兄弟去掉背景颜色 隐式迭代$(this).siblings("button").css("background", "");});
})

jQuery链式编程：节省代码量，更简洁优雅
上述代码可以用以下这一行来代替

$(this).css("color", "red").sliblings().css("color", "");

jQuery样式操作

（1）操作css的方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

参数只写属性名，则是返回属性值

$(this).css("color");

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。

$(this).css("color", "red");

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({"color":"white", "font-size":"20px"});

（2）操作类的方法
设置类样式方法，可以批量设置css样式，注意操作类里面的参数不要加点。

添加类

$("div").addClass("current");

移除类

$("div").removeClass("current");

切换类

$("div").toggleClass("current");

注：类操作与className的区别
原生JS中className会覆盖元素原有的类名，jQuery的类操作知识对指定类进行操作，不影响原有的类名。

jQuery效果

显示隐藏效果

// 显示语法规范
show([speed,[easing],[fn]])<button>显示</button>
<div></div><script>
$(function() {$("button").eq(0).click(function() {$("div").show(1000, function() {alert(1);})}))
})
</script>

显示参数：参数都可以省略，实现无动画直接显示
speed：三种预定速度之一的字符串（“show”, “normal”, “fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
fn:回调函数，在动画完成时执行，每个元素执行一次

滑动效果

// 鼠标经过
$(".nav>li").monseover(function() {$(this).children("ul").slideDown(200);
}))
// 鼠标离开
$(".nav>li").monseout(function() {$(this).children("ul").slideUp(200);
}))

事件切换

// 事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(fun1(经过的函数),fun2(离开的函数));// 如果只写一个函数。那么经过和离开均会触发这个函数
$(".nav>li").hover(function() {$(this).children("ul").slideToggle();
})

动画队列及其停止排队方法
动画或者效果一旦触发就会被执行，如果多次触发，就会造成多个动画或者效果排队执行。

 $(this).children("ul").stop().slideToggle();

注: stop()方法用于停止动画或效果，应该始终被写在动画或者效果的前面，相当于结束上一次的动画。

淡入淡出

// 淡入
$("div").fadeIn(1000);
// 淡出
$("div").fadeOut(1000);
// 切换
$("div").fadeToggle(1000);// 修改透明度:必须传两个参数速度和透明度
【语法】 fadeTo([[speed],opacity,[easing],[fn]])
$("div").fadeTo(1000,0.5);

自定义动画化animate

【语法】 animate(params, [speed], [easing], [fn])

参数说明
params：必需，想要更改的样式属性，以对象形式传递。属性名可以不带引号，如果是符合属性则需要采取驼峰命名法，其余参数均可省略。

$(function() {$("button").click(function() {$("div").animate({left:500,top:300,opacity:.4,width:500}, 500);})
})

jQuery属性操作

设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，<input>元素里的type。

** 【获取属性语法】 prop("属性")
** 【设置属性语法】 prop("属性", "属性值")$("a").prop("title", "修改后的title名");

设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给<div>添加index = "1"。此方法也可用于获取H5自定义属性。

** 【获取属性语法】 attr("属性") // 类似原生 getAttribute()
** 【设置属性语法】 attr("属性", "属性值") // 类似原生 setAttribute()$("div").attr("index", 4);

数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。同时，还可以读取H5自定义属性，得到的是数字型。

** 【获取数据语法】 attr("name") // 向被选元素获取数据
** 【附加数据语法】 attr("name", "value") //  向被选元素附加数据// 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");// 使用此方法获取data-index h5自定义属性，不用写 “data-”，而且返回的是数字型
$("div").data("index");

jQuery内容文本值

主要针对元素的内容还有表单的值的操作

普通元素内容html()

相当于原生innerHTML

** 【获取元素内容】 html()
** 【设置元素内容】 html("内容") $("div").html();
$("div").html("<h1>123</h1>");

普通元素文本内容text()

相当于原生innerTEXT

** 【获取元素的文本内容】 text()
** 【设置元素地文本内容】 text("文本内容") $("div").text();
$("div").text("123");

获取表单值val()

$("input").val();
$("input").val("123");

jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历。

【语法1】 $("div").each(function(index, domEle) { xxx; })

each()方法遍历匹配的每一个元素，主要用于DOM对象处理；
index 是每个元素的索引号，domEle是每个DOM元素对象，而不是jQuery对象；
要想使用jQuery方法，需要使用$(domEle)将其转换为jQuery对象。

-----------案例：修改单个元素颜色 + 求和<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>$(function() {var arr = ["red", "green", "blue"];$("div").each(function(index, domEle) {// 修改颜色（注意转换，dom对象没有css方法）$(domEle).css("color", arr[i]);// 求和sum += parseInt($(domEle).text());})console.log(sum);})
</script>
</body>

【语法2】 $.each(object,function(index, element) { xxx; })

$.each() 方法可用于遍历任何对象，主要用于数据处理，比如数组、对象；
里面的函数有两个参数：index是每个元素的索引号，element是遍历内容。

// 1. 遍历元素
$each($("div"), function(i, ele) {console.log(i);console.log(ele);
});// 2. 遍历数组
$each(arr, function(i, ele) {console.log(i);console.log(ele);
});// 3. 遍历对象
$each({name: "andy",age: 18}, function(i, ele) {console.log(i); // 输出的是 name age 属性名console.log(ele); // 输出的是 andy 18 属性值
})

创建、添加、删除元素

创建元素

【语法】 $("<li></li>");

添加元素——内部添加
把元素放入匹配元素内部最后面，类似于原生appendChild。

【语法】 element.append("内容");

添加元素——外部添加

【语法】 element.after("内容"); // 把内容放入目标元素后面element.before("内容"); // 把内容放入目标元素前面

注：内部添加元素生成之后，他们是父子关系；外部添加元素之后，他们是兄弟关系。

删除元素

【语法】 element.remove() // 删除匹配的元素（本身）element.empty() // 删除匹配的元素集合中所有的子节点element.html("") // 清空匹配的元素内容

 ---------------------综合案例$(function() {// 1. 创建元素var li = $("<li>后来创建的元素</li>")// 2， 添加元素// （1）内部添加$("ul").append(li);   // 内部添加并且放到内容的最后面$("ul").prepend(li);  // 内部添加并且放到内容的最前面// （2）外部添加var div = $("<div>后来添加的元素</div>");$(".test").after(div);$(".test").before(div);// 3， 删除元素$("ul").remove(); // 删除匹配元素本身$("ul").empty(); // 删除匹配元素里面的子节点$("ul").html(""); // 删除匹配元素里面的子节点
})

jQuery尺寸、位置操作

语法	用法
width() / height()	取得匹配元素宽度和高度值只算 width/height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含padding、border 、margin

注：以上参数为空，则是获取响应值，返回的是数字型；如果参数为数字，则是修改相应值；参数可以不必写单位。

Javascript基础知识部分

字面量和变量

字面量是一些不可改变的值，是可以被直接使用的，但是我们一般都不会直接使用字面量。
变量可以用来保存字面量，是可以任意改变的，在开发中都是通过变量去保存一个字面量。

标识符

在js中所有的可以由我们自主命名的都可以称之为标识符，变量名、函数名、属性名都属于标识符。
命名一个标识符时需要遵守如下的规则：

标识符中可以含有字母、数字、_、$；
标识符不能以数字开头；
标识符不能是ES中的关键字或保留字；
标识符一般都采用驼峰命名法

注：js底层保存标识符时实际上采用的是Unicode编码，所以理论上所有的utf-8中含有的内容都可以作为标识符。