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. 日均百万 PV 的站点如何做性能监测？试试「3M口罩」！

    对很多开发者而言,如果网站的日流量达到百万级别,峰值 PV 也突破了 3 万,这样的站点在线下测试的时候总是让人心力交瘁.... 生产环境下的性能监测问题更是尤其让人头疼! 开发同学在想,运维人员也在 ...

  2. Vmware 8.00 文件共享ubuntu

    http://bolg.sinaapp.com/html/2012/1848.html 这是解决vm不能共享的解决方案. 今天学会的Linux命令: cp -i *** ~/tmp cd VMware ...

  3. php重定向跳转

    一.用HTTP头信息 也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如声明返回信息的类型("Co ...

  4. 关于安装完Node.js 出现node is not dedined 问题

    今天想来接触下Node.js 神奇  怀着揣揣的心 从官网下载了windows 的64位mis版本  几个下一步就顺利安装完毕了 接着跟着新手教程走  不懂教程里的 苹果shell 是什么 反正就是检 ...

  5. linux 和 ecos 内核线程创建/信号量/event等对比

    ecos: int gx_thread_create (const char *thread_name, gx_thread_id *thread_id, void(*entry_func)(void ...

  6. Java多态的体现之继承

    /** * * 功能:演示多态 */ package com.litao; public class Demo5 { public static void main(String[] args) { ...

  7. linux下查看防火墙当前状态，开启关闭等

    从配置菜单关闭防火墙是不起作用的,索性在安装的时候就不要装防火墙 查看防火墙状态: /etc/init.d/iptables status 暂时关闭防火墙: /etc/init.d/iptables  ...

  8. Service Oriented Architecture

    What is Service Oriented Architecture (SOA)? There have been so many interpretations of this through ...

  9. hadoop2.2编程：自定义hadoop map/reduce输入文件切割InputFormat

    hadoop会对原始输入文件进行文件切割,然后把每个split传入mapper程序中进行处理,FileInputFormat是所有以文件作为数据源的InputFormat实现的基类,FileInput ...

  10. BZOJ_1615_[Usaco2008_Mar]_The Loathesome_Hay Baler_麻烦的干草打包机_(模拟+宽搜/深搜)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1615 一个主动轮带着一些轮子转,轮子带着轮子转,轮子带着轮子转...一个非主动轮只会被一个轮子 ...