1jQuery介绍
1.1 JavaScript库
JavaScript库,即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就在这个库中封装了很多预先定义好的函数在里面。比如动画animate、hide、show,比如获取元素等。
常见的JavaScript库:jQuery、prototype、YUI、Dojo、移动端的zepto等都是对原生JavaScript的封装,内部都是用JavaScript实现的,主要学习jQuery。
1.2jQuery的概念
是一个快速、简洁的JavaScript库,提倡写更少的代码,做更多的事情。
j是JavaScript,Query查询,就是查询JavaScript,把js的DOM操作做了封装,可以快速查询使用里面的功能。
jQuery封装了JavaScript常用功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习本质:学习调用这些函数(方法)
jQuery出现的目的是加快前段人员的开发速度,我们可以非常方便的调用和使用他,从而提高开发效率。
1.3jQuery的优点
1、轻量级。核心文件才几十Kb,不会影响页面加载速度
2、跨浏览器兼容,基本兼容了现在主流的浏览器
3、链式编程,隐式迭代
4、对事件、样式、动画支持,大大简化了DOM操作。
5、之处插件扩展开发,有丰富的第三方插件
6、免费、开源
2jQuery的基本使用
2.1jQuery的下载
jQuery的官网地址:https://jquery.com/
各个版本下载:https://code.jquery.com/
版本介绍
1X:兼容IE678等低版本浏览器,官网不再更新
2X:不兼容IE678等低版本浏览器,官网不再更新
3X:不兼容IE678等低版本浏览器,是官方主要更新维护的版本。
2.2体验jQuery
引入jQuery文件
在文档最末尾插入script标签,书写体验代码
$(‘div’).hide()可以隐藏盒子
2.3jQuery的入口函数
第一种简单易用
$(function(){
...
});
第二种:繁琐,但也可以实现
$(document).ready(function(){
...
});
总结:
1、等DOM结构渲染完毕即可执行内部代码,不必等所有外部资源加载完成,jQuery帮我们完成了封装
2、相当于原生js中的DOMContentLoaded
3、不同于原生JS中的Load事件时等页面文档,外部的Js文件,CSS文件,图片加载完毕才执行内部代码。
4、更推荐第一种。
2.4jQuery中的顶级对象$
1、$是jQuery的别称,在代码中可以使用jQuery代替,一般为了方便,通常都直接使用 $
2、 $ 是jQuery的顶级对象,相当于原生JavaScript中的window,把元素利用 $ 包装成jQuery对象,就可以调用jQuery的方法。
2.5jQuery对象和DOM对象
1、用原生js获取来的对象就是DOM对象
2、用jQuery方法获取的元素就是jQuery对象。
3、jQuery对象本质是:利用 $ 对DOM对象包装后产生的对象(伪数组形式存储)。
2.6jQuery对象和DOM对象转换
<div></div>
<span></span>
<script>
//dom对象-->jQuery对象
let div = document.querySelector('div')
$(div).hide()
//jQuery对象-->dom对象
//第一种方式
$('div')[0].style.display = 'none'
console.log($('div')[0])
// 第二种方式
$('div').get(0).style.display = 'none'
</script>
3jQuery选择器
jQuery给元素做了封装,是获取元素统一标准:
3.1基础选择器
3.2层级选择器
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function(){
console.log($('.nav'))
console.log($('body > li'))
console.log($('body li'))
})
</script>
3.3筛选选择器
另:jQuery中还有一些筛选方法,类似DOM中的通过一个节点找另外一个节点,父、子、兄以外有所加强。
3.4知识铺垫
jQuery设置样式
$('div').css('属性', '值')
jQuery 里面的排他思想
// 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
-隐式迭代
// 遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
// 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏,不用循环操作
链式编程
// 链式编程是为了节省代码量,看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
4jQuery样式操作
jQuery常用两种样式操作:CSS()和设置类样式方法
4.1方法一:操作CSS
// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');
// 2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"})
4.2方法二:设置类样式方法
作用等同与以前的classList,可以操作类样式。注意操作类里面的参数不要加点。
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");