写的少,做的多
1.为什么要使用jquery?
在javascript开发过程中,有很多很多缺点:
1:代码冗余.
2:有兼容性问题
3:遍历数组很麻烦,通常要嵌套一大推的for循环
4:查找元素的方法单一,麻烦
5:想要实现简单的动画效果,麻烦的要死
2.使用了jquery
1:完全没有兼容性问题
2:代码简单,好用
3:查找元素的方法非常灵活
4:拥有隐式迭代特性,因此不再需要手写for循环了
5:实现动画功能相当简单,而且功能强大
jquery与原生js的对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
<style>
.pink{
background-color: pink;
}
</style>
</head>
<body>
<button>按钮</button>
<ul>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ul>
</body>
</html>
<script>
//没使用前,给按钮添加点击事件
document.querySelector('button').onclick=function(){
var num=document.querySelectorAll('ul>li');
//没使用前遍历
for(var i=0;i<num.length;i++){
num[i].style.backgroundColor='pink';//设置颜色
}
}
-----------------------------------------------------
// 使用后,给按钮添加点击事件
$('button').click(function(){
//使用后遍历
$('ul>li').css('backgroundColor','pink');//设置颜色
})
</script>
3.jquery到底是什么呢?
jQuery的官网 http://jquery.com/
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
jQuery就是一个js文件,里面封装了一大推方法提供给我们使用,方便我们的开发,
4.jquery,原生js的入口函数的区别
1.jquery的入口函数有两种写法
<script>
//第一种写法
$(document).ready(function(){
});
//第二种写法
$(function(){
})
//两种写法的意思都一样,通常都是用第二种,因为更简单
</script>
2.jquery与原生js的入口函数对比
<script>
//原生js入口函数
//只能写一个,否则报错
window.onload=function(){
//js的入口函数要等页面中的资源(包括图片,文件)加载完之后执行
}
//jquery入口函数
//可以写多个
$(function(){
//jquery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载
})
//所以jquery的入口函数的执行时机要比原生js的要快
</script>
5.jq对象与dom对象
1.DOM对象:使用js中方法获取页面中的元素返回的对象就是dom对象
2.jQuery对象:jq对象就是使用jquery的方法获取页面中的元素返回的对象就是jq对象
3.jq对象其实就是DOM对象的包装集包装了DOM对象的集合(伪数组)
4.DOM对象与jq对象发方法不能混用
DOM对象转换成jq对象:用$
<script>
var $obj=$('domobj');
//DOM对象转成jq对象
</script>
jq对象转成DOM对象:用下标取值 get()方法
<script>
var $li = $("li");
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
</script>
6.jquery选择器
1.jquery选择器是jquery为我们提供的一组方法,让我们更加方便的获取到页面中的元素
2.jquery选择器返回的是jquery对象
3.基本选择器和层级选择器跟css的选择器用法一毛一样
过滤选择器
:eq(index) 获取到的元素中,按索引来查找元素
:odd 获取到的元素中,选中索引为奇数的元素
:even 获取到的元素中,选中索引为偶数的元素
筛选选择器
children() 子类选择器
find() 后代选择器
siblings() 查找兄弟节点,不包括自己
parent() 查找父亲
eq(index) index从0开始
next() 找下一个兄弟
prev() 找上一个兄弟
7.元素设置
1.样式设置
<script>
//设置样式,两个参数 设置的样式属性,具体样式
$('li').css('color','red');
//对象(设置的样式属性:具体样式)
$('li').css({'color':'red'});
//设置多个样式
$('li').css({
'color':'green',
'font-size':'20px'
})
</script>
2.类名设置
<script>
//添加一个类
$('li').addClass('title');
//删除一个类
$('li').removeClass('title');
//切换一个类,有就删除没有就添加
$('li').toggleClass('title');
//匹配一个类,判断是否包含某个类 如果包含返回true否则返回false
$('li').hasClass('title');
</script>
3.属性设置
<script>
//获取属性
$('li').attr('name');
//设置属性
$('li').attr('name','蔡徐坤');
//设置多个属性
$('li').attr({
'name':'蔡徐坤',
'age':'38',
'xin':'女'
})
</script>
4.prop方法
<script>
//对于布尔类型的属性,不要attr方法,应该用prop方法,prop跟attr方法一样
//给复选框添加属性
$('#checkbox').prop('checked');
//添加属性为true,选中状态
$('#checkbox').prop('checked',true);
//添加属性为false,不选中
$('#checkbox').prop('checked',false);
//删除该属性
$('#checkbox').removeProp('checked');
</script>
8.动画
前言我说过用jquery实现动画效果,是很简单很简单的
1.基本动画
<script>
//动画的本质是改变容器的大小和透明度
//如果不传参数是看不到动画的
//可传入特殊的字符 fast normal slow 推荐使用数字传参 单位毫秒
//展示动画
$('div').show();//相当于display:block
//隐藏动画
$('div').hide();//相当于display:none
//切换展示和隐藏动画
$('div').toggle();
</script>
2.滑入滑出
<script>
//该动画的本质是改变容器的高度
//滑入动画
$('div').slideDown();
//滑出动画
$('div').slideUp();
//切换滑入滑出
$('div').slideToggle();
</script>
3.自定义动画
<script src="./jquery-1.12.4.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* 一定要给元素加定位,否则动不了 */
position:absolute;
}
</style>
</head>
<body>
<button>按钮</button>
<div></div>
<script>
$(function(){
//参数1:需要做动画的属性
//参数2:需要执行动画的总时长
//参数3:执行动画的时候的速度
//参数4:执行动画完成之后的回调函数
$('button').click(function(){
$('div').animate({left:800},5000,'swing',function(){
console.log('完成')
//在回调函数中可以在设置回调函数
$('div').animate({top:300},2000,'linear',function(){
alert('完成')
})
});
})
})
</script>
4.淡入淡出
<script src="./jquery-1.12.4.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>按钮</button>
<div></div>
<script>
//入口函数
$(function(){
$('button').click(function(){
//淡入淡出动画的本质是改变容器的透明度
//淡入动画
$('div').fadeIn();
//淡出动画
$('div').fadeOut();
//切换淡入淡出
$('div').fadeToggle();
//从哪里淡入到哪里
$('div').fadeTo('speed','opacity');
})
})
</script>
以上动画都能添加自定义,这里就不写了,嘻嘻
5.动画队列
jquery中有个动画队列的机制,当我们对一个对象添加多次动画效果时后添加的动作就会被放入整个动画队列中,等前面的动画完成后在开始执行.
可是用户的操作往往都比动画快,如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积,影响到原本的效果,有没有办法解决这个问题呢?当然有!
stop方法解决
<script>
//停止当前动画,如果动画队列当中还有动画立即执行
$('div').stop();
//和stop()效果一致,说明这是默认设置
$('div').stop(false,false);
//停止当前动画,清除动画队列
$('div').stop(true,false);
//停止当前动画并且结束位置,清除子动画队列
$('div').stop(true,true);
//停止当前动画并且到结束位置,如果动画队列当中还有动画立即执行
$('div').stop(false,true);
</script>
9.节点操作
1.创建节点
<script>
//创建节点
var $a=$('<a href="https://www.baidu.com/?tn=21002492_6_hao_pg"target="_blank">点我百度一下</a>')
//在新的窗口打开链接
$('body').html($a);
</script>
2.克隆节点
<script>
//如果想克隆事件 false true事件
//jquery对象的变量名要加$,是一种规范,让别人一看就知道这是一个jq对象
var $cloneP=$('p').clone(true);
</script>
3.添加/移动节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<input type="button" value="append" id="btnAppend" />
<input type="button" value="prepend" id="btnPrepend" />
<input type="button" value="after" id="btnAfter" />
<input type="button" value="before" id="btnBefore" />
<input type="button" value="appendTo" id="btnAppendTo" />
<ul id="ul1">
<li>我是第1个li标签</li>
<li>我是第2个li标签</li>
<li id="li3">我是第3个li标签</li>
<li>我是第4个li标签</li>
<li>我是第5个li标签</li>
</ul>
<ul id="ul2">
<li>我是第1个li标签2</li>
<li>我是第2个li标签2</li>
<li id="li32">我是第3个li标签2</li>
<li>我是第4个li标签2</li>
<li>我是第5个li标签2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1.append();
//元素A.append(元素B); 把元素B追加到元素A中,作为元素A的最后一个子元素添加.
$('#btnAppend').click(function () {
//1.1 新建的li标签,追加到ul1中去
// var $liNew = $('<li>我是蔡徐坤</li>');
// $('#ul1').append($liNew);
//1.2 把ul2中已知的某一个li标签,追加到ul1中. 剪切后追加
// var $li32 = $('#li32');
// $('#ul1').append($li32);
//1.3 把ul1中已知的某一个li标签,追加到ul中. 剪切后追加
var $li3 = $('#li3');
$('#ul1').append($li3);
});;
//2.prepend();
//元素A.prepend(元素B); 把元素B作为元素A的第一个子元素追加.
$('#btnPrepend').click(function () {
//2.1 新建的li标签,追加到ul1中去
// var $liNew = $('<li>我是蔡徐坤</li>');
// $('#ul1').prepend($liNew);
//2.2 把ul2中已知的某一个li标签,追加到ul1中. 剪切后追加
// var $li32 = $('#li32');
// $('#ul1').prepend($li32);
//2.3 把ul1中已知的某一个li标签,追加到ul中. 剪切后追加
var $li3 = $('#li3');
$('#ul1').prepend($li3);
});
//3.before()
//元素A.before(元素B); 把元素B插入到元素A的前面
$('#btnBefore').click(function () {
//新建一个div标签,作为兄弟元素插入到ul1的前面
var $divNew = $('<div>我是新建的div标签</div>');
$('#ul1').before($divNew);
});
//4.after();
//元素A.after(元素B); 把元素B插入到元素A的后面
$('#btnAfter').click(function () {
//新建一个div标签,作为兄弟元素插入到ul1的后面
var $divNew = $('<div>我是蔡徐坤</div>');
$('#ul1').after($divNew);
});
//5.appendTo();
//元素B.appendTo(元素A); 把元素B作为元素A的最后一个子元素添加.
$('#btnAppendTo').click(function () {
//5.1 新建的li标签,追加到ul1中去
var $liNew = $('<li>我是新建的li标签</li>');
$liNew.appendTo($('#ul1'));
});
});
</script>
</body>
</html>
4.删除/清空节点
<script>
//清空div里面的元素
$('div').empty();
//删除某个元素
$('div').remove();
</script>
5.val()方法
val方法用于设置和获取表单元素的值,列如input,textarea的值
<input type="text" placeholder="蔡徐坤,请输入">
<script>
//设置值
$('input').val('蔡徐坤');
//获取值
$('input').val();
</script>
6.html()和text()方法
html方法相当于innerHTML text方法相当于innerText
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
7.width()和height()方法
<body>
<img src="./images/01.jpg" alt="">
<script>
//不带参数表示获取高度
$('img').height();
//带参数表示设置高度
$('img').height(200);
//获取网页的可视区宽高
//获取可视区宽
$(window).width();
//获取可视区高度
$(window).height();
</script>
</body>
8.scollTop和scrollLeft
设置或者垂直滚动条的位置
9.offset方法与position方法
off方法获取元素距离document的位置,返回值为对象,position方法获取的是元素距离有定位的父元素的位置
10.jQuery事件机制
1.on事件注册
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
2.on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",'span', function() {});
3.on注册事件的语法
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events,[selector],[data],handler);
5.事件解绑
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
6.触发事件
$(selector).click(); //触发 click事件
$(selector).trigger("click");//事件触发器trigger
7.jquery事件对象
jquery事件对象其实就是js事件对象的一个封装,处理了兼容性
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置（忽视滚动条）
//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
8.链式编程
通常情况下,只有设置操作才能把链式编程延续下去,因为获取操作的时候,会返回获取到的值,无法返回jquery对象
end()方法,筛选选择器会改变jquery对象的DOM对象,想要回复到上一次的状态.并且返回匹配元素之前的状态
9.each()方法
jquery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了
作用:遍历jquery对象集合,为每一个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
