(17)什么是jQuery(jq的流程和基本操作)
jQuery就是对原生js二次封装的工具类(在jq叫构造函数)
jQuery就是一堆方法的集合,jq对象就可以直接调用这些方法来完成指定的需求
使用jq的流程:
1、在HTML页面倒入jq.js文件
2、获取唯一jq对象
3、通过该对象完成具体的事
jq的使用
jq的官网:https://jquery.com/
下载安装:点击这个下载
(production是生产者版本是看不到源码的,已经打包好的)
(development是开发者版本可以看到源码,)
如何下载jq
1、新建一个文件夹 Directory(自己名命名)
2、新建一个javaScript文件,使用开发者版本,点击开发者版本后复制源码,黏贴入这个jq.js文件内 / 使用生产者版本,点开生产者版本后复制源码,黏贴入jq.min.js文件内(命名的时候min表示压缩版本,就是生产者版本)
PS:压缩版本只有两行,第一行是基本信息,第二行是所有的压缩代码,不能手动去修改,必须通过指定的工具去处理
PS:查看源码,为什么源码中都是window.jQuery, 因为window就是顶级对象(和python中类中的object一样),是代表浏览器打开的整个窗口,也是浏览器自身,所有人都属于window所以window可以省略
PS: $ 就代表jQuery,为什么能代表jQuery,因为本质上$在底层源码中就是window.$,
PS:唯一的jQuery对象我们就是 $ 来表示
jq的基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq初识</title>
</head>
<body>
<div class="box">box</div>
<div class="box">box1</div>
</body>
<!--1、页面中导入jq-->
<script src="js/jq.js"></script>
<script>
//在jQuery中通过选择器获取标签的值
console.log($('.box')); //这里获取到的是jQuery对象
//获取到的值保存下来,放入一个变量
var $box = $('.box');
console.log('这里是保存好的jq对象',$box);
//PS:有时候可以看到var $box = $('.box),创建变量名的前面加$就表示这个变量属兔jQ变量,通常都喜欢在变量名前加$
var box = document.querySelector('.box'); //这个属于js对象,使用js方法
//js与jq对象相互转换
//jq转成js,通过数组的索引来转换,js转成jq,将js对象用$包裹起来
console.log(box,$(box),$(box)[0]); //第一个是js对象,第二个是jq对象,第三个通过索引取值后jq对象变成了js对象
//$box 存放着页面两个box的jq对象,如何获取第一个box对应的jq对象
console.log('这里查看',$box.eq(0)); //通过eq(index)索引的方式获得的还是jq对象
//通过对象完成具体的业务逻辑,比如点击事件,而且区分标签
// .box代表页面中所有的类名为box的标签,这些标签全部拥有点击弹窗
$box.click(function () {
alert($(this).index()) //this代表的是自己的js对象 => $(this) 当前被点击的对象
})
</script>
</html>