学习jQuery

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

jQuery 语法

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

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

美元符号定义 jQuery   $

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

 

实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

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

$("p").hide()

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

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在接下来的学习文章中，您将学习到更多有关选择器的语法和实验案例。

实验一：利用jquery选择器更改页面元素，html代码如下，要求点击按钮后，页面上的文字标题顺序从上到下递增。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>实验一</title>

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<h1>这是标题1</h1>

<h2 id="text1">这是标题1</h2>

<h3 class="text2">这是标题1</h3>

<p>这是标题1</p>

<button>click</button>

<script type="text/javascript">

$(document).ready(function(){

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

$("#text1").text("这是标题2");

$(".text2").text("这是标题3");

$("p").text("这是标题4");

})

})

</script>

</body>

</html>

当该方法用于设置值时，它会覆盖被选元素的所有内容。

$(selector).text(content)

实验二：利用jquery选择器更改页面元素，html代码如下，要求点击按钮后，该诗词的最后一句“这次第，怎一个愁字了得！”加到原来的网页后，如图。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>实验2</title>

<!--适应移动端-->

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

<!--引用jquery库-->

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<div>

<h5>声声慢，寻寻觅觅，</h5>

冷冷清清，凄凄惨惨戚戚。<br>

乍暖还寒时候，最难将息。<br>

三杯两盏淡酒，怎敌他、晚来风急？<br>

雁过也，正伤心，却是旧时相识。<br>

满地黄花堆积。憔悴损，如今有谁堪摘？<br>

守著窗儿， 独自怎生得黑？<br>

梧桐更兼细雨，到黄昏、点点滴滴。<br>

<p id="show"></p>

</div>

<input type="button" value="添加">

<script type="text/javascript">

$(function () {

$(":button").on("click",function () {

$("#show").text("这次第，怎一个愁字了得！")

})

})

</script>

</body>

</html>

.show()可以通過設置全局關閉 所有jQuery效果

实验三：利用jquery选择器更改页面元素，html代码如下，要求点击按钮后，隔行变色表单。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>实验3</title>

<!--适应移动端-->

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

<!--引用jquery库-->

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">$(function () {

$(document).ready(function () {

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

$("table tr:even").css("background","#FFC0CB");

$("table tr:odd").css("background","#87CEFA");

});

});

});

</script>

</head>

<body>

<table border="1">

<tr>

<th>id</th>

<th>name</th>

<th>adress</th>

</tr>

<tr>

<td>1</td>

<td>张三</td>

<td>北京</td>

</tr>

<tr>

<td>2</td>

<td>李四</td>

<td>上海</td>

</tr>

<tr>

<td>3</td>

<td>丁一</td>

<td>广州</td>

</tr>

<tr>

<td>4</td>

<td>小杜</td>

<td>厦门</td>

</tr>

<tr>

<td>5</td>

<td>小艾</td>

<td>长沙</td>

</tr>

</table>

<button>click</button>

</body>

</html>

想学jquery的可以跟着进度来，会持续更新实验案例!!

学习jQuery(1)的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  3. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  4. 【菜鸟学习jquery源码】数据缓存与data()

    前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...

  5. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  6. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  7. 学习jQuery的on事件

    开发asp.net mvc程序,多少是离不开jQuery客户程序.今天Insus.NET学习jQuery的一个on事件驱动. 先在网页视图放一个图片铵钮,用户可以使用mouse对这图片时行over,o ...

  8. 学习Jquery

    早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...

  9. 学习jQuery之旅

    早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...

  10. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

随机推荐

  1. 使用SQL-Server分区表功能提高数据库的读写性能

    首先祝大家新年快乐,身体健康,万事如意. 一般来说一个系统最先出现瓶颈的点很可能是数据库.比如我们的生产系统并发量很高在跑一段时间后,数据库中某些表的数据量会越来越大.海量的数据会严重影响数据库的读写 ...

  2. codepen 上25个最受欢迎的HTML/CSS代码

    Codepen是一个非常了不起的网站,优设哥在设计师网址导航上也大力推荐过,得到了很多同学的喜爱,也是全球web前端开发人员的圣地! 我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS ...

  3. how to read the system information by using the node cli tool?

    how to read the system information by using the node cli tool? node cli & get system info demos ...

  4. webpack defineConstants

    webpack defineConstants PAGES 全局常量/全局变量 https://webpack.js.org/plugins/define-plugin/ taro https://n ...

  5. zrender & svg

    zrender & svg window.prompt double click https://codepen.io/xgqfrms/pen/jOEGNvw // https://cdn.x ...

  6. NGK公链有发展前景吗？

    最近网络中经常能看到一个新公链项目NGK的消息,很多朋友也都私下表示过,非常看好今年的NGK.对此,小编对NGK做了一些功课,发觉到NGK未来在商业Dapp应用的发展前景,下面就给大家分享一下我的理解 ...

  7. .NET 6 Preview 1 发布

    前言 2021 年 2 月 17 日微软发布了 .NET 6 的 Preview 1 版本,那么来看看都有什么新特性和改进吧,由于内容太多了因此只介绍一些较为重点的项目. 统一和扩展 .NET 6 在 ...

  8. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  9. 【转】ROS之topic和service通信比较

    实验速度 1. via topic 上图是以前ROS课上做的一个实验,内容是测试一个publisher和一个subscriber之间通讯所用的时间.两个node都很简单,publisher发送一个字符 ...

  10. Python算法_两数之和（01）

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,数组中同一个元素不能使用两遍. ...