• 语法

$(selector).action()

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

比如：

$('.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可以方便对查询出来的多个结果批量操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <title>Document</title>

    <script>

        $(function() {

            $(".flex-item").click(function() {

                $(".flex-item").removeClass("sel")

                $(this).addClass("sel")

            })

        })

    </script>

    <style>

        .flex-container {

            display: flex;

            color: white;

        }

        .flex-container .flex-item {

            background-color: red;

            width: 100px;

        }

        .flex-item.sel {

            background-color: black;

        }

    </style>

</head>

<body style="width: 100%">

    <div class="flex-container">

        <div class="flex-item sel">

            1

        </div>

        <div class="flex-item">

            2

        </div>

        <div class="flex-item">

            3

        </div>

    </div>

</body>

</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. 【python系统学习06】一张图看懂列表并学会操作

    点击跳转-原文地址 数据类型 - 列表(list) 「目录:」 一张图了解列表 列表是什么 列表长啥样 语法格式 代码示例 格式特征 列表定义 列表操作 - 提取单个:偏移量 什么是偏移量 偏移量提取 ...

  2. IDEA 公司推出新字体，极度舒适~

    这几天炒得沸沸扬扬的 Intellij IDEA 公司 JetBrains 推出了一种新字体:JetBrains Mono,据说它是专为开发人员设计的,下面栈长带大家一起来吃个瓜. JetBrains ...

  3. auth.User.groups: (fields.E304) Reverse accessor for 'User.groups'

    创建表,运行下面命令,出错 makemigrations 原因:继承auth_user 解决方案 在settings.py文件添加 AUTH_USER_MODEL = "app名称.类名&q ...

  4. 这个时候 快下班了 我来翻译一段： Pro ASP.NET MVC 3 Framework

    Binding to a Derived Type绑定派生类型Although we have focused on interfaces (since that is most relevant i ...

  5. Vim学习之路1

    与之前的随笔一样,这个也是记录Vim常用命令以供日后查找所用.对于Vim,简介而又功能强大,学习之后代码书写相当愉快. 1. 保存并退出 :wq 2. 进入标准插入模式退出命令模式 i 3. 退出标准 ...

  6. beta版本发布说明与总结

    1.发布说明: 软件介绍: deta版本的发布最终是一个可安装使用的窗体程序,已经由Alpha版本的应用解决方案完成到一个程序: deta版本解决了Alpha版本遗留的软件技术方面错误问题,以及针对有 ...

  7. Java 8 Stream流编程学习

    本文是自己学习菜鸟教程中总结的笔记,用于快速找代码,完整的文档见菜鸟教程:Java 8 Stream Stream 使用一种类似用SQL语句从数据库查询数据的直观方式来提供一种对Java集合运算和表达 ...

  8. Liunx创建到部署ASP.NET Core项目从零开始-----使用Centos7

    一.搭建环境 1..注册Microsoft密钥和源 执行命令:sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages ...

  9. 什么是Druid

    一.Druid是什么 Druid 单词来源于西方古罗马的神话人物,中文常常翻译成德鲁伊. 玩过魔兽世界,暗黑破坏神,Dota,炉石传说,Dota自走棋的朋友,对这个词一定不陌生. 本文中所介绍的Dru ...

  10. （笔记）常用Llinu命令(一)

    Linux资源 鸟哥Linux:http://linux.vbird.org/linux_basic/ Linux命令大全:https://man.linuxde.net/ 目录切换 cd usr: ...