JQuery 入门学习(二)
web前端
时隔几天,天气依旧炎热,不过坐在空调房里的我一点也感觉不到~(笑)。我的事也在稳步进行着,这个下午继续我上一篇的Jquery。
(文中代码大家依旧可以拿到 http://www.w3school.com.cn/tiy/t.asp?f=html_basic 上运行查看效果 )
选择器详解和css语法
上次简单地说了选择器,只提到了一个id选择器,选择id=xxx的某元素。其实Jquery的选择器可谓多种多样,对css比较熟悉的同学就很好学了,因为css的语法Jquery选择器基本都能用。
比如,css里面,定义一个类的样式的方法:.XXX{},而在Jquery里选择一个class=XXX的元素的方法:$(".XXX")。
举一些常用的例子,详细的选择器说明在w3school里都有列出。
说明 |
Jquery选择器 |
选择的元素举例 |
类似的css语法 |
---|---|---|---|
选择第一个id=xxx的元素 |
$("#main") |
<div id="main"></div> |
#main { } |
选择所有class=xxx的元素 |
$(".intro") |
<div class="intro"></div> |
.intro {} |
选择所有X元素(X为标签名) |
$("h1") |
<h1></h1> |
h1 {} |
选择第一个某元素 |
$("p:first") (第一个P元素) |
<p></p><p></p> |
p:first-child {} |
选择第n个某元素 (Jquery中从0开始,css中从1开始) |
$("p:eq(1)") (第二个p元素) |
<p></p><p></p> |
p:nth-child(2) {} |
选择tr元素下的第二个td元素 |
$("tr td:eq(1)") |
<tr><td></td><td></td></tr> |
tr td:nth-child(2) {} |
选择所有带有某属性的元素 |
$("[name='user']") |
<input name="user" /> |
[name='user'] {} |
选择所有href="qq.com"的a元素 |
$("a[href='qq.com']") |
<a href="qq.com"></a> |
a[href='qq.com'] {} |
选择所有type="hidden"的<input>元素 |
$(":hidden") |
<input type="hidden" /> |
input[type='hiden'] {} |
这只是我举的一些例子,基本上选择器Jquery和css类似,所以对css比较熟悉的人可以很快掌握Jquery的选择器语法,这也是Jquery流行的原因之一,很好学习,一通百通。
事件详解
在很多Jquery代码中,我们总是能看到是这样的形式:
$(document).ready(function(){
//Jquery代码
});
所有的代码被套在了最外层的ready中。我上次也提到了,ready是一个事件。我们上面说的选择器,它选择某元素的作用,其实就是为了完成后面的工作。看我们这个代码,$(document)选择的是document对象,这个对象学javascript应该很清楚,指的就是整个html文档。选在选在到了对象,这个对象有一个方法ready();
ready是一个事件。事件是什么概念,和很多编程一样,事件是由用户在执行相应的操作后自动触发的一个过程,我们可以给某事件绑定一个处理函数,当用户触发了这个事件后,就能执行我们绑定的函数。
ready()是一个事件绑定函数,它中间那个function(){}就是我们为ready事件绑定的函数。ready事件在对象加载完成后触发,我们前面选择的是document对象,所以这个ready就是指整个文档加载完成后触发的事件。
所以整段代码意思就是为document对象的ready事件添加响应函数function(){},这个函数里面添加我们希望Jquery做的事情。当文档加载完成后,执行此函数,相当于执行我们的代码。
我列举一些Jquery中常用的事件及其绑定函数:
click 鼠标点击事件 (最常用,当鼠标点击某对象时触发此函数)
change 对象被改变(如input框中写入、修改、删除文字时触发此事件)
focus 对象获得焦点(如光标进入textarea框触发此事件)
blur 对象失去焦点(与focus事件相对)
load 对象加载完成(如图像被加载完成时触发此事件)
error 对象遇到错误 (如图像输入了一个错误的地址,没有成功加载)
mousemove 鼠标移动 (当鼠标移动时触发此事件)
上次我举了几个例子,有一个就是点击按钮后“离别歌”出现在页面中,触发的就是click事件。
这次试试mousemove事件,运行这段代码:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
});
</script>
</head>
<body>
<p>鼠标位于坐标: <span></span>.</p>
</body>
</html>
可以看到,鼠标移动后就能输出当前鼠标所在的坐标。其中function有一个参数e,每个事件函数都有一个参数,这个参数就是指该事件本身。(当然这个参数可以省略),e.pageX和e.pageY就是指鼠标以后后鼠标所在的位置。
html操作详解
选择器的作用我说了,就是完成为了后面的操作。除了为选择到的对象添加一个事件响应函数外,还能直接操作此对象,这就是我们的html操作。
我也列举一些常用的html操作方法(更详细地在w3school中查看)
方法 |
举例 |
例子说明 |
---|---|---|
html() |
var txt = $("div#main").html(); |
id=main的div元素,获取其中内容赋值给txt |
append() |
$("div#main").append('<br/>leavesongs.com'); |
向id=main的div元素中追加内容'<br/>leavesongs.com' |
prepend() |
$("div#main").prepend('leavesongs.com<br/>'); |
向id=main的div元素中,在最前端增加内容 |
attr() |
$("table").attr("width","500"); |
将所有table元素的属性设置为宽度等于500px |
val() |
var pass = $(":password").val(); |
获得密码框中的值(val()方法一般作为获取input框中内容的方法) |
hide() |
$("div#main").hide('slow'); |
缓慢隐藏id=main的div元素 |
show() |
$("div#main").show(2000); |
用2000毫秒的时间显示id=main的div元素 |
remove() |
$("div#main").remove(); |
移除id=main的div元素 |
通过这些方法,我们能动态地对html页面进行操作。再结合之后我要说的ajax,就可以动态地向服务器请求内容,并在不刷新页面的情况下更新页面中一部分。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 个人总结的部分数据验证规则
- 一句话实现php日期转中文汉字
- .Net Core微服务入门全纪录(八)——Docker Compose与容器网络
- PHP中少用但是很好用的方法
- 使用一维数据构造简单卷积神经网络
- .Net Core微服务入门全纪录(完结)——Ocelot与Swagger
- PHP使用GD库生成文件
- 反向传播算法从原理到实现
- 基于EntityFramework 6 Code First实现多租户的一种思路
- PHP使用GD库生成柱状图
- PHP生成Mysql数据字典
- .Net Core in Docker极简入门(上篇)
- PHP一个比较完善的树形结构代码
- .Net Core in Docker极简入门(下篇)
- snoopy(强大的PHP采集类) 详细介绍