学习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. C++中函数的形式参数引用

    形式参数的传递方式 值传递 值传递是将数值传递到程序中,这种方式传递是单向传递 但是如果想要双向传递,这种视频无法满足: 引用传递 引用传递可以实现双向的传递 为了对比处两个之间的差异,这里举出两个例 ...

  2. Object Destructuring Assignment vs Object.assign

    Object Destructuring Assignment vs Object.assign // const params = Object.assign({}, this.$route.par ...

  3. git push bug

    git push bug fast-forwards $ git push $ git push --help # git pull $ gp To http://git.xgqfrms.xyz:88 ...

  4. push notifications

    push notifications https://developers.google.com/web/fundamentals/push-notifications/ Push API https ...

  5. c++ 动态设置函数

    #include <iostream> #include <Windows.h> #include <TlHelp32.h> using namespace std ...

  6. 万链互联时代,NGK DeFi项目如何在牛市中崭露头角!

    众所周知,中心化交易所存在技术风险.道德风险与法律风险.去中心化交易所像是NGK以其匿名性.安全性.私钥独立掌控的特点,弥补了中心化交易所的不足,我们看到Uniswap日成交量均超过1亿美元,甚至接近 ...

  7. APC体育全力打造高端体育服务品牌

    近年来,a private company(以下简称APC体育,公司编号:08703733)坚持以人为本,努力满足各个行业运动达人多元化及多层次的体育需求,在倡导体育公共健康服务和水平的同时,还向运动 ...

  8. 内核栈与thread_info结构详解

    本文转载自内核栈与thread_info结构详解 什么是进程的内核栈? 在内核态(比如应用进程执行系统调用)时,进程运行需要自己的堆栈信息(不是原用户空间中的栈),而是使用内核空间中的栈,这个栈就是进 ...

  9. hadoop环境搭建：高可用

    目录 1.硬件配置 2.软件版本 3.准备工作 3.1.配置网络环境 3.2.安装JDK 3.3.安装ZOOKEEPER 4.安装Hadoop 5.启动 6.问题 7.配置文件 1.硬件配置 采用3台 ...

  10. cocos2dx创建工程

    p.p1 { margin: 0; font: 17px "Helvetica Neue"; color: rgba(69, 69, 69, 1) } 官网镇楼: http://w ...