jQuery 语法实例_jquery-syntax示例-程序员宅基地

技术标签: Jquery  

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。

jQuery 语法实例

演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>


<body>
<button type="button">Click me</button>
</body>
</html>

         演示 jQuery hide() 函数,隐藏 id="test" 的元素。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

    演示 jQuery hide() 函数,隐藏所有 <p> 元素。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>


<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html> 


演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhufengming/article/details/8772700

智能推荐

react学习总结6--构建工具Gulp、Browserify(二)_react gulp-程序员宅基地

文章浏览阅读1k次。react 学习总结–构建工具Gulp、Browserify(二)1.html 文件处理gulp-htmlmin 插件 用于压缩html,可以进行配置,下边是配置信息(选填) var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('htmlmin', function ()_react gulp

开关电源输入:共模电感,X电容,Y电容,差摸电感理论计算!_共模电感和y电容在滤波方面的区别-程序员宅基地

文章浏览阅读7.6k次,点赞3次,收藏69次。转自:https://mp.weixin.qq.com/s/qp_DSBGKdjNo2-lO2s5v7Q引言在开关电源中,EMI滤波器对共模和差模传导噪声的抑制起着显著的作用。在研究滤波器原理的基础上,探讨了一种对共模、差模信号进行独立分析,分别建模的方法,最后基于此提出了一种EMI滤波器的设计程序。高频开关电源由于其在体积、重量、功率密度、效率等方面的诸多优点,已经被广泛地应用于工业..._共模电感和y电容在滤波方面的区别

IntelliJ IDEA 设置注释模板 (Mac)_mac idea 设置注解格式-程序员宅基地

文章浏览阅读7.9k次。类注释模板设置:点击 preferences ,搜索 File and Code Template ,在 Files tab 页下,选择 Class,在类名上面添加模板:/** * @program ${PROJECT_NAME} * @description: ${TODO} * @author: ${USER} * @create: ${YEAR}/${MONTH}/${DAY}..._mac idea 设置注解格式

sizeof用法 _sizeof(4.0+2)-程序员宅基地

文章浏览阅读2k次。Sizeof用法本文主要包括二个部分,第一部分重点介绍在VC中,怎么样采用sizeof来求结构的大小,以及容易出现的问题,并给出解决问题的方法,第二部分总结出VC中sizeof的主要用法。1、 sizeof应用在结构上的情况请看下面的结构:struct MyStruct{double dda1;char dda;int type};对结构MyStruct采用_sizeof(4.0+2)

阅读小结:Large-Margin Softmax Loss for Convolutional Neural Networks_large-margin softmax loss的代码-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏4次。徐博最近一直在看我博客,肯定是想看我什么时候不更新,然后好嘲笑我。当然,不排除徐博已经爱上我的可能。What:改进SoftmaxLoss,显式的控制类内的距离,(不让 已经对的样本score太高,影响训练)可以防止过拟合。回顾SoftmaxLoss:1. Softmax 就是一个把一个向量归一的函数,输出也是向量。在matlab里就3行代码:% X_large-margin softmax loss的代码

后端java解析复杂嵌套json_java 解析复杂类型的json-程序员宅基地

文章浏览阅读6.2k次。其实不是很复杂百度翻译传过来的json数据:{"from":"zh","to":"en","trans_result":[{"src":"高度600米","dst":"Height 600 meters"}]}现在要取出dst对应的值:Height 600 meters String date="{"from":"zh","to":"en","trans_result":[_java 解析复杂类型的json

随便推点

如何高效地从BAM文件中提取fastq-程序员宅基地

文章浏览阅读1.8k次。在一年前,我写过一篇文章,叫做如何从BAM文件中提取fastq,之前也发现了从BAM里面提取Fastq是有些麻烦,只不过最后通过samtools的子命令实现了数据提取,实现功能之后也没有再去思考如何提高效率。最近读到每周文献-190419-植物单细胞BAM重比对以及假基因研究时,发现里面提到了一个工具叫做 bazam, 功能就是提取Fastq文件,文章发表在 Genome Bio..._10x 开发的工具 bamtofastq

中国电信天翼宽带无线路由器设置wifi笔记_中国电信wifi设置时间-程序员宅基地

文章浏览阅读8k次。0x00 前言 还记得电信天翼宽带吗?现在的天翼宽带的终端基本是华为的无限路由了,相信有不少同学在包装了中国电信天翼宽带后,个人申请到一个账号/密码,并且额外缴费得到一个路由器,然后就没有然后了。心里就纳闷,咋上wifi,然后又得另外花钱买个无线路由,然后不知道怎样弄。0x01 电信宽带的路由终端首先电信的华为路由器的底部都会贴有该终端的信息,例如终端登录地址,账号,密码等_中国电信wifi设置时间

让VC编译出来的程序不依赖于msvcr80.dll/msvcr90.dll/msvcr100.dll等文件_编译msvc不依赖msvcr100.dll-程序员宅基地

文章浏览阅读853次。让VC编译出来的程序不依赖于msvcr80.dll/msvcr90.dll/msvcr100.dll等文件正常情况下,当我们用VC编译出一个Console/Win32类型项目的exe程序时(这里暂不考虑MFC程序),会依赖于msvcrxx.dll文件(xx为不同VC对应的版本号,VC2005为80,VC2008为90,VC2010为100),发布程序的时候,就需要把对应的dll也cop_编译msvc不依赖msvcr100.dll

什么是问题?_问题是什么-程序员宅基地

文章浏览阅读4.6k次。今天看到一篇文章,说什么是问题?看到这个标题很好奇。就点进去看了一下。以下是总结和思考。漫漫人生中,我们总会遇到各种各样的问题。那么什么是问题呢?有以下一个定义:问题是目标与现状的差异。解决方案,就是现状到目标的路径。那么,什么是目标呢?目标应该是符合真实的需求。那么,什么是需求呢?需求不仅包含当前这个问题,有时候它更需要考虑到整个系统。打个比方说,有一天某个系统出现了超时问题,..._问题是什么

java中controller,service,serviceImpl,mapper,xml等几个文件的作用理解,以简单的查询为例_serviceimpl类的作用是什么-程序员宅基地

文章浏览阅读5.3w次,点赞59次,收藏278次。说明:最近一周都在写报表,样式很统一,上面是查询条件,下面是查询结果,页面如下图所示。由于要写很多报表,都是重复的工作,所以部门里的小哥哥在写了一个基于node的小程序,直接配置JSON文件,就可以生成报表模板,感觉很强(后面想学习一下)。作为一个优秀的CV工程师(复制粘贴),我也没怎么写前端的工作,直接用生成的模板就好了,但是后台的查询我还是稍微走心的。由于JAVA基础不是很好,总结的可..._serviceimpl类的作用是什么

java开发注释规范,开发人员代码注释规范.doc-程序员宅基地

文章浏览阅读111次。开发人员代码注释规范开发人员代码注释规范Java类版权及代码注释注释示例package java.blah;import java.blah.blahdy.BlahBlah;/** ==========================================================* Version Author Date Des..._huangzhihui java

推荐文章

热门文章

相关标签