2天学会jQuery(day1)

2天学会jQuery(day1)

如果你已经学习过JS，那么jQuery这个JS库十分易学，从了解到熟练使用只需要很短的时间
如果你没有学习过JS，也不重要，jQuery也能上手，因为jQuery在某些程度上可以直接替代JS了
这个内容分两次更新，如果有错误和语义不明确的地方，欢迎评论指出，你的点赞和收藏是对作者原创的最好支持

首先我们来认识一下我们常说的jQuery到底是什么？

jQuery就是JavaScript库(library)，其中“j”就代表的是JavaScript，“Query”就是查询。
jQuery的宗旨就是“write less,do more(写的少，做的多)”。

jQuery能干嘛？

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX
  总之，一句话总结就是，一般js能做到的jQuery都能做到，而且更加简单的实现

优点？

• 轻量级
• 跨浏览器兼容
• 链式编程，隐式迭代
• 对事件，样式，动画支持，大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三方插件。例如：树形菜单，日期控件，轮播图等
• 免费，开源

我们使用jQuery一定要注意版本的选择

• 1x:兼容IE678等低版本浏览器，官网不再更新
• 2x:不兼容IE678等低版本浏览器，官网不再更新
• 3x:不兼容IE678等低版本浏览器，是官方主要更新维护的版本

同时还要注意一点，在下载的链接中，带有production的是生产环境版本，带有development的是开发版本

开始使用jQuery

安装

1. 从jQuery.com下载jQuery库(搜索一下jQuery网上到处都能下载)
2. 从CDN中载入jQuery: <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js”>（来源bootcdn）

入口函数

	$(function(){
		//此处是页面DOM加载完成的入口
	})
	
	$(document).ready(function(){
		//此处是页面DOM加载完成的入口
	})

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕。
2. 相当于原生js中的DOMContentLoaded事件。
3. 不同于原生js中的load事件是等页面文档、外部css，图片加载完毕后才执行内部代码。

jQuery顶级对象 “$”

在jQuery中我们获取元素，一般就是 $(“选择器”);如：$(“div”)，可以选取到所有的div元素；$(".abc")，可以选取到所有class为abc的元素；$(“ul li”)，可以选取到ul 里面的所有li元素。就和我们之前选择元素一样。
$是jQuery的别称

 $(function(){
 })
 等同于
 jQuery(function(){
 })

jQuery对象和DOM对象

jQuery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行了包装。

//我们获取div元素
 <div></div>
 <script>
     var div = $("div");
     console.log(div);
 </script>

最后输出的是一个对象

DOM对象：用原生JS获取过来的DOM对象

<div></div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        console.log(div);
    </script>

最后输出的是DOM元素

这意味着jQuery对象只能使用jQuery方法，DOM对象则只能使用原生JavaScript属性和方法
比如

 document.getElementsByTagName("div")[0].style.dispaly = "none"; //正确
 $("div").style.diaplay = "none";//报错

DOM对象和jQuery对象的相互转化

1.DOM对象转化为jQuery对象

1. 我们直接获取元素，得到的就是jQuery对象
   $(“div”)
2. 我们已经使用原生的js获取过来的对象
   var myvideo = document.querySelector(‘video’);
   $(myvideo)

2.jQuery对象转换为DOM对象(jQuery对象是一个伪数组(类数组))

1. $(“div”)[index] index是索引号
2. $(“div”).get(index) index是索引号

如$(“div”)[0]后面就可以直接使用原生的js方法了$(“div”)[0].style.display = “none”;

jQuery隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们操作，方便我们调用。

$("div").css("background","pink");

如果我们页面中有4个div元素，那么4个div元素背景颜色都会设置成pink色

jQuery选择器

jQuery筛选选择器

小知识点：只有CSS中索引号是从1开始的

选择方法

parents()返回指定的祖先元素

jQuery样式操作

jQuery可以使用CSS方法来修改简单的元素样式；也可以操作类，修改多个样式
等同于JavaScript中的style

1.操作CSS方法

• 参数只写属性名，则是返回属性值

$('div').css('width')//返回200px，一个属性字符串

• 设置一组样式，参数是属性名，属性值，逗号分隔，属性必须加引号

$('div').css('width','300px');//设置div的width为300px
//值如果是数字可以不用跟单位和引号。
$('div').css('width',300);

• 设置多组样式，参数是对象形式，属性名和属性值用冒号隔开，属性可以不用加引号

$('div').css({
'color':'pink',
'font-size':'12px'
});

2.设置类样式方法

针对指定的类操作样式
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1. 添加类 addClass()

$(this).addClass("current");

addClass追加类名，不会影响已存在的类名

2. 删除类 removeClass()

$(this).removeClass('current');

如果指定删除的元素中没有指定的类名也不会报错
3. 切换类 toggleClass()

$('this').toggleClass('current');

一句话，有就删除，没有就添加，很适合做一些动画效果

jQuery属性操作

1. prop()
   一般用来设置元素的固有属性，所谓固有属性就是元素本身自带的属性，比如a标签里面的href，target，class

获取固有属性

$('a').prop('href');//url

prop()函数的结果：

1. 如果有相应的属性，返回指定的属性值
2. 如果没有相应的属性，返回值是空字符串

获取自定义属性

$('a').prop('data-index');//返回undefined

设置固有属性

$('div').prop('title', '大家好')
console.log($('div').prop('title')); //大家好

设置自定义属性

$('div').prop('data-index', '大家好')
console.log($('div').prop('data-index')); //大家好

这里注意一点，如果使用prop设置自定义属性，在DOM元素中是不可见，但是可以用prop获取到，无法用attr获取到

2. attr()
   一般用来获取和设置自定义属性，attr()是包含prop()的，既可以设置、获取固有属性，又可以设置、获取自定义属性

获取

$('div').attr('class');

attr()函数的结果：

1. 如果有相应的属性，返回指定的属性值
2. 如果没有相应的属性，返回的是undefined

设置

$('div').attr('class','current');

3. 注意点
   attr()和prop()里面的参数都可以是一个对象，这样设置多组属性

$(this).attr({"class":"current","name":"abc"});

具有true和false两个属性，如checked,selected或者是disabled，使用prop()

//例子
<input type='checkbox' checked = 'true' />
$('input').prop('checked');//true
$('input').attr('checked');//不管checked等于什么都返回checked

数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会改变DOM元素结构。一旦页面刷新，之前存放的数据将被移除。
1.附加数据
data(‘name’,‘value’)//向被选元素附加数据

$('span').data('uname','yancy');

向span这个元素上添加uname这个数据，并不会像prop()，attr()添加的属性一样在DOM中可见，而是放在内存里面，当做一个变量来看。

<div></div>
<span></span>
$('div').attr('uname','yancy');
$('span').data('uname','yancy');

在DOM中显示的结果为

2.获取数据语法
data(‘name’)//向被选元素获取数据

同时还可以读取HTML5自定义属性，如data-index，不用写data-

 $("div").attr('data-uname', 'yancy');
 console.log($('div').data('uname'));//yancy

就到这里了，欢迎各位大咖进行指点！！！

如果你还没有学过瘾，请直接进入2天学会jQuery(day2)，请移步文章链接