jQuery语法基础&选择器
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语法基础&选择器的更多相关文章
- 新知识:JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
- Jquery语法基础
Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l 美元符号定义 jQuery (又称工厂函数) l 选择器(selector)“查询”和“查找” ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- JQuery:JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- jQuery语法、选择器、效果等使用
1.jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- jQuery基础(1) -- jQuery 语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions).jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- jQuery -- 光阴似箭(一):初见 jQuery -- 基本用法,语法,选择器
jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...
随机推荐
- backbone案例
http://www.kuqin.com/webpagedesign/20120807/324101.html http://udonmai.com/code/todos-backbone%E6%A1 ...
- jquery upgrade
http://www.ifanybug.com/article/00125 http://zhidao.baidu.com/question/69399476.html http://www.tmtp ...
- Python 之 使用 PIL 库做图像处理
http://www.cnblogs.com/way_testlife/archive/2011/04/17/2019013.html Python 之 使用 PIL 库做图像处理 1. 简介. 图像 ...
- Qt中如何写一个model(自定义一个RowNode,我没有碰到过)
在qt中,用到最多就是model/view的结构来表示数据层及表示层的关系.model用于给view提供数据.那如何来实现一个简单的树形model呢. 实现一个自己的model需要重载以下的方法: Q ...
- Android imageview显示圆形图片
需要ImageView显示圆形图片做法如下 public static Bitmap toRoundCorner(Bitmap bitmap, float ratio) { System.out.pr ...
- jni.h头文件详解二
作者:左少华 博客:http://blog.csdn.net/shaohuazuo/article/details/42932813 转载请注明出处:http://blog.csdn.net/shao ...
- 【转】VIRTUALBOX导入已有.VDI文件步骤
原文网址:http://blog.csdn.net/wanghai__/article/details/6703923 1.安装SUN VIRTUALBOX 2.新建,进入到“新建虚拟电话”对话框,下 ...
- WebService的优点和基本原理
WebService简介(1)WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络应 ...
- linux下安装
挂载 1.虚拟机里选择ios文件2.挂载光驱命令: cd / mount /mnt/cdrom/ cd /mnt/cdrom/ ls 卸载 cd /umount /mnt/cdrom/ 安装 XXX. ...
- lightoj 1002
最短路的变形,使用spfa做. #include<set> #include<map> #include<list> #include<stack> # ...