jQuery入门
一、jQuery的简介
- jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
二、jQuery的使用
1.jQuery的引用
<!-- 只有引入js文件才能实现jQuery的功能,否则功能无效 -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
// 如果能弹出东西说明jQuery引入成功
alert($);
</script>
之所以要引用这个文件,是因为jQuery是建立在JavaScript基础之上运行起来的,它有它自己独特的功能,这也是JavaScript实现不了的,所以需要导入相关文件才能运行
2.jQuery和原生JavaScript的区别
用一个程序来先看看jQuery和JavaScript有什么区别
<!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>03-jQuery和原生js对比</title>
<script>
// 浏览器加载完成
window.onload = function () {
var oDiv = document.getElementById('box');
oDiv.style.color = 'red';
// 原生js只能获取到标签的行内式样式属性的值
alert(oDiv.style.fontSize + 'js获取');
}
</script>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
// 获取id为box的标签对象
var $div=$('#box');
alert($div.css('fontSize')+'jQuery获取');
})
</script>
</head>
<body>
<div id="box">div标签</div>
</body>
</html>
从结果可以发现,在我们没有设置div标签内的innerHTmL的字体大小时,正常情况下它会自动继承父类字体16px,但是结果发现,使用原生JS并不能获得这个结果,而使用jQuery却能获得字体的大小,这就是jq与JS的最大不同之处,即原生JS只能获取到行内式里面设置的属性值(对于嵌入式、外链式的写法本质上都是在对行内式的属性在进行操作,所以JS的三种写法本质是一样的),而强大的jQuery不管是标签的什么属性,不管是行内式设置的属性还是用户未设置而从父类继承的属性,它都是可以获取到并且进行修改的。还有就是jQuery的程序会比JS的程序先执行,因为JS是等待网页结构、图片地址、外链等加载完成之后才会去执行的,而jQuery只需要等到网页结构加载完成就可以执行了,所以执行在前面。
另外我们来对比一下jQuery和JavaScript在编程上的写法有何不同:
jQuery | JavaScript |
$(function(){函数体}) | window.load=function(){函数体} |
获取标签对象 var $box=$(‘jq选择器’); | var oBox=document.GetElementById('id名'); (oBox就是js对象) |
操作样式 $box,css();可以设置/获取样式属性 | oBox。style.属性 |
JS对象转换为jq对象
$(JS对象).css(); 这样就将JS对象转换成了jq对象并且可以操作css了
3.jquery操作css
上面已经说过,jQuery不仅可以获取标签属性值,而且还可以设置标签属性的值,请参照下面的程序:
<!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>04-jQuery操作CSS属性</title>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
// 获取jq对象
var $div=$('#box');
// 设置样式属性
$div.css({'width':'200px',
'height':'200px',
'backgroundColor':'gold',
'color':'red'});
// 获取属性值
alert($div.css('fontSize'));
})
</script>
</head>
<body>
<div id="box">div标签</div>
</body>
</html>
在$div.css()中,如果要设置属性值就写成字典的格式(键值对),如果要获取就直接引号引起来即可获取
其实,在jQuery中属性名的写法更为的灵活,既可以用css中的格式,也可以用JS中的格式,可以根据个人习惯进行选取。
4.jQuery的选择器
(1),标签选择器
// 标签选择器直接选取标签,会选取到所有的目标标签
var $div=$('div');
$div.css({'backgroundColor':'gold'});
(2),id选择器
// id选择器
var $box4=$('#box4');
$box4.css({'backgroundColor':'red'});
(3),类选择器
// 类选择器
var $box1=$('.box1');
$box1.css({'color':'gold'});
(4),层级后代选择器
// 层级后代选择器
var $div=$('.cn .bx1');
$div.css({'color':'red'});
(5),组选择器
// 组选择器
var $group=$('.box1,.ox2'); $group.css({'backgroundColor':'red'});
(6),属性选择器
6.属性选择器
var $div = $('div[class$=1]'); // *= 表示类名里只要包含 ^= 开头是否包含 $= 结束包含
$div.css({'color':'green'});
5、jQuery选择集过滤
<script>
$(function () {
// 获取内部嵌套有p标签的div标签对象
var $divs=$('div');
// $divs.has('.p1').css({'backgroundColor':'red'});
// $divs.has('p').css({'backgroundColor':'red'});
//选择类名不是.box的div标签
// $divs.not('.box').css({'backgroundColor':'gold'});
// 获取返回的对象数组中索引为1的div对象
$divs.eq(1).css({'backgroundColor':'gold'});
// 获取标签名为li的标签
var $Lis=$('li');
//通过角标的方式去找指定的标签,和嵌套层无关,都是从零开始 即使不在一个ul标签里,
// 但是获取标签对象返回的是一个包含对象的数组 所以无关嵌套的问题
//角标只会从返回的数组中检索
$Lis.eq(8).css({'color':'red'});
})
</script>
6、jQuery的转移
(1)、prev()转移到跟自己平级的上面一个标签,即只比自己大的兄弟
(2)、prevAll()转移到跟自己平级的上面所有的标签,即找所有比自己大的兄弟
(3)、next()转移到跟自己平级的下一个标签
(4)、nextAll()转移到跟自己平级的下面所有的标签
(5)、siblings()转移到除了自己而且跟自己平级的所有标签上
(6)、children()转移到自己的直接子级上,不会转移到孙子及后代,即不会转移到直接子级里面的子级
(7)、find()查找后代 不管是直接自己还是子级的子级,只要是在这个子级里面都会被查找到
(8)、parent() 查找自己的直接父级 即自己的亲爸
(9)、parents()查找自己所有的长辈 即找祖宗十八代
<!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>07-选择器的转移</title>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var $div3 = $('.box3');
// $div3.css({'color':'red'});
// 1.prev previous 选中平级 上面的一个标签
// $div3.prev().css({'color':'red'});
// 2.prevAll 选中平级兄弟 上面的所有标签
// $div3.prevAll().css({'color':'red'});
// 3.next 选中平级兄弟 下面的一个标签
// $div3.next().css({'color':'red'});
// 4.nextAll 选中平级兄弟 下面的所有标签
// $div3.nextAll().css({'color':'red'});
// 5.siblings 选中除了自己以为的所有平级兄弟
// $div3.siblings().css({'color':'red'});
// 6.children() 选中所有直接子级,不会找到孙子及后代
// $div3.children().css({'color':'red'});
// 7.find() 查找后代
// $div3.find('a').css({'color':'red'});
// 8. parent 转移到自己的直接父级
// $('p').parent().css({'color':'red'});
// $('p').parents() 找该对象的祖宗们,集
})
</script>
</head>
<body>
<div class="con">div容器
<div>div1标签</div>
<div>div2标签</div>
<div class="box3">div3标签
<p>p标签</p>
<span>
<a href="#">a标签</a>
</span>
</div>
<div>div4标签</div>
<div>div5标签</div>
</div>
</body>
</html>
7、jQuery判断选择器是否选择到了标签
使用length()
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var $lis = $('lia');
// 如果length为0说明没有选择到标签
alert($lis.length);
})
</script>
8、jQuery中的事件
在原生JavaScript中事件的定义都是通过特定的写法,如:obtn.onclick=function(){执行代码};
而在jQuery中,写法会有些不同,如: $btn.click(function(){执行代码}); 在这里把click()看做一个方法,然后把匿名函数放在方法里面执行代码
由于jQuery中获取标签对象返回的是包含标签对象的数组,那么当触发事件的时候,如果不限制执行事件的对象,那么每次触发事件数组里面的所有对象都会去执行事件代码,因此就要用到this来限制当前是哪个对象要执行事件代码,这样就不会产生所有对象都去执行事件代码的现象。比如,给所有按钮增加点击事件,如果点击其中任意一个按钮,而不限制执行事代码的对象,那么其他所有的按钮都会执行事件代码,使用this可以定位到当前是谁在被点击,即能定位到正确的活动对象
<!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>09-jQuery中的事件</title>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var $btn = $('.input');
console.log($btn);
// 原生js写法
/* obtn.onclick = function () {
执行代码
} */
$btn.click(function () {
alert('这是jQuery写法!');
})
var $lis = $('li');
// this 在事件中 它表示谁触发的事件就表示谁 默认是js对象
// 把js对象转成jQuery中的对象 用$() 包装就可以
$lis.click(function () {
$(this).css({'color':'red'});
// index() 从每一个嵌套关系中 都是从0开始 与eq不一样index只是返回当前对象在父标签中是第几个
// index() 获取当前标签在它的直接父级中它是第几个儿子 从0开始
alert($(this).index());
// $lis.eq($(this).index()+8).css({'color':'red'});
})
})
</script>
</head>
<body>
<input type="button" value="按钮" class="input">
<ul class="list">
<li>li标签1</li>
<li>li标签2</li>
<li>li标签3</li>
<li>li标签4</li>
<li>li标签5</li>
<li>li标签6</li>
<li>li标签7</li>
<li>li标签8</li>
</ul>
<ul class="list">
<li>li标签1</li>
<li>li标签2</li>
<li>li标签3</li>
<li>li标签4</li>
<li>li标签5</li>
<li>li标签6</li>
<li>li标签7</li>
<li>li标签8</li>
</ul>
</body>
</html>
在这里还是要在此强调一下eq和index的区别:
eq是在选择集过滤中使用的,它的所以不依赖与对象原先存在的关系中,而是在数组中重新整合出来的新索引,从零开始
而index是表明当前活动的对象是在自己原先存在的父子关系中的序号,序号从零开始,并不是在返回的包含对象的数组中的序号。
9、jQuery操作标签的类名
(1)、给标签增加类名,不会覆盖原来存在的类名
标签对象.addClass('类名');
(2)、删除标签中的类
标签对象.removeClass('类名');
(3)、如果有此类名就删除,没有就添加
标签对象.toggleClass('类名');
<script>
$(function () {
var $div = $('div');
// 给标签添加类 不覆盖原有类名
// $div.addClass('box');
// 删除标签中的类
// $div.removeClass('con');
// 如果已经有此类就删除,如果没有 就添加
$div.toggleClass('box');
})
</script>