一、选择器
1. 入口函数
jQuery的入口函数一般为:
$(document).ready(function () {
//1.文档加载完毕,图片不加载的时候就可以执行这个函数。
})
这种写法类似于原生js中的window.onload = function () {}
当然,jQuery也有其他的入口函数,比如:
$(function () {
//这个与第一个入口函数是相同的,最简洁的代码
});
$(window).ready(function () {
//文档加载完毕,图片也加载完毕的时候再执行这个函数
})
2. jQuery的DOM对象和原生js中的DOM对象的区别和转换
- 区别:jquery对象是一个数组。数组中包含着原生JS中的DOM对象。数组的长度和原生js中的DOM对象的个数是一致的。换句话说,jQuery对象数组中的前几个元素就是原生js中的DOM对象。
- 转换:
1.js对象转换成jquery对象:$(js对象);
var box = document.getElementById("box");
var jqbox = $(box);//jqbox就变成了jQuery对象
2.jquery对象转换成js对象。(jquery对象[索引值]或jquery对象.get(索引值))
var jqbox = $("box);
var box = jqbox[0]|jqbox.get(0);//box就是原生js对象
3.基本选择器
- 通过标签名获取:$(“div”)
- 通过类名获取:$(".box")
- 通过id名获取:$("#box")
4.层级选择器
- 在后代中获取:$(“ul li”)
- 在子代中获取:$(“ul>li”)
5.筛选选择器
- 利用过滤选择器获取偶数位元素:$(“ul li:odd”)
- 利用过滤选择器获取奇数位元素:$(“ul li:even”)
- 利用过滤选择器获取指定索引值元素:$(“ul li:eq(0)”)
- 从jquery对象的后代中查找:$(“ul”).find(“li”)—必须有参数,参数为选择器。若不写参数获取不到元素。
- 从jquery对象的子代中查找:$(“ul”).children(“li”)—可以不写参数。不写参数则获取所有子元素。
- 获取该元素的下一个兄弟元素:$(“ul”).children(“li”).next()
- 获取元素的所有兄弟元素:$(“ul”).children(“li”).siblings()
- 获取元素的父元素:$(“ul”).children(“li”).eq(0).parent()
二、DOM操作
1.样式操作
$("div").css() //若参数只有一个,则是获取样式。若参数有两个,则是设置样式
//如果想一次设置多个样式,可以将参数设为json
2.类操作
- 添加类:addClass()—参数为类名
- 删除类:removeClass()—参数为类名
- 判断类:hasClass()—参数为类名,在此方法中jquery对象数组中有一个带有类名的是true,所有都不带才是false;
3.动画
1.显示:
- $(“div”).show()—不加参数,通过display:block控制
- $(“div”).show(1000)—一个参数,毫秒值。通过控制宽高透明度实现,有动画的效果
- $(“div”).show(1000,回调函数)
2.隐藏:
- $(“div”).hide()—不加参数,通过display:none控制
- $(“div”).hide(1000)—一个参数,毫秒值。通过控制宽高透明度实现,有动画的效果
- $(“div”).hide(1000,回调函数)
3.显示隐藏切换
- $(“div”).toggle()—用法和1 2两种类似
4.滑入
- $(“div”).slideDown()—用法和1 2两种类似
5.滑出
- $(“div”).slideUp()—用法和1 2两种类似
6.滑入滑出切换
- $(“div”).slideToggle(1000)—用法和1 2两种类似
7.淡入
- $(“div”).fadeIn()—用法和1 2两种类似
8.淡出
- $(“div”).fadeOut()—用法和1 2两种类似
9.淡入淡出切换
- $(“div”).fadeToggle()—用法和1 2两种类似
10.改透明度
- $(“div”).fadeTo()—必须要有两个参数。第一个参数是毫秒值,第二个参数是透明度(0-1),可以有第三个参数,为回调函数。
11.停止动画
- $(“div”).stop()—有两个参数,参数为布尔类型,第一个参数表示后续动画是否停止(true:后续动画不执行 ;false:后续动画会执行),第二个参数表示当前动画是否执行完(true:立即执行完当前动画 ;false:立即停止当前动画)。如果不写参数,默认两个都是false。
- 此函数针对的是同一对象(元素)
12.自定义动画
- $(“div”).animate()—要实现多个属性的变换可以用json作为参数传入。
第一个参数是要改变的属性(可以为json),第二个参数是毫秒值,第三个参数是回调函数。(自定义动画默认为缓动动画,若需要匀速可以设置第三参数为"linear")
3.节点操作
- 创建节点
//创建节点1: $("标签") 类比于js中的document.createElement("li");
$("<li class='aaa'>我是li标签</li>");
//创建节点2: $("ul").html(""); 类比innerHTML属性。因为此属性,识别标签。
$("ul").html("<li>我是html方法创建出来的li标签</li>");
- 添加节点
//append(); 在盒子的最末尾添加一个元素。
$("ul").append(jqNewLi); //把新创建的li塞进ul中
//prepend(); 在盒子最前面添加
$("ul").prepend(jqNewLi);
//下面两个方法是操作兄弟元素的。放在兄弟元素之后或者之前
//after();
$("li").after(jqNewLi);
//before();
$("li").before(jqNewLi);
- 删除和清空节点
//清空li所在的ul
//方法1:.html("");
$("ul").html("");
//方法2:.empty();
$("ul").empty();
//自己删除自己
$("li:eq(0)").remove()//自杀
- 复制节点
//复制节点: clone();
var newUl = $("ul").clone();//默认为深层复制
4.属性操作
- 添加属性:$(“ul”).attr()—两个参数是给属性赋值,单个参数是获取属性值。
- 删除属性:$(“ul”).removeAttr()—只有一个参数
- 特殊属性:$(“ul”).prop(“checked”,true)—在form中的特殊属性,用prop,比如表单元素的checked、selected、disabled等属性
- value属性:$(“ul”).val()—不写参数是获取,一个参数是赋值
- innerHTML属性:$(“ul”).html()—不写参数是获取,一个参数是赋值
- innerText属性:$(“ul”).text()—不写参数是获取,一个参数是赋值
5.坐标操作及事件机制
1.坐标操作
- $(“box”).width()—只获取本身的宽。没有参数是获取,一个参数是设置宽度(设置的时候不用带“px”单位)
- $(“box”).height():只获取本身的高。没有参数是获取,一个参数是设置高度(设置的时候不用带“px”单位)
- $(“box”).offset():类比于原生js中的event.pageY。作用:获取或设置元素相对于文档(body)的位置。无参数表示获取,返回值为:{left:num, top:num},值是相对于document的位置,有参数表示设置,参数推荐使用数值类型(不带“px”单位)
- $(“box”).position():类比于原生js中的offsetTop。作用:获取相对于其最近的具有定位的父元素的位置,无参数表示获取,返回值为:{left:num, top:num}。注意:此方法只能获取,不能设置。
- $(“box”).scrollTop()/scrollLeft():类比于原生js中的scrollTop。作用:获取或者设置元素垂直/水平方向被卷去的长度。无参数表示获取,有参数表示设置,参数为数值类型。对scrollTop的理解:垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。
- $(window).width():类比于原生js中的clientWidth获取可视区域的宽高一致(可视区域不包括地址栏、工具栏)
- $(window).height():类比于原生js中的clientHeight获取可视区域的宽高一致(可视区域不包括地址栏、工具栏)
2.事件机制
- 事件绑定:
// 这种绑定事件的方法是不会层叠的。
$(document).click(function () {
alert(1);
});
$(document).click(function () {
alert(2);
});
// 第二种绑定:bind
$(document).bind("click mouseenter", function () {
alert(1);
})
$(document).bind("click mouseenter", function () {
alert(2);
})
// 第三种
$(document).delegate(".box","click mouseenter", function () {
alert(1);
})
// 第四种(重点)
$(document).on("click mouseenter",".box",{"name":111}, function (event) {
alert(event.data.name);
});
$(document).on("click",".box", function () {
});
- 事件解绑
$(document).unbind("mouseenter click");//适用于第一种和第二种绑定
//第三种
$(document).delegate(".box","click mouseenter", fn)//绑定
$(document).delegate(".box","click mouseenter", fn2)
function fn(){
alert(1);
}
function fn2(){
alert(2);
}
$(document).undelegate(".box","mouseenter",fn)//解绑
//第四种(重点)
$(document).on("click mouseenter",".box",{"name":111}, function (event) {
alert(event.data.name);
});//绑定
$(document).off("mouseenter",".box");//解绑
- 事件触发
//事件触发(1)(触发浏览器行为)(只执行程序,不触动事件)
$(document).click();
$(document).mouseenter();
//事件触发(2)(触发浏览器行为)(只执行程序,不触动事件)
$(document).trigger("mouseenter");
$(document).trigger("click");
//事件触发(3)(不触发浏览器行为)(只执行程序,不触动事件)
$(document).triggerHandler("mouseenter");
$(document).triggerHandler("click");
- 事件对象
$(function () {
$(document).on("click", {},function (event) {
console.log(event.data) // 传递给事件处理程序的额外数据
console.log(event.currentTarget) // 等同于this,当前DOM对象
console.log(event.pageX) // 鼠标相对于文档左部边缘的位置
console.log(event.target) // 触发事件源,不一定===this
console.log(event.stopPropagation()) //阻止事件冒泡
console.log(event.preventDefault()) // 阻止默认行为
console.log(event.type) // 事件类型:click,dbclick…
console.log(event.which) //鼠标的按键类型:左1 中2 右3
console.log(event.keyCode) //键盘按键代码
});
})
- 两个特殊方法
//1.获取焦点
$("input").focus();//原生js和jQuery中一模一样的方法
//2.选定所有内容(能够输入内容的标签)
$("input").select();//内容被选中
3.链式编程和隐式迭代
- 链式编程
链式编程原理:return this;通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。end(); // 结束当前链最近的一次过滤操作,并且返回链之前的元素节点。 - 隐式迭代
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。 - each方法
jQuery(function () {
//设置不一样的盒子透明度逐渐递增
$("ul li").each(function (index,element) {//index是索引值,ele是原生js节点
$(element).css("opacity",(index+1)/10);
});
});
三、UI
1.插件(jQuery有很多插件,可以根据自己的需求选择不同的插件)
- 改变背景色
如果不使用插件,通过css()这个方法是不能对背景色进行获取和设置的,这时候就必须引用一个jquery.color.js插件,这样就可以通过css()这个方法对背景色进行获取和设置了。 - 图片之懒加载
效果:只有当图片显示在屏幕上(可视区域),图片才会加载
<script src="jquery.lazyload.min.js"></script>
<script>
$(function () {
//懒加载调用
//使用插件:1.引包。(必须在jquery之下) 2.通过调用方法实现功能,而参数的不同,功能也可能不同。
$("img.lazy").lazyload();
})
</script>
<img class="lazy" data-original="images/02.jpg">