第十九篇 jQuery初步学习

jQuery 初步学习

jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通常是:div.style.display="none/block"这一类,即为显示或者隐藏,而jQuery,它里面做了处理,我们直接这样:$("div").hide() 隐藏,$("div").show() 显示,它在js里就处理了hide和show两个函数,我们调用即可直接实现JS的功能。

同学们要注意,jQuery,第二个Q才是大写,其他都是小写,别认错,读错咯!

这里要说一下,初学的同学,会觉得jQuery很打脑壳,但是用着用着,你会发现,jQuery比JS好用太多了,压根不想再用JS,因为jQuery出现的本身,就是提高我们的代码效率,方便使用,方便学习。

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

以上是引用w3c教程的介绍。

那么同学们光看文字介绍,简介是不懂,我们来看代码,用jQuery实现一下小功能:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 初步学习</title>
    <!--引用jQuery脚本,否则无法使用jQuery编程-->
    <script src="../js/jquery-1.12.2.min.js"></script>
</head>
<body>
<div>我是第一个div,单击我,我就隐藏</div>
<div>我是第2个div,单击我,我就隐藏</div>
<div>我是第三个div,单击我,我就隐藏</div>

<p>我是p标签,单击我,显示所有div</p>

<h3 id="myp">点击我,弹出一个介绍框</h3>
<script>
    //jQuery的事件,都不需要on开头了,就是说原本JS实现onclick,这里的jQuery不需要on,有on就是错误的
    //jQuery的关键,用$符号开头,然后找到对应的元素,ID,class,来进行操作,这里我们找的是元素
    $("div").click(function (){
        $(this).hide();
        //this是本身的意思,就是说,
        //这里三个div,当我鼠标指向一个div的时候,我只会操作这个div
        //而不会影响到其他的div元素,this可以很方便的控制多个元素和class,ID就不需要了,因为它是唯一的
    });
    //这里的意思是,我点击p元素,则显示所有的div元素
    $("p").click(function(){
       $("div").show();
        //show()函数,即为显示,hide()函数,则是隐藏。
    });
    //指向ID,则需要在前面加一个# ,指向class前面加一个 . 就跟css是一样的
    $("#myp").click(function(){
        alert(‘嗨,同学们好,我是jQuery‘);
    });
</script>
</body>
</html>

没有jQuery脚本的同学,去网上下载哦。

以上难点,在于jQuery的点击事件 click,首先它处理了on开头,其次,有一个关键的地方,老师不知道如何解释,就用自己的话,比较抽象的告诉大家:click后面还跟了一个括号,括号里跟的是function关键字,随后再是一个括号加一个花括号,$("#myp").click(function () {执行代码操作....})

因为click只是一个点击事件,它不是函数,所以jQuery处理了,在它的后面加一个括号,再其里面加一个function关键字,大家都知道function关键是定义一个函数的,一个函数的组成是function关键字 加一个函数名 再加一个括号和花括号组成,即为:function a(){执行代码操作} ,但是这里jQuery的事件操作,是不需要函数名的,所以就成了上面的。

很多同学看着迷糊,老师在这里就再单独的写一次,jQuery的事件并运行函数:$("div").click(function (){执行代码})

注意里面的括号,click后面一个括号,function后面一个括号,再一个花括号,结束!

时间: 2024-10-05 03:32:21

第十九篇 jQuery初步学习的相关文章

第二十篇 jQuery 初步学习2

jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言,我们要遵守它的规则,文本的后缀得是html,里面的编写格式当然也要遵守它的规则. 如果有同学没有好的编辑器,写代码很打脑壳,记不住单词等等,老师推荐一个编辑工具:WebStorm .老师用的就是这个来写的前端,版本用的是8.0.3,还是挺好用的. 上节课我们初步学习了jQuery,那么这节课,我们再深入了解

Python之路【第十九篇】:爬虫

Python之路[第十九篇]:爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕虫. Requests Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务. import

第十九篇:USB Audio/Video Class设备协议

在Spring 3 中,对表单提交的校验方式比较常见的有两种 (1)基于注解:对于简单的属性校验,例如,长度,非空等,可以使用Spring,或是Hibernate自带的校验注解 (2)自定义校验类:对于复杂的业务校验可以自定义校验类,该类继承自org.springframework.validation.Validator (3)前台JS校验 增加表单校验功能大概分一下几个步骤 定义校验规则 基于注解的验证 只需要在相关的实体字段上添加校验注解即可,下面的例子基于hibernate的校验标签 i

Python开发【第十九篇】:Python操作MySQL

Python开发[第十九篇]:Python操作MySQL 本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 下载安装 ? 1 pip3 install pymysql 使用操作 1.执行SQL + ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为"移动",使用"移动"还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师,但我不认识所有学生,只认识上学期教过的几位同学.比如小明.我们再用一小串代码来作解释: <body> <span id="ming">我是小明</span> <span>我坐在小明后面,我叫李四</sp

第二十四篇 jQuery 学习6 删除元素

jQuery 学习6 删除元素 上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 以上引用w3c教程 为了同学们更好的扩展,老师就不在上节课的基础上模拟删除,而是写出删除的功能代码和注意事项,同学们就自己多尝试,来瞧瞧代码先: <!DOCTYPE html> <html>

第二十五篇 jQuery 学习7 获取并设置 CSS 类

jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态页面.那么动态,我们基于静态的特征说,动态:刷新页面之后,还可以发生样式改变等,就为动态. 这节课我们学习的是jQuery控制css,那么css样式都被改变了,算动态么?当然算啦,刷新页面之后发生了改变,就已经不是静态了,只要是变动了,就算是啦. 我们这节课学习四个控制css的方法: addClass(

Android学习十九:ContentProvider初步

一.Content Provider基本概念 1.ContentProvider为存储和获取数据提供了统一的接口.ContentProvide对数据进行封装.不用关心数据存储的细节.使用表的形式来组织数据. 2.使用ContentProvider能够在不同的应用程序之间共享数据. 3.Android为常见的一些数据提供了默认的ContentProvider(包含音频.视频.图片和通讯录等). ContentProvider所提供的函数: query(),insert(),update(),del

第十九篇 Java语句中的循环介绍

大家好,相信大家都是冲着这名字来的吧,其实这只是我个人自学的一些心得,没多少高深的知识点,只适用于一些刚入门学习Java的人们随便看.好了 ,废话不多说了,下面就来说一下,今天我所学习到的新知识点吧. 其实要说今天我学到了多少 ,其实不多,就懂得了 Java中的一些循环语句,用我自己的语言来组织一下的话就是: Java中有许多的循环语句,为啥要有许多中呢,因为在不同的语句中所使用的循环语句就不一样,举个最简单的例子,日历所用的循环语句 和时间所用的循环语句就不一样了,至于为什么呢,就留给你们自己