jQuery基础样式总结

本文介绍了jQuery的基础知识,包括其轻量级、多浏览器兼容的特性,以及如何选择和引用jQuery版本。详细讲解了jQuery的加载事件、元素选择、事件处理、样式设置等核心功能,并对比了jQuery与原生JavaScript的差异,强调了jQuery在简化代码和提高效率方面的优势。
摘要由CSDN通过智能技术生成

一、 jQuery简介

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便的处理HTML Document、Events、动画、Ajax交互,能极大的简化JavaScript编程的代码量。
    二、 jQuery的使用
    使用jQuery的方式首先要下载jQuery文件,一般现在使用的jQuery版本是3.2.1。jQuery从2.0版本便不再支持IE8及以下版本,而现在最新版本更新到3.4.1。并不是版本越高就好,而要根据自己的需要选择需要的版本。
    1.引用jQuery
    将下载好的jQuery文件放到创建的js文件夹中,
    在这里插入图片描述
    然后在HTML代码界面引用jQuery文件。
    在这里插入图片描述
    注意:
    (1) 当页面加载时,HTML代码是从上往下执行,所以一般js文件不会在head标签内引用,有可能会加载js代码时页面代码还没加载出来,方法体内获取到的元素不存在而报错,所以js文件一般在body标签内的最后引用,当页面的东西都加载完成之后再加载js代码就不会报错了(当然有时候也不会,毕竟所有东西版本都在更新和优化,容错率也大大提高)。
    (2) jQuery文件一定要引用到所有有使用jQuery方法写jQuery代码文件或代码上面,根据从上到下加载,还没有加载出jQuery文件就出现了jQuery代码必然会报错。在这里插入图片描述
  3. jQuery的使用
    (1) jQuery代码不像js代码那样只能写一个window加载事件。在jQuery中可以写无数个加载事件。
    (2) jQuery的加载事件是通过一个英文状态在的“$”符号开头,然后一个英文状态下的“()”,小括号里面写document。然后点ready()方法,方法内写function(){ }
    在这里插入图片描述
    并且它还有简写形式,对比与原生js的加载事件:
    在这里插入图片描述→→ 在这里插入图片描述
    (3) 使用jQuery代码获取元素更方便:
    直接通过英文状态下的$符号,然后一个英文状态下的小括号,小括号里面以string类型写通过什么方式去获取元素(.:通过类获取;#:通过id获取等等)。
    在这里插入图片描述
    这种形式对比原生js获取元素更鲜明。
    在这里插入图片描述
    (4) 调用的函数方法也不同了:
    调用的函数使用的方法和调用函数名都被精简了,比如说点击事件。
    原生的点击事件:先获取到元素,然后点出函数onclick,通过赋值的方式写方法体。
    在这里插入图片描述
    jQuery的点击事件:先获取元素,然后点出click()方法,在方法的括号内写方法体。
    在这里插入图片描述
    (5) 设置样式
    通过js代码来改变html元素属性等方式在前端也算是一个小重点吧。
    原生js是通过一个style属性点出具体样式进行样式改变,而jQuery则是通过一个css()方法来进行样式改变。
    Js语法:改变样式的元素.style.样式名 = 改变的值;
    jQuery语法:改变样式的元素.css(样式名,改变的值);
    或者:改变样式的元素.css({样式名:改变的值, 样式名:改变的值});
    通过jQuery的方式该变属性元素的方法不仅可以单个改变,而且需要多个改变的时候就直接通过一个花括号以键值对方式传递参数,就可以一次性修改,而原生Js改变样式就需要一个一个的修改,通过jQuery就节省了很多冗余的代码。
jQuery本质上就是用javascript代码写成的各种方法的集合。但是javascript本身不是已经提供了各种各样的方法和功能了吗?为什么还要再另外写一个库出来呢?原因其实很好猜,那肯定是我们要写的这个库比javascript提供的原生方法更好用了,对吧?恩,到这里我们似乎得到了一个基本需求:写一个比原生javascript提供的方法集更好用的库。这个需求的关键在于“更好用”三个字。怎么才是“更好用”呢? 我们知道一个原则:结构、表现、行为相分离。javascript是负责其中的“行为”的。谁的行为?网页元素的行为。什么样的行为?变化。也就是说,javascript是负责使网页元素发生变化的,对不对?那么要使网页元素发生变化要怎么做呢?很简单,只需要通过两步: 确定要让哪一个网页元素发生变化。 确定要使这个元素发生什么样的变化。 从上面两个步骤我们可以总结出javascript工作的基本流程: 选取目标元素 操作目标元素实现功能(使目标元素发生变化) 根据这个基本流程,对于上面“更好用”的疑问,我们就有了一个初步的比较具体的答案了:“更好用”指的是“更好的元素选择器”和“更好的功能方法集”。好了,到了这里,我们的需求就更加清晰了: ———————————————— 版权声明:本文为CSDN博主「IAmFineAndYou」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/software0017/article/details/80317348
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值