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后面一个括号,再一个花括号,结束!
 

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

  1. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  2. Egret入门学习日记 --- 第十九篇(书中 8.8~8.10 节 内容)

    第十九篇(书中 8.8~8.10 节 内容) 开始 8.8节. 重点: 1.类型推断. 2.类型强制转换,使其拥有代码提示功能. 3.除了TS自带的类型判断,Egret官方也提供了类型判断的方法. 操 ...

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

    Python之路[第十九篇]:爬虫   网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...

  4. Android UI开发第三十九篇——Tab界面实现汇总及比较

    Tab布局是iOS的经典布局,Android应用中也有大量应用,前面也写过Android中TAb的实现,<Android UI开发第十八篇——ActivityGroup实现tab功能>.这 ...

  5. jquery 初步学习

    首先 jQuery是一个轻量级的 JS框架,核心文件才几十KB 1. jquery 对象 var $variable=jquery对象 var variable = DOM对象 $variable[0 ...

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

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

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

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

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

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  9. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

随机推荐

  1. java实现几种常用排序:选择排序

    一.选择排序介绍 选择排序,顾名思义就是用逐个选择的方式来进行排序,逐个选择出数组中的最大(或最小)的元素,直到选择至最后一个元素.此时数组完成了排序. 二.选择排序原理分析 三.选择排序代码实现 / ...

  2. js 执行总结1

    一. function sayHi() { let x; let y; try { throw new Error(); } catch (x) { // 局部 x = 1; console.log( ...

  3. Dropdown 下拉菜单

    将动作或菜单折叠到下拉菜单中. 基础用法 移动到下拉菜单上,展开更多操作. 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.默认情况下,下拉按钮只要ho ...

  4. SQL学习(六)select into:复制表信息

    在实际工作中,可能需要将一个表中的数据复制到另一个表中,以供后续使用.此时可以用关键字select into(在MySQL中不支持select into,可使用insert into...select ...

  5. java源码-HashMap源码分析

    这次开始分析JDK8中的HashMap源码. 首先理解HashMap中几个关键变量, TREEIFY_THRESHOLD  链表转换红黑树扩容值 table 数组+链表+红黑树  size 当前存储数 ...

  6. 进程,虚拟环境,Mysql主从

    进程 查看进程 ps(类似windows任务管理器) man 1 ps # 查看命令文档 ps[options] 1 UNIX options, which may be grouped and mu ...

  7. CentOS7 执行yum 命令出错

    http://blog.csdn.net/weicuidi/article/details/52935100 https://www.cnblogs.com/pqchao/p/6428947.html

  8. webrtc实现点对点视频通讯

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. flask 之(四) --- 扩展|缓存|会话

    扩展 蓝图内置扩展 (实现的是路由的拆分) '''----------- app.py -------------''' from flask import Flask from users_view ...

  10. cisco RIP(传闻协议)Routing information protocol

    Corp(config)#rout rip Corp(config-router)#network 10.0.0.0 10.0.0.0/24 is subnetted, 5 subnets C 10. ...