• 语法

$(selector).action()

selector：选择器，类似css中的选择器

比如：

  1. $('.buttons-tab a') --class为buttons-tab下的子元素a

action:执行动作，比如hide($('.content').hide())

  • 事件

$(document).ready(function(){ ... }) 或 $(function(){ ... });--文档加载完后执行

$("p").dblclick(function(){ $(this).hide(); });--p元素的点击事件

  • $(this)

当前元素的jquery对象

this表示当前元素

$(this)表示当前元素的jquery对象

<div id="test1" onclick="test(this)">click to test</div>
function test(e) {
alert(e.id); //显示test1
$(e).hide();//隐藏元素
}
不能用e.hide()，因为hide是jquery对象的方法，只有jquery对象才能调用，使用$(e)把this转成jquery对象
 
this初始值为window对象
$(this)初始值为window对象转化而来的jquery对象
 
<div id="test1" onclick="test()">click to test</div>
function test() {//两个alert的值是一个意思，都是窗口的高度
alert(window.innerHeight)
alert($(this).innerHeight());
}
 
  • 实例

jquery可以方便对查询出来的多个结果批量操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  9.     <title>Document</title>
  10.     <script>
  11.         $(function() {
  12.             $(".flex-item").click(function() {
  13.                 $(".flex-item").removeClass("sel")
  14.                 $(this).addClass("sel")
  15.             })
  16.         })
  17.     </script>
  18.     <style>
  19.         .flex-container {
  20.             display: flex;
  21.             color: white;
  22.         }
  23.  
  24.         .flex-container .flex-item {
  25.             background-color: red;
  26.             width: 100px;
  27.         }
  28.  
  29.         .flex-item.sel {
  30.             background-color: black;
  31.         }
  32.     </style>
  33.  
  34. </head>
  35.  
  36. <body style="width: 100%">
  37.  
  38.     <div class="flex-container">
  39.         <div class="flex-item sel">
  40.             1
  41.         </div>
  42.         <div class="flex-item">
  43.             2
  44.         </div>
  45.         <div class="flex-item">
  46.             3
  47.         </div>
  48.     </div>
  49.  
  50. </body>
  51.  
  52. </html>

此处$(this)代表多个查询到的元素中当前选中的元素

JQuery教程之入门基础的更多相关文章

  1. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  2. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  3. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  4. Python学习入门基础教程(learning Python)--5.6 Python读文件操作高级

    前文5.2节和5.4节分别就Python下读文件操作做了基础性讲述和提升性介绍,但是仍有些问题,比如在5.4节里涉及到一个多次读文件的问题,实际上我们还没有完全阐述完毕,下面这个图片的问题在哪呢? 问 ...

  5. Git入门基础详情教程

    前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...

  6. HBase入门基础教程之单机模式与伪分布式模式安装（转）

    原文链接:HBase入门基础教程 在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Had ...

  7. 【CC2530入门教程-01】CC2530微控制器开发入门基础

    [引言] 本系列教程就有关CC2530单片机应用入门基础的实训案例进行分析,主要包括以下6部分的内容:[1]CC2530微控制器开发入门基础.[2]通用I/O端口的输入和输出.[3]外部中断初步应用. ...

  8. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  9. HBase入门基础教程 HBase之单机模式与伪分布式模式安装

    在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Hadoop完全分布式环境,搭建Hado ...

随机推荐

  1. 阿里云Centos7.X 如何对外开放端口

    一句话:如果你是买的各大厂商的云服务器,去安全组配置对应需要使用到的端口就可以啦! 因为博主用的是阿里云,所以这里就只介绍下阿里云如何开放端口,按着下面三张图来操作就行嘞 这个时候有同学就说了,不通过 ...

  2. Asp.Net Core Identity 隐私数据保护

    前言 Asp.Net Core Identity 是 Asp.Net Core 的重要组成部分,他为 Asp.Net Core 甚至其他 .Net Core 应用程序提供了一个简单易用且易于扩展的基础 ...

  3. （转）宽字节编码类型的XSS

    今晚又看了一遍PKAV-心上的瘦子写的xss腾讯系列的例子,收获挺大的,其中对宽字节注入有了更深的了解,又查找了一些相关的资料,整理一下,以备以后查阅 参考文档: http://book.2cto.c ...

  4. octave在win上和linux上配置syms

    octave是类似matlab的一个科学计算工具集.需要用到积分.微分.求导的时候,需要连接python3的sympy. windows上先安装好python3,然后pip安装Sympy.具体过程: ...

  5. （1）C#连接数据库：Connection对象

    连接数据库:Connection对象 1.Connection对象概述   Connection对象是一个连接对象,主要功能是建立与物理数据库的连接.其主要包括4种访问数据库的对象类,也可称为数据提供 ...

  6. 图解kubernetes调度器SchedulerExtender扩展

    在kubernetes的scheduler调度器的设计中为用户预留了两种扩展机制SchdulerExtender与Framework,本文主要浅谈一下SchdulerExtender的实现, 因为还有 ...

  7. pycharm安装PIL失败

    搜索安装PIL后无法成功安装,在尝试各种版本后依旧无法解决 问题解决 安装Pillow-PIL,既可以成功执行代码 因为pil没有64位的版本,所以需要下载安装第三方支持64位系统的版本才可以使用.

  8. vsphere部署说明

    前言 简单介绍一下vsphere及相关组件: vsphere是VMware公司推出一款虚拟化产品,ESXi与Vcenter是其组成部分:ESXi将物理基础设施虚拟化成虚拟池,Vcenter将ESXi虚 ...

  9. 机器学习-计算机视觉和卷积网络CNN

    概述 对于计算机视觉的应用现在是非常广泛的,但是它背后的原理其实非常简单,就是将每一个像素的值pixel输入到一个DNN中,然后让这个神经网络去学习这个模型,最后去应用这个模型就可以了.听起来是不是很 ...

  10. java获取本地IP地址集合包括虚拟机的ip

    public static ArrayList<String> getLocalIpAddr() { ArrayList<String> ipList = new ArrayL ...