jQuery
jQuery
jquery介绍
1、jQuery是一个轻量级的、兼容多浏览器的javaScript库。
2、jQuery使用户能够更方便的处理HTML Document、events、实现动画效果、方便地进行Ajax交互，能够极大的简化javascript编程。他的宗旨是：'Write less ,do more.'
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
- 原生DOM的写法就是写JS代码，而以后我们多数都用jQuery来写，因为jQuery的优势很多，看上面，并且查找标签的方式有很多，比原生的DOM丰富的多，很便利，还有重要的一点就是不需要考虑浏览器的兼容性，因为jQuery做到了各大浏览器兼容的功能。
jQuery引入
下载链接：jQuery官网，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
jquery对象和dom对象
jquery找到的标签对象称为--jquery对象
原生js找到的标签对象称为--do对象
dom对象只能使用dom对象的方法，不能使用jquery对象的方法
jquery对象也是，它不能使用dom对象的方法
dom对象和jquery对象的相互转换：
jquery对象转dom对象 --jquery对象[0] 示例： $('#d1')[0]
dom对象的jquery对象 -- $(dom对象)
jQuery选择器
基本选择器
jquery('#d1') --$('#d1')
基本选择器(同css)
id选择器：
$("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容
标签选择器：
$("tagName") $('div')
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName")
选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象
基本筛选器
<ul>
<li>蔡世楠</li>
<li>尤利阳</li>
<li id="l3">张雷</li>
<li>申凯琦</li>
<li id="l5">程德浩</li>
<li>罗新宇</li>
<li>曾凡星</li>
</ul>
:first --示例:$('li:fitst')//第一个
:last //最后一个
:eq(index)//索引等于index的那个元素
:even //匹配所有索引值为偶数的元素，从0开始计数
:odd //匹配所有索引值为奇数的元素，从0开始计数
:gt(index) //匹配所有大于给定索引的元素
:lt(index)//匹配所有小于给定索引值得元素
:not(元素选择器) //移除所有满足not条件的标签
:has(元素选择器)// --$('li:has(.c1)') 找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
找到的是type属性为这个值的input标签中
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性筛选器
:enabled #可用的标签
:disabled #不可用的标签
:checked #选中的input标签
:selected #选中的option标签
筛选器方法
下一个:
$('#l3').next(); 找到下一个兄弟标签
$('#l3').nextAll(); 找到下面所有的兄弟标签
$('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找，不包含它
上一个
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
儿子和兄弟元素
$('ul').children();
$('ul').children('#l3'); #找到符合后面这个选择器的儿子标签
$('#l5').siblings();
$('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签
find
$('ul').find('#l3') -- 类似于 $('ul #l3')
filter过滤
$('li').filter('#l3');
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('li').not('#l3');
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
习题训练
练习1代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定时器</title>
</head>
<body>
<input type="text" id="timer">
<button id="start">开始</button>
<button id="end">结束</button>
<script>
var timetag;
// 1 获取当前时间
function f1() {
var showTime = new Date();
var showLocaleTime = showTime.toLocaleString();
var inpEle = document.getElementById('timer');
inpEle.value = showLocaleTime;
}
// 2 把时间放进去
// 2.1 找到strat开始按钮,绑定点击事件
var startBtn = document.getElementById('start');
startBtn.onclick = function () {
//2.2 找到input标签,并将值放到input标签里面
f1();
if (timetag === undefined){
timetag = setInterval(f1,1000);
}
};
// 3 停止时间
var endBtn = document.getElementById('end');
endBtn.onclick = function () {
clearInterval(timetag);
timetag = undefined;
}
</script>
</body>
</html>
练习2代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 1 将省份的数据放到省份的下拉框里面
//1.1 找到省份下拉框
var proSelect = document.getElementById('province');
// 1.2 创建option标签
//1.3 将数据放到option标签中,并将option标签放到省份下拉框里面
for (var province in data){
var proOption = document.createElement('option');
proOption.innerText = province;
proSelect.appendChild(proOption);
}
//2 选择省份,将被选择的省份的市都放到市的那个下拉框里面
var citySelect = document.getElementById('city');
proSelect.onchange = function () {
citySelect.innerText = '';
var proText = this.options[this.selectedIndex].innerText;
var cityData = data[proText];
for (var cityindex in cityData){
var cityOption = document.createElement('option');
cityOption.innerText = cityData[cityindex];
citySelect.appendChild(cityOption);
}
}
</script>
</body>
</html>
标签操作
样式操作
样式类操作
addClass();// 添加指定的CSS类名。removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例代码 $('.c1').addClass('c2'); $('.c1').addClass('c2'); $('.c1').hasClass('c2'); $('.c1').toggleClass('c2');
css样式
原生js 标签.style.color = 'red';jquery $('.c1').css('background-color','red'); 同时设置多个css样式 $('.c1').css({'background-color':'yellow','width':'200px'})
位置操作
查看位置$('.c2').position(); //查看相对位置 {top: 20, left: 20}$('.c2').offset(); //查看距离窗口左上角的绝对位置 {top: 28, left: 28}设置位置 $('.c2').offset({'top':'20','left':'40'});
jQuery绑定点击事件的写法
原生js绑定点击事件
// $('.c1')[0].onclick = function () {
// this.style.backgroundColor = 'green';
// }
jquery绑定点击事件
$('.c1').click(function () {
$(this).css('background-color','green');
})
点击事件和滚动事件的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: green;
height: 1000px;
width: 100px;
}
.c3{
background-color: blue;
height: 1000px;
width: 100px;
}
.s1{
position: fixed;
left:20px;
bottom: 20px;
height: 40px;
width: 80px;
background-color: purple;
line-height: 40px;
text-align: center;
}
.s1 a{
color: white;
font-size: 14px;
text-decoration: none;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>
<button class="change-postion">走你</button>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1 hide">
<!--<a href="#top">返回顶部</a>-->
<span>返回顶部</span>
</span>
<script src="jquery.js"></script>
<script>
//点击事件来改变标签位置
$('.change-postion').click(function () {
$('.c1').offset({top:200,left:200});
});
//滚动事件,监听滚动距离来显示或者隐藏标签
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >=200){
$('.s1').removeClass('hide');
}else {
$('.s1').addClass('hide');
}
});
// 回到顶部,scrollTop设置值
$('.s1').click(function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
尺寸
$('.c1').height(); //content 高度
$('.c1').width(); //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border: 2px solid red;
background-color: green;
padding: 20px 30px;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery.js"></script>
</body>
</html>
文本操作
html()//取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');
值操作
获取值
input type='text'的标签--$('#username').val();
input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select --- $('#city').val();
多选select --- $('#author').val(); // ["2", "3"]
设置值
input type='text'的标签 --- $('#username').val('李杰');
input type='radio'标签 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
单选select --- $('#city').val('1'); option value='1'
多选select --- $('#author').val(['2','3'])
属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
示例:
设置单个属性
$('.c1').attr('xx','oo');
设置多个属性
$('.c1').attr({'age':'18','sex':'alex'});
查看属性
$('.c1').attr('属性名');
$('.c1').attr('xx');
删除属性
$('.c1').removeAttr('xx');
prop -- 针对的是checked\selected\disabled..
查看标签是否有checked属性,也就是是否被选中
attr $(':checked').attr('checked'); //checked -- undefined
prop $(':checked').prop('checked'); //true -- false
通过设置属性的方式来设置是否选中:
$(':radio').eq(2).prop('checked',true); true和false不能加引号
$(':radio').eq(2).prop('checked',false);
简单总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
#添加字符串照样能识别标签 *****
$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例
$('a').prependTo($('div'));
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
$('div').remove();
$('div').empty();
替换
replaceWith()
replaceAll()
示例:
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';
$('span').replaceWith(a);
$(a).replaceAll('span');
clone()克隆
<button class="btn">屠龙宝刀,点击就送!</button>
$('.btn').click(function () {
// var a = $(this).clone(); //克隆标签
var a = $(this).clone(true); //连带事件一起克隆
$(this).after(a);
})
事件
事件绑定方式
<script src="jquery.js"></script>
<script>
//方式1
// $('#d1').click(function () {
// $(this).css({'background-color':'green'});
// });
//方式2
$('#d1').on('click',function () {
$(this).css({'background-color':'green'});
})
</script>
常用事件
click 左键点击事件
//获取光标触发的事件
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'});
});
//失去光标(焦点)触发的事件
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'purple'});
});
//域内容发生改变时触发的事件
$('select').change(function () {
$('.c1').toggleClass('cc');
});
//鼠标悬浮触发的事件
// $('.c1').hover(
// //第一步:鼠标放上去
// function () {
// $(this).css({'background-color':'blue'});
// },
// //第二步,鼠标移走
// function () {
// $(this).css({'background-color':'yellow'});
// }
// )
// 鼠标悬浮 等同于hover事件
// 鼠标进入
// $('.c1').mouseenter(function () {
// $(this).css({'background-color':'blue'});
// });
// 鼠标移出
// $('.c1').mouseout(function () {
// $(this).css({'background-color':'yellow'});
// });
// $('.c2').mouseenter(function () {
// console.log('得港绿了');
// });
// 鼠标悬浮事件
// $('.c2').mouseover(function () {
// console.log('得港绿了');
// });
// mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
//键盘按下触发的事件 e\event事件对象
$(window).keydown(function (e) {
// console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件
if (e.keyCode === 37){
$('.c1').css({'background-color':'red'});
}else if(e.keyCode === 39){
$('.c1').css({'background-color':'green'});
}
else {
$('.c1').css({'background-color':'black'});
}
})
// 键盘抬起触发的事件
$(window).keyup(function (e) {
console.log(e.keyCode);
})
input事件:
22期百度:<input type="text" id="search">
<script src="jquery.js"></script>
<script>
$('#search').on('input',function () {
console.log($(this).val());
})
</script>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 200px;
}
#d2{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script src="jquery.js"></script>
<script>
$('#d1').click(function () {
alert('父级标签');
});
$('#d2').click(function () {
alert('子级标签');
});
</script>
</body>
</html>
阻止后续事件发生
$('#d1').click(function () {
alert('父级标签');
});
$('#d2').click(function (e) {
alert('子级标签');
return false;
// e.stopPropagation();
});
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<button class="c1">爱的魔力转圈圈</button>
</div>
<script src="jquery.js"></script>
<script>
// $('.c1').on('click',function () {
// alert('得港被雪飞调教了,大壮很难受!');
// var btn = document.createElement('button');
// $(btn).text('爱的魔力转圈圈');
// $(btn).addClass('c1');
// console.log(btn);
// //添加到div标签里面的后面
// $('#d1').append(btn);
//
// });
#将'button' 选择器选中的标签的点击事件委托给了$('#d1');
$('#d1').on('click','button',function () {
alert('得港被雪飞调教了,大壮很难受!');
var btn = document.createElement('button');
$(btn).text('爱的魔力转圈圈');
$(btn).addClass('c1');
console.log(btn);
console.log($(this)) //还是我们点击的那个button按钮
//添加到div标签里面的后面
$('#d1').append(btn);
});
</script>
</body>
</html>
页面载入和window.onload
1. jquery文件要在使用jquery的代码之前引入
2. js代码最好都放到body标签下面或者里面的最下面来写
3.window.onload
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
页面载入与window.onload的区别
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
// 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
// window.onload 有覆盖现象,会被后面的window.onload给重新赋值
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
</script>
<script src="xx.js"></script>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="c1"></div>
<img src="" alt="">
</body>
</html>
动画效果
each循环
循环标签对象数组
$('li').each(function(k,v){
console.log(k,v);
});
循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
console.log(k,v);
})
跳出循环 return false; 类似于break
$('li').each(function(k,v){
console.log(k,v.innerText);
if (k === 1){
return false;
}
});
跳出本次循环 return; 类似于continue
$('li').each(function(k,v){
if (k === 1){
return;
}
console.log(k,v.innerText);
});
data
给标签对象添加数据,类似于添加了全局变量
.data(key, value): 设置值
.data(key) 取值
.removeData(key) 删除值
插件(了解)
<script>
jQuery.extend({ //$.extend({})
min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通过标签对象来调用
</script>
<script>
jQuery.fn.extend({ //给任意的jQuery标签对象添加一个方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
浙公网安备 33010602011771号