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 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

/*************************Deom1**********************************/

/*************************Deom2**********************************/

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>hello World</title>

		<script src="jquery-latest.js"></script>

		<style>

			.test{

				height: 200px;

				width: 200px;

				background: #33ffca;

			}

		</style>

		<script>

			$(document).ready(function () {

				$('button').on('click',function () {

					/*$('button').click(function () {*/

					/*console.info("");*/

					alert('hello World');

				});

				$('.test').hide(1000).show(2000);/*动画隐藏，在现实两个函数*/

			});

		</script>

	</head>

	<body>

		<button>Click Me</button>

		<div class="test"></div>

	</body>

</html>

　

/*************************Deom3**********************************/

　

/*************************Deom4**********************************/

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>简易表单</title>

		<style>

			.divBtn{

				padding-top:5px;

			}

			.divBtn ,divCss{

				border: solid 1px #3598DC;

				width:50px;

			}

		</style>

		<script src="jquery-latest.js"></script>

		<script>

			$(function () {

				$('button1').click(function () {

					var v1=$('#text1').val();

					var r1=$('#radio1').attr('checked')?"男":"女";

					var c1=$('#check1').attr('checked')?"已经结婚了":"没有结婚呐";

					$('.divTip').html(v1+'\n'+r1+'\n'+c1).css('display','block');

				});

			});

		</script>

	</head>

	<body>

		<div class="divTitle">请输入信息</div>

		<div class="divContent">

			姓名：<input id="text1" type="text" class="txtCss"><br>

			性别：<input id="radio1" checked="checked"  type="radio" name="sex" value="男">男

				  <input id="radio2"  type="radio" name="sex" value="女">女<br>

			婚否：<input id="check1" type="checkbox"><br>

			<div class="divBtn">

				<input id="button1" type="button" value="提交" class="btnCss">

			</div>

			<div id="divTip" class="divTip"></div>

		</div>

	</body>

</html>

/************************* 选择器介绍（有CSS3基础很容易理解）*********************************/

【作者】：轻轻走143
【出处】：http://www.cnblogs.com/qingqingzou-143/
【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！

jQuery语法基础&选择器的更多相关文章

  1. 新知识：JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  2. Jquery语法基础

    Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l  美元符号定义 jQuery (又称工厂函数) l  选择器(selector)“查询”和“查找” ...

  3. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  4. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  5. jQuery语法、选择器、效果等使用

    1．jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...

  6. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  7. jQuery基础(1) -- jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions).jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取 ...

  8. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  9. jQuery -- 光阴似箭（一）：初见 jQuery -- 基本用法，语法，选择器

    jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...

随机推荐

  1. 解决win8找不到没有AppData文件夹

    现象:今天打开win8,由于是从xp直接过渡到win8,所以想寻找类似于AppData的文件夹.但是在user/用户名/下面木有. 解决:这是个隐藏文件,和xp一样,取消隐藏文件夹即可看到. 然后就可 ...

  2. 深度观察：腾讯收购大众点评背景下的O2O大格局

    [亿欧导读] 腾讯入股大众点评获得20%股权,详情解读:①大众点评:独立自主为底线,要钱大于要流量:②腾讯:承认原生活服务O2O失败,丰富移动支付应用场景:③美团承受压力,拉手窝窝继续苦等买家:④BA ...

  3. javascript的族家族史

    JavaScript 实现 完整的 JavaScript 实现是由以下 3 个不同部分组成的:ECMAScript.文档对象模型.浏览器对象模型.这也就是说 cocos2d-js 中 其实我们用的是 ...

  4. 使用Code first 进行更新数据库结构（数据迁移）

    CodeFirst 背景  code first起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建(DropCreateDatabaseIfModelChanges),此时就会 ...

  5. 8. Unity异常警告错误处理方法

    一. The AnimationClip 'cube1_anim' used by the Animation component 'Cube1' must be marked as Legacy. ...

  6. CAN

    CAN Introduction Features Network Topology(CANbus網路架構) MESSAGE TRANSFER(CAN通訊的資料格式) 1.DATA FRAME(資料通 ...

  7. 使用Oracle的存储过程批量插入数据

    原文地址:http://www.cnblogs.com/liaoyu/p/oracle-procedure-batch-insert.html 作者:L君还在说之乎者也 最近在工作中,需要使用生成一些 ...

  8. BZOJ_1623:_[Usaco2008_Open]_Cow_Cars_奶牛飞车_(贪心)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1623 n头牛,第i头牛的速度是si,m条路(m<=n).如果第i头牛前面有k头牛,它的速 ...

  9. Java问题汇集(1)

    1.javax.el.PropertyNotFoundException: Property 'Price' not found on type pet.petshop.dto.WareDto 简答: ...

  10. windows下nginx安装、配置与使用

    目前国内各大门户网站已经部署了Nginx,如新浪.网易.腾讯等:国内几个重要的视频分享网站也部署了Nginx,如六房间.酷6等.新近发现Nginx 技术在国内日趋火热,越来越多的网站开始部署Nginx ...