1.javascript
不爽的地方：
1. 代码比较麻烦，需要遍历，可能还需要嵌套。
2. 找对象麻烦，方法少，还长
3. 会有兼容性问题。
4. 如果想要实现简单的动画效果 animate
5. js注册事件，会被覆盖，addEventListener
2.JQuery
JQuery：
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）
优点总结：
1. 查找元素的方法多种多样，非常灵活
2. 拥有隐式迭代特性，因此不再需要手写for循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单，而且功能更加的强大。
5. 代码简单、粗暴。
3.JQuery入口函数
//js的入口函数执行要比jQuery的入口函数执行得晚一些。
//jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。
//js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。
window.onload = function () {
console.log("我是js的入口函数");
};
//认识
$(document).ready(function () {
console.log("这是jQuery入口函数的第一种写法");
});
$(function () {
console.log("这是jQuery入口函数的第二种写法");
});
4.DOM对象与JQ对象
DOM对象(js对象):使用js的方式获取到的元素就是js对象（DOM对象）。
jq对象：使用jq的方式获取到的元素就是jq对象。
jq对象与js对象的区别：js对象对象不能调用jq对象的方法。
jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上）
5.选择器
基本选择器
ID选择器 ------------------ $(“#id”); （获取指定ID的元素）
类选择器 ------------------ $(“.class”); （获取同一类class的元素）
标签选择器 ---------------- $(“div”); （获取同一类标签的所有元素）
并集选择器 ----------------- $(“div,p,li”); （使用逗号分隔，只要符合条件之一就可）
交集选择器 ---------------- $(“div.redClass”); （获取class为redClass的div元素）
层级选择器
子代选择器 ---------------- $(“ul>li”); （使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素）
后代选择器 ---------------- $(“ul li”); （使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等）
过滤选择器：这类选择器都带冒号:
:eq（index） ---------------- $(“li:eq(2)”).css(“color”, ”red”); （获取到的li元素中，选择索引号为2的元素，索引号index从0开始。）
:odd ---------------- $(“li:odd”).css(“color”, ”red”); （获取到的li元素中，选择索引号为奇数的元素）
:even ---------------- $(“li:even”).css(“color”, ”red”); （ 获取到的li元素中，选择索引号为偶数的元素）
筛选选择器(方法)：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
children(selector) ---------------- $(“ul”).children(“li”) （相当于$(“ul>li”)，子类选择器）
find(selector) ---------------- $(“ul”).find(“li”); （相当于$(“ul li”),后代选择器）
siblings(selector) ---------------- $(“#first”).siblings(“li”); （查找兄弟节点，不包括自己本身。）
parent() ---------------- $(“#first”).parent(); （查找父亲）
eq(index) ---------------- $(“li”).eq(2); （相当于$(“li:eq(2)”),index从0开始）
next() ---------------- $(“li”).next() （找下一个兄弟）
prev() ---------------- $(“li”).prev() （找上一次兄弟）
6.index()方法
index()方法会返回当前元素在所有兄弟元素里面的索引。
$("li").click(function () {
console.log($(this).index());
});
7.css操作
$(function () {
//css(name, value)
//修改单个样式
//name:样式名 value:样式值
$("li")
.css("backgroundColor", "pink")
.css("color", "red")
.css("fontSize", "32px");
//css(obj)
//修改多个样式
$("li").css({
backgroundColor:"pink",
color: "red",
fontSize:"32px",
border: "1px solid black"
});
//获取样式
//css(name)
//name:想要获取的样式
$("li").eq(0).css("fontSize", "20px");
$("li").eq(1).css("fontSize", "21px");
$("li").eq(2).css("fontSize", "22px");
$("li").eq(3).css("fontSize", "23px");
//A:20 b:21 c:22 d:23 e:16 f:[20, 21, 22, 23]
//隐式迭代：
// 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
// 获取的时候：只会返回第一个元素对应的值。
console.log($("li").css("fontSize"));//16px
});
8.class操作
$(function () {
$("input").eq(0).click(function () {
// 添加一个类
$("li").addClass("basic");
});
$("input").eq(1).click(function () {
$("li").addClass("bigger");
});
$("input").eq(2).click(function () {
//移除一个类
$("li").removeClass("bigger");
});
//判断类
$("input").eq(3).click(function () {
//移除一个类
console.log($("li").hasClass("bigger"));;
});
$("input").eq(4).click(function () {
//判断li有没有basic类，如果有，就移除他，如果没有，添加他
//toggle
$("li").toggleClass("basic");
});
});
9.属性操作
//用法和css一样
//设置单个属性
//attr(name, value)
$("img").attr("alt", "图破了");
$("img").attr("title", "错错错错");
//设置多个属性
$("img").attr({
alt:"图破了",
title:"错错错",
aa:"bb"
})
10.prop方法
//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
$(function () {
$("input").eq(0).click(function () {
$("#ck").prop("checked", true);
});
$("input").eq(1).click(function () {
$("#ck").prop("checked", false);
});
});
11.show方法
$(function () {
$("input").eq(0).click(function () {
//show不传参数，没有动画效果
//$("div").show();
//show(speed)
//speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
//fast:200ms normal:400ms slow:600
//$("div").show("ddd");
// show([speed], [callback])
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
})
});
12.滑入滑出动画
$(function () {
//滑入（slideDown） 滑出：slideU
$("input").eq(0).click(function () {
//slideDown：如果不传参数，有一个默认值normal
//$("div").slideDown();
//$("div").slideDown(1000);
$("div").slideDown(1000, function () {
console.log("额呵呵");
});
});
$("input").eq(1).click(function () {
$('div').slideUp();
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
13.淡入淡出动画
$(function () {
//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(1000);
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})
});
14.自定义动画
$(function () {
$("input").eq(0).click(function () {
//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({left:800}, 8000);
//swing:秋千 摇摆
$("#box2").animate({left:800}, 8000, "swing");
//linear:线性 匀速
$("#box3").animate({left:800}, 8000, "linear", function () {
console.log("hahaha");
});
})
});
15.动画列表
$(function () {
$("#btn").click(function () {
//把这些动画存储到一个动画队列里面
$("div").animate({left:800})
.animate({top:400})
.animate({300,height:300})
.animate({top:0})
.animate({left:0})
.animate({100,height:100})
})
});
16.停止动画
$(function () {
$("input").eq(0).click(function () {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function () {
//stop:停止当前正在执行的动画
//clearQueue:是否清除动画队列 true false
//jumpToEnd:是否跳转到当前动画的最终效果 true false
//.stop().animate();
$("div").stop(true, true);
})
});
17.动态创建节点
$(function () { // var box = document.getElementById("box"); // var a = document.createElement("a"); // box.appendChild(a); // a.setAttribute("href", "http://www.baidu.com"); // a.setAttribute("target", "_blank"); // a.innerHTML = "百度"; $("#box").append('<a href="http://www.baidu.com" target="_blank">百度</a>'); });
18.创建与添加节点
$(function () {
// //创建jq对象
var $li = $('<a href="http://www.baidu.com" target="_blank">百度</a>');
// console.log($li); $("div").append('<a href="http://www.baidu.com" target="_blank">百度</a>');
//添加到子元素的最后面
$("div").append($("p"));
$("p").appendTo($("div"));
$("div").prepend($("p"));
$("p").prependTo($("div"));
$('div').after($("p"));
$('div').before($("p"));
});
19.html方法和text方法
$(function () {
//html:innerHTML text:innerText
console.log($("div").html());//<h3>我是标题</h3>
console.log($("div").text());//我是标题
$("div").html("<p>我是文本</p>");
$("div").text("<p>我是文本</p>");
});
20.width方法和height方法
$(function () {
//获取div的宽度
console.log($("div").css("width"));
$("div").css("width", "400px");
//直接获取到的是数字
//就是获取的width的值
console.log($("div").width());//width
console.log($("div").innerWidth());//padding+width
console.log($("div").outerWidth());//padding+width+border
console.log($("div").outerWidth(true));//padding+width+border+margin
//$("div").width(400);
//需要获取页面可视区的宽度和高度
$(window).resize(function () {
console.log($(window).width());
console.log($(window).height());
});
});
21.offset和position方法
$(function () {
//获取元素的相对于document的位置
console.log($(".son").offset());
//获取元素相对于有定位的父元素的位置
console.log($(".son").position());
});
22.on注册事件
//on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
//on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
//on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);