2天学会jQuery(day1)

时间:2020-7-31 作者:admin


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>

最后输出的是一个对象
2天学会jQuery(day1)

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

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

最后输出的是DOM元素
2天学会jQuery(day1)
这意味着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筛选选择器

2天学会jQuery(day1)
小知识点:只有CSS中索引号是从1开始的

选择方法

2天学会jQuery(day1)
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追加类名,不会影响已存在的类名

  1. 删除类 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获取到

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

获取

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

attr()函数的结果:

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

设置

$('div').attr('class','current');
  1. 注意点
    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天学会jQuery(day1)
2.获取数据语法
data(‘name’)//向被选元素获取数据

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

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

2天学会jQuery(day1)

2天学会jQuery(day1)

就到这里了,欢迎各位大咖进行指点!!!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。