JQuery基本语法（部分）

1、jQuery介绍

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

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

jQuery的一个实例：

<html>

<head>

<script type="text/javascript" src="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 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

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

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

2、jQuery安装

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 jQuery.com 下载。下载下来的jquery-xx.js文件存放在一个合理的地方，然后在头部引用。src值需要是这个相对这个html文件的路径。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它。如果不引用使用jquery，会提示$没定义。

<head>

<script  type="text/javascript" src="jquery-1.12.3.min.js"></script>

<script type="text/javascript">

</head>

3、jQuery 语法

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

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

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

示例

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

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

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

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

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

4、jQuery 选择器

（1）jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

（2）jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

（3）jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

（4）更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

4、jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){

  $("p").hide();

});

$("#show").click(function(){

  $("p").show();

});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

$("button").click(function(){

  $("p").hide(1000);

});

5、jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){

  $("p").toggle();

});

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

6、jQuery Callback 函数

典型的语法：

$(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。

例子：

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

  $("p").hide(1000,function(){

    alert("The paragraph is now hidden");

    });

  });

});

</script>

</head>

<body>

<button type="button">Hide</button>

<p>This is a paragraph with little content.</p>

</body>

</html>

7、jQuery - 获得内容和属性

（1）jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

（2）获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());

  });

});

</script>

</head>

<body>

<p id="test">这是段落中的<b>粗体</b>文本。</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示 HTML</button>

</body>

</html>

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val());

  });

});

</script>

</head>

<body>

<p>姓名：<input type="text" id="test" value="米老鼠"></p>

<button>显示值</button>

</body>

</html>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));

  });

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

</body>

</html>

8、jQuery - 设置内容和属性

我们将使用前一节中的三个相同的方法来设置内容：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");

  });

  $("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");

  });

  $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");

  });

});

</script>

</head>

<body>

<p id="test1">这是段落。</p>

<p id="test2">这是另一个段落。</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

<button id="btn1">设置文本</button>

<button id="btn2">设置 HTML</button>

<button id="btn3">设置值</button>

</body>

</html>

JQuery基本语法（部分）的更多相关文章

jQuery 基础语法
jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么一.总结一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
前端之JQuery：JQuery基本语法
jQuery基本语法一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...
JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例复选框,综合案例随机图片
知识点梳理课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具插件:PageHelper (j ...
jquery基本语法（一）
https://www.cnblogs.com/haiyan123/p/7657151.html 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么 ...
web前端----jQuery基础语法
一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...
<学习笔记之 JQuery 基础语法>
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
jQuery基本语法
jQuery 是 JavaScript 的一个函数库.方便.主流 jQuery的开发步骤: (1) 导入jQuery 库 (2) 在 <script src="../js/j ...
jQuery 选择器语法
jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称说明举例 #id 根据元素Id选择 $("divId&quo ...

随机推荐

nanomsg 如何写数据到PipelineDB
nanomsg:https://github.com/nanomsg/nanomsg PipelineDB:https://github.com/pipelinedb/pipelinedb nanom ...
DDD峰会归来话DDD
一场大戏落幕,首届DDD中国峰会如大会主题色一般的红.或许在12月9日这一天,全中国的DDD粉丝大约有一半都汇聚在了国家会议中心.听起来是幸,其实是不幸,因为DDD在中国的人群基数实在是太少了. 因为 ...
开源API测试工具 Hitchhiker v0.6更新 - 改进压力测试
Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持Schedule, 数据对比,压力测试,支持上传脚本定制请求,可以轻松部署到本地,和你的team成员一起协作测试 ...
windows环境Caffe安装配置步骤（无GPU）及mnist训练
在硕士第二年,义无反顾地投身到了深度学习的浪潮中.从之前的惯性导航转到这个方向,一切从头开始,在此,仅以此文记录自己的打怪之路. 最初的想法是动手熟悉Caffe,考虑到直接上手Ubuntu会有些难度, ...
Mac： Android studio+VirtualBox+Genymotion
针对 Mac Yosemite 10.10.4 操作系统 1.在Android Studio 中preferences 中的Plugins 中安装Genymotion插件. Android Studi ...
以KeyValue形式构建Lua Table
Key为字符串 -- 定义一个key,value形式的table local kv = {fruit = "apple", bread = "french", ...
自学Zabbix3.9.2-模板Templates-linking/unlinking
自学Zabbix3.9.2-模板Templates-linking/unlinking HOST链接模板之后,便继承了模板里定义的item,trigger等等,使用这个方法,配置zabbix监控会减少 ...
Mesos初步尝试
记得几年前,用.net做分布式批处理的时候环境搭建很麻烦,虽然参数的分片算法.配置都搞定了,但是.net虚拟机的环境建立是个头疼的事: 节点要自己手工建环境变量没法从前往后传递批处理程序改动后的分 ...
springboot小技巧（转）
一些springboot小技巧.小知识点初始化数据我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用Jpa,另外一种是Spring JDBC.两种方式各有区别下面 ...
为什么还坚持.NET？找一门适合自己的语言去做编程
为什么还坚持.NET? 找一门适合自己的语言去做编程接触了.NET快十二年了,现在专注于分布式服务的开发. 中间经历过各种编程语言的诱惑,ios等. 前几年才对自己有比较明确的定位技术上:找到适合 ...

JQuery基本语法（部分）

示例

实例

语法：

实例

实例

语法：

典型的语法：

JQuery基本语法（部分）的更多相关文章

随机推荐

热门专题