jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用

时间:2021-02-20 18:00:20

导读:jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用约有1412个文字,预计阅读时间1分钟以上。内容由生活百科整理编辑,关键词是jq判断是否隐藏,jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用;主要讲解的内容是无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。hide(sp...的相关信息,具体详情请阅读下文。

01第一节:jQuery入门

jQuery是对#JavaScript#进行封装的一个工具集,比起JavaScript更容易操作,将一些复杂的操作封装成一个简单的函数,这样对于JS开发者来说,无疑是一件幸福的事。

jq判断是否隐藏 jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用jQuery操作Html元素

jQuery的基本语法与JavaScript基本上保持一致,这样对于熟悉JavaScript的开发人员,可以轻松的过度到jQuery的开发。

jQuery工具强大的功能是对DOM的选取和操作。

开始学习jQuery之前,应该具备如下技术:HTML、CSS、JavaScript

02第二节:jQuery特点

jQuery 其实就是一个已封装好的JavaScript函数库,JavaScript是散装的,而jQuery是集装箱。

jQuery工具集功能强大,核心的操作如下:

快速有效的对HTML元素进行选取,任何深层次的元素都可以被查找到。针对HTML元素相关的属性,提供了快捷更简洁的操作函数。对于Html标记样式的操作,jQuery也是封装了一大堆的CSS函数。在JavaScript中,处理事件很麻烦,需要编写一堆的代码才可实现,而在jQuery中,使用事件函数简单而高效。jQuery还封装了一些简单的动画特效,让Html元素可以动起来。jQuery最擅长且最常用的功能还是对HTML DOM的遍历和修改,DOM操作一直都是JS的核心应用。JavaScript原生是支持AJAX无刷新技术的,但是使用起来太复杂,难用。而在jQuery中,对AJAX相关的代码高度封装,让AJAX变的简单多了。

03第三节:添加jQuery

一般情况下,jQuery.js都会提供两个版本,一个是min版本,是压缩过的,用于发布的应用程序,还有一个未压缩过的,不带min版本,用于开发过程中的应用程序,便于调试使用。

可以通过下面的标记把jQuery添加到网页的标记中:

当然,也可以将jQuery添加到标记内:

如果有开放的CDN,也是可以引用的,微软和Google都提供了免费的CDN地址,我们不用将jQuery文件下载到本地,直接引用互联网上的jQuery文件。

04第四节:jQuery语法

4.1. 基本概念

通过jQuery函数,我们可以轻松的做到选取HTML元素,并对Html元素执行各种操作。

jQuery使用起来非常简单,其基本语法如下:

$(selector).action()

使用美元符号$定义jQuery,一看到$就知道这是jQuery中的函数。(selector)括号中的selector表示选择器,是封装好的查找Html元素的函数。action()表示对Html元素开始执行相关的操作,也是封装好的。jQuery提供全套的Html元素操作,因此,在Html前端操作中,得到了大批量的JS开发者的喜欢。

4.2. 隐藏当前元素

使用jQuery函数可以容易的操作HTML元素,如果要隐藏HTML元素,则只需要使用jQuery的hide()方法即可,Jquery代码如下:

你好

在此jQuery代码中,首先查找到要隐藏的HTML元素,然后使用$(element).hide()方法隐藏element元素。

运行一下效果:

jq判断是否隐藏 jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用

上图是第一次运行出来的结果,jQuery代码还没有运行,现在点击一下“隐藏”按钮。如下图所示:

jq判断是否隐藏 jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用

此时,在页面上,“你好”文本信息已经被隐藏掉了,页面上是看不到了。

在上面的代码中,我们还是使用JavaScript代码的getElementById根据元素的id属性值来获取HTML元素。

其实在jQuery中,还有更简单的方法根据元素的id属性值获取HTML元素:

在此代码中,使用了$(“#div1”)来获取Html元素,与getElementById(“div1”)等效,但从代码量上看,jQuery代码量更少且清析明了。

4.3. 文档就绪函数

有时候,我们在Html页面中,需要等待页面所有Html内容加载完成之后,再执行JS代码,此时,jQuery提供了一个名称为文档就绪的函数,可以很容易的解决此问题。

JS代码如下:

如下案例代码:

使用jQuery的ready()方法可以在HTML文档完全加载之后再运行其中的代码,这样可以防止查找不存在的元素。

jq判断是否隐藏 jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用

在jQuery中,$(document).ready(function () {})可以省略为:

$().ready(function(){})$(function(){});从代码量上看,第2种更少,值得推荐使用。

通过上面的jQuery代码的使用上看,jQuery让JS代码变的更加简单,且代码量更少,使得整体上,JS代码更容易开发和维护。

以上就是由生活百科jq判断是否隐藏整理的“jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用”的相关信息了。除特别注明外,本站所有内容均为生活百科整理排版。更多精彩内容可持续关注生活百科频道!转载请注明出处:jQuery的基本概念、基本语法、隐藏当前Html元素和就绪函数的使用:http://www.zenmele.net/article/31490.html

   

相关文章

好啊来啊 好运来临 好啊好啊 旱地忽律 哈弗H9 富时罗素 弗吉尼亚 福田奥铃 佛罗里达 凤凰资讯 凤凰直播 凤凰新闻 凤凰卫视 风云岁月 俄勒冈州 俄亥俄州

所有文章未经授权禁止转载、摘编、复制或建立镜像,如有违反,追究法律责任。举报邮箱:81156344@qq.com

Copyright © 2019-2030 生活百科网 版权所有

最新更新| 网站地图