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. 再eclipse的javaweb项目中添加JQuery文件时jquery-2.1.4.min.js报错

    解决方法: eclipse导入jquery包后报错,下面有个不错的解决方法,需要的朋友可以参考下 eclipse导入jquery包后报错,处理步骤如下: 1.打开项目.project文件,去掉如下内容 ...

  2. [转载]C#读写配置文件(XML文件)

    .xml文件格式如下 [xhtml] view plaincopy <?xml version="1.0" encoding="utf-8"?> & ...

  3. matlab怎么同时显示imshow 两幅图片

    matlab怎么同时显示imshow 两幅图片 matlab怎么同时显示imshow 两幅图片 方法一:subplot()函数 subplot(2,1,1); subplot(2,1,2); 分上下或 ...

  4. PHP扩展编写示例

    1.生成描述文件,包含对函数等的定义 [chengyi@localhost php-extension]$ cat hello_cy.def string self_concat(string str ...

  5. 百度地图API使用介绍

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

  6. Maven引入依赖后自动下载并关联源码(Source)

    好多用 Maven 的时候会遇到这样一个棘手的问题: 就是添加依赖后由于没有下载并关联源码,导致自动提示无法出现正确的方法名,而且不安装反编译器的情况下不能进入方法内部看具体实现 . 其实 eclip ...

  7. AHB总线和APB总线

    AHB主要用于高性能模块(如CPU.DMA和DSP等)之间的连接,作为SoC的片上系统总线,它包括以下一些特性:单个时钟边沿操作:非三态的实现方式:支持突发传输:支持分段传输:支持多个主控制器:可配置 ...

  8. SPRING IN ACTION 第4版笔记-第四章ASPECT-ORIENTED SPRING-011-注入AspectJ Aspect

    一. 1. package concert; public interface CriticismEngine { public String getCriticism(); } 2. package ...

  9. MySQL 5.6数据库配置主从同步

    win7环境下mysql主从搭建 我下载的是压缩包,免安装的那种 1.简单安装 解压后把my-default.ini复制一份改为my.ini默认mysql会找这个文件,首先从system32下找,然后 ...

  10. URAL1658. Sum of Digits(DP)

    链接 这题卡了挺久了 昨天试着用类似dfs的方法直接TLE在第二组 看了下题解,,发现s1,s2的范围是个幌子..100位最大的s1900 s28100 觉得s1s2太大不敢开二维.. 这样就简单了 ...