JQuery,简称:jq , 是由几位外国小哥编写的js代码库,对原生的js代码进行了函数封装,提供了丰富简便的操作方法.
关于版本问题: 1X, 2X , 3X 版本,最大的区别1x版本对低版本的IE浏览器做了兼容处理.
口号:write less do more .
主要简化: DOM操作 , ajax请求
核心: 全局对象jQuery
方法
- ready()方法:会在文档的DOM结构加载完毕后自动执行
jQuery(document).ready(function(){
console.log('ready');
})
jQuery 可以简写成 $
$(document).ready(function(){
console.log('ready');
})
最简形式:
$(function(){
console.log('ready');
})
window的load事件会在文档的DOM以及所需资源加载完毕后自动执行
window.onload = function(){
console.log('load')
}
ready 与 load 的区别
- 加载机制, ready只监听DOM加载 , load需要监听DOM和资源加载; 因此 ready 一定先于 load 事件触发.
- 触发结果, ready多次绑定多次触发, load多次绑定只覆盖最后绑定
原生获取页面DOM的方法:
getElementById , getElementsByClass , getElementsByTagName 与 querySelector , querySelectorAll;
jQuery获取元素的方法
$(selector) : 参数selector 表示选择器字符串, 会返回一个类数组集合,集合中存储有 符合 selector 的元素.这个类数组集合是jQuery包装后的集合,可以调用所有的jQuery提供的方法.
也就是说,把通过jQuery提供的获取元素标签得到的元素暂且称为 jQueryDOM , 通过js原生大大获取的元素称之为原生DOM的话 : jQueryDOM 只能进行jQuery操作,原生的DOM只能进行js操作,不用在互相调用
var $ul = $('ul');
console.log($ul);
console.log($ul[0]) // 可以通过对jqueryDOM取下标完成对原生的DOM的转化;
jQuery提供的方法支持所有css样式 , 并且还提供了一些css没有的选择器.
1.:eq(n) 选择器: 获得指定下标
var $el = $('li:eq(2)');
console.log($el)
- :lt(n) 选择器: 获取页面上所有
li标签中下标小于 2 的li标签.
var $el = $('li:lt(2)');
console.log($el);
- :gt(n)选择器: 获取页面上所有li标签中下标大于2的li标签
var $el = $('li:gt(2)');
console.log($el);
- :even 选择器: 获得页面上所有li标签中下标为偶数的li下标
var $el = $('li:even');
console.log($el)
- :odd 选择器: 获得页面上所有li标签中下表为奇数的li标签
var $el = $('li:odd');
console.log($el)
: 原生DOM 和 jQueryDOM 的相互转化
jQuery -> 原生
el[n]
5. 大小设置
1.设置大小
width() / height()
$('ul').width(150).height(150)
2.读取大小
console.log($('ul').width())
console.log($('ul').height())
innerWidth() / innerHeight()w's
console.log($('ul').innerWidth()) // 内容+ 内边距的宽高
console.log($('ul').innerHeight())
outerWidth() / outerHeight()
$('ul').outerwidth(100).outerheight(100)
console.log($('ul').outerWidth()) //盒模型宽高
console.log($('ul').outerHeight())
3.位置设置
1. offset() //读取元素到视窗原点的偏移距离
var $ul = $('ul');
console.log($ul.offset().left);
console.log($ul.offset().top);
position() // 读取元素原点到定位父级原点的偏移距离
console.log($ul.position().left)
console.log($ul.position().top)
滚动偏移
scrollLeft() / scrollTop()
读取
console.log($ul.scrollLeft());
console.log($(window).scrollTop());
设置
$ul.scrollTop(50)
$(window).scrollTop(0) // 无效
jQuery 提供的关于元素属性和样式的操作
- 设置样式
原生操作
var lis = document.querySelectorAll('li');
for(var i = 0 ;i<lis.length;i++){
lis[i].style.backgroundColor = 'red';
lis[i].style.color = 'white';
lis[i].style.fontSize = '30px';
}
#jQuery
$('li').css('background-color','red').css('color','#fff').css('fontSize','30px');
当元素集合设置样式时,不需要你进行循环遍历,jQuery会自动的遍历元素集合,为集合中的每一个元素设置样式.
jQueryDOM连续调用方法的形式称为链式写法,其实现原理就是在操作方法的末尾返回调用方法的元素
- 内容的读取和设置
$('li:eq(0)').html('<h1>jQuery</h1>')
读取内容
console.log($('li:eq(0)').html())
- 属性的读取和设置
var $li = $('li:eq(1)');
读取属性
console.log($li.attr('class'))
设置属性
$li.attr('index',2)
- 类名设置
var $li = $('li:eq(1)');
# 设置/添加类名
$li.addClass('item');
# 删除类名
$li.removeClass('jQuery');
# 切换类名: 自行判断,元素是否包含参数类名,如果包含就执行类名删除操作,否则执行类名添加操作.
$li.toggleClass('item');
$li.toggleClass('item');
jQuery中DOM操作
1.创建DOM
语法：$(标签字符串)
var $el = $('<div></div>').addClass('item').html('box').css({
'width':'200px',
'height':'200px',
'background-color':'red',
color:'#753492',
fontSize:'40px',
textAlign:'center',
lineHeight:'200px'
})
console.log($el)
- 添加DOM
# (1)A.append(B): 将元素B追加到元素A的末尾
var a = $('body').append($el)
#(2)B.appendTo(A): 将B追加到A的末尾
$el.appendTo('body').html('box').css({
color:'#753492',
fontSize:'40px',
textAlign:'center',
lineHeight:'200px'
})
# A.prepend(B):将B添加到A的开头
$('body').prepend($el)
# B.prependTo(A):将B添加到A的开头
# A.after(B): 将B插入到A的后面
$el.after($('<h1>after</h1>'));
# A.before(B)：将B插入到A的前面
$el.before($('<h1>before</h1>'));
删除DOM
A.remove():将A从它的父元素中删除
A.empty() :将A的内容至空
克隆DOM
A.clone(): 克隆A,并且只有深克隆
$el.clone().appendTo('body');
DOM关系
$('<p>son</p>').appendTo($el)
- 父关系
# A.parent(): 获得A的父元素
console.log($('p').parent());
# A.prents(): 获得A的所有的父元素
console.log($('p').parents());
# A.prentsUntil(): 获得A的所有父元素直到参数指定元素为止。
console.log($('p').parentsUntil('html'));
#2. A.children() : 获得A的所有子元素
$('<span>qwq</span>').appendTo($el);
console.log($el.children('p'));
#3. 兄弟
#A.next(): 获得A的下一个兄弟元素
#A.nextAll(): 获得A后面所有的兄弟元素
#A.nextUntil(): 向后获取兄弟元素直到参数条件成立为止
#A.prev(): 获得A的上一个兄弟元素
#A.prevAll():获得A前面所有的兄弟元素
#A.prevUntil():向前获取兄弟元素直到参数条件成立为止
A.siblings(): 获得A所有的兄弟元素
jQuery返回值
事件类方法的返回值都是绑定事件的元素
attr() / prop(), 单参数返回属性值，双参数时返回设置属性的元素本身
width() / heigth()/innerWidth() / inner Height() / outerHeight() /outerWidth()/outerHeight() / scrollLeft() /scrollTop() /html() / val() , 无参数时返回样式值，有参数时返回设置样式的元素本身
4， offset() / position() 返回值是js对象
jQuery遍历
jQuery提供了each方法，来遍历js数组、js对象、类数组集合(元素集合、arguments等)
用法1 ：$.each(value,callback)
var obj ={name: 'each',type:'function'};
var arr = ['red','green','blue'];
li,function(x,y){
在each方法遍历arr元素过程中，每遍历得到一个元素，都会调用移出回调函数，并将遍历的索引和索引对应的元素值传入回调函数。
console.log(x + '->' + y);
在遍历元素集合是，第二个参数传入的是原生DOM
console.log(x);
console.log(y)
用法2: $(selector).each(callback);
$li.each(function(x,y){
// console.log(x);
// console.log(y);
//遍历元素集合时，回调函数中的this不指向window而是遍历得到的元素(原生DOM);
// console.log(this);
//在回调函数中返回false可以终止遍历
console.log(y)
if(y.innerHTML % 2 == 0){
return false;
}
})
jQuery动画
- 预定义动画（对元素进行隐藏和显示的操作）
show() / hide()：通过改变元素的width、height、opacity实现隐藏/显示。
fadeIn() / fadeOut()：淡入/淡出 实现隐藏显示
fadeToggle()：切换淡入/淡出
slideUp() / slideDown()：滑入/滑出
slideToggle()：切换
$('div').click(function(){
// 使显示的元素隐藏
$('div').hide(10000);
$('div').fadeOut(1000);
$('div').fadeToggle(1000);
$('div').delay(2000).slideUp(1000);
})
自定义动画
jQuery动画存在“动画队列”，jQuery允许你为元素添加多个动画，这些动画会按照添加的顺序依次播放。
animate(options,duration,timing-function,callback)
参数情况说明：
options：Object类型，设置动画播放结束时元素的状态
duration：number类型，设置动画播放时间，单位ms
timing-function：string类型，设置动画缓动，默认值'swing'，可设置'linear'
callback：回调函数，动画播放完毕自动调用
delay()：延迟播放动画
$('div').delay(1000).animate({
left: '300px',
'background-color':'yellow'
},3000,'linear',function(){
// 回调函数中this指向播放动画的元素（原生DOM）
console.log(this);
}).slideUp(500);
stop(boolean,boolean)：停止动画。
（1）当第一个参数为true，结束所有动画（当前动画和队列中的其他动画）
（2）当第二个参数为true，结束当前动画，并且从结束状态开始队列中的下一个动画。
（3）当第二个参数为false，结束当前动画，并且从当前状态开始队列中的下一个动画。
jQuery插件
color.js 支持所有色值的变化,但是颜色单词插件中只提供了部分支持,如果需要请自行添加
$('div').click(function(){
//jQuery提供的timer插件,所有的计时器开启都必须开在元素上
// 1. everyTime(interval, label, fn, times)
//interval :string类型; 计时间隔
//label: string类型; 计时器的名字
//fn : 回调函数; 计时到达时自动调用执行
//times: number类型 , 设置计时最大次数 没设置默认为一直重复
// $('div').everyTime('1s','one',function(){
// //回调函数中的this指向绑定了计时器的
// console.log(this)
// },5)
//oneTime(interval, label, fn)//延迟
$(this).everyTime('2s','two',function(){
console.log(this)
})
// stopTime(label, fn)
$(this).stopTime('one')
})
