当前位置: 移动技术网 > IT编程>开发语言>JavaScript > jQuery是什么?如何使用jQuery?

jQuery是什么?如何使用jQuery?

2019年03月29日  | 移动技术网IT编程  | 我要评论
jquery是什么? 1.1jquery描述(理解) --- jquery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。 j

jquery是什么?

1.1jquery描述(理解)
---
jquery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。
js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了。
animate.js(jqurey.js)是我们自己封装的库,而jquery是别人帮我们封装好的库。
----
1.2学习jquery,主要是学什么呢?
----
目前这个阶段,主要学习如何来使用jquery操作dom,其实就是学习jquery封装好的那些功能方法,这些方法叫做api(application programming interface应用程序编程接口)。
这些api的共同特点是:几乎全都是方法。所以,在使用jquery的api时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同。


1.3如何使用jquery?

1.引包
2.入口函数
3.功能实现代码(事件处理)

jquery隐式迭代简单介绍:(了解)
    隐式 对应的是 显示,隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。

1.4引包注意点(理解)

第一点:在使用jquery之前,先把jquery文件引到页面中来
如果在使用jquery之前,没有引用jquery文件,会报错:

第二点:src路径一定要写正确
如果src路径写错,也会报错:


1.5jquery入口函数与js入口函数的区别(理解)

js入口函数指的是:window.onload = function() {};

区别一:书写个数不同
js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jquery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
区别二:执行时机不同
js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jquery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:dom树加载完成后,就可以操作dom了,不用等到所有的外部资源都加载完成。

文档加载的顺序:从上往下,边解析边执行。

1.6jquery的$符号(重点)
js命名规范允许出现的字符有:数字、字母、下划线、$。
js命名规范允许作为变量命名开头的字符有:字母、下划线、$;但是,不允许以数字作为变量命名的开头。

var $ = “我是字符串”;
var $ = 123;
function $(){
alert(“我是函数$”);
}

jquery使用$符号原因:书写简洁、相对于其他字符与众不同、容易被记住。

怎么理解jquery里面的$符号:
$实际上表示的是一个函数。
$(); // 调用上面我们自定义的函数$
$(document).ready(function(){}); // 调用入口函数
$(function(){}); // 调用入口函数
$(“#btnshow”) // 获取id属性为btnshow的元素
$(“p”) // 获取所有的p元素
jquery里面的$函数,根据传入参数的不同,进行不同的调用,实现不同的功能。返回的是jquery对象

jquery这个js库,除了$之外,还提供了另外一个函数:jquery
jquery函数跟$函数的关系:jquery ===$;

1.7jquery对象和dom对象的相互转换(难点)
dom对象此处指的是:使用js操作dom返回的结果。
var btn = document.getelementbyid(“btnshow”); // btn就是一个dom对象
jquery对象此处指的是:使用jquery提供的操作dom的方法返回的结果。
jquery拿到dom对象后又对其做了封装,让其具有了jquery方法的jquery对象,说白了,就是把dom对象重新包装了一下。
(联想:手机和有手机壳的手机,手机就好比是dom对象,有手机壳的手机就好比是jquery对象)
var $btn = $(“#btnshow”); // $btn就是一个jquery对象
dom对象转换成jquery对象:
var $btn1 = $(btn); // 此时就把dom对象btn转换成了jquery对象$btn1
// $(document).ready(function(){}); // 调用入口函数
// 此处是将document这个js的dom对象,转换成了jquery对象,然后才能调用jquery提供的方法:ready

jquery对象转换成dom对象:
// 第一种方式
var btn1 = $btn[0]; // 此时就把jquery对象$btn转换成了dom对象btn1 (推荐使用此方式)
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jquery对象$btn转换成了dom对象btn2
这两种方式都要记住,使用哪一种都可以。
案例:隔行变色
案例:开关灯

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网