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);