学习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. CSS multi colors circle

    CSS multi colors circle <!DOCTYPE html> <html lang="zh-Hans"> <head> < ...

  2. Recoil & React official state management

    Recoil & React official state management Redux Recoil.js https://recoiljs.org/ A state managemen ...

  3. GitHub rename the default branch from master to main

    GitHub rename the default branch from master to main master => main Repository default branch Cho ...

  4. Open Collective

    Open Collective Open Collective is an online funding platform for open and transparent communities. ...

  5. how to install zoom meeting app in macOS

    how to install zoom meeting app in macOS https://support.zoom.us/hc/zh-cn/articles/203020795-如何在Mac上 ...

  6. GitHub Learning Lab

    GitHub Learning Lab https://lab.github.com/ https://github.community/t5/GitHub-Learning-Lab/bd-p/lea ...

  7. stackoverflow & xgqfrms

    stackoverflow & xgqfrms stackoverflow https://stackoverflow.com/users/5934465/xgqfrms https://st ...

  8. c++ 读取ASCII

    void ReadASCII(BYTE* addr, size_t offset, char r[]) { size_t i = 0; char c; while (true) { c = *(add ...

  9. USDN代币多少钱？USDN有什么用?

    加密货币走向主流人群的采用有很多障碍,比如监管.交易所黑客事件等,但最明显的障碍还是它们极端的价格波动.这从加密货币的整个历史长度来看都是如此.一个货币要正常运转,比如成为有效的交换媒介.记账单位以及 ...

  10. re模块之简单计算器的实现

    本节大纲: 表达式的输入及检查.格式化 怎么样进行匹配最里面的括号以及操作数的匹配 如何实现表达式的四则运算 完整代码展示 在我们学习re模块之后,通常的练习就是利用所学相关知识来写一个计算器 那么, ...