什么是jquery:
- jQuery是一个javascript的函数库
- jQuery是一个轻量级的"写的少,做的多"的javascript库
- jQuery库包含以下功能:
# HTML元素提取
# HTML元素操作
# css操作
# HTML事件函数
# JavaScript特效和动画
# HTML DOM遍历和修改
# AJAX
# Utilities
为什么使用jQuery
目前网络上最流行的js框架,很多大公司都在使用,兼容性非常好,甚至支持IE6
jQuery安装
可点击官网进行下载:jquery.com
有两个版本:
- Production version,用于实际的网站中,已被精简和压缩
- 是Development version 用于测试和开发,未压缩,是可读的代码
当然如果不希望下载可以通过cdn引用他
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
jQuery语法
通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行"操作"(actions)
#基础语法:$(selector).action()
美元符号定义jQuery
选择符(selector)"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作
实例:
$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有<p>元素
$("p.test").hide() 隐藏所有class = "test"的<p>元素
$("#test").hide() 隐藏所有id = "test"的元素
文档就绪事件
$(document).ready(function(){
//开始写jQuery代码...
});
这是为了防止文档在完全加载(就绪)之前运行jQuery代码.
如果在文档没有完全加载之前就运行函数,操作可能失败.
下面是两个具体的例子:
**试图隐藏一个不存在的元素
**获得未完全加载的图像的大小
# 提示: 简洁写法(与以上写法效果相同):
$(function){
//开始写jQuery代码
}
jQuery选择器
jQuery选择器允许您对HTML元素组或单个元素进行操作.
jQuery选择器基于元素的id,类,类型,属性,属性值等"查找"(或选择)HTML元素,它基于已经存在的css选择器
jQuery中所有选择器都以美元符号开头:$().
1. $("*") 选取所有元素
2. $(this) 选取当前HTML元素
3. $("p:first") 选取第一个<p>元素
4. $("ul li:first") 选取第一个<ul>元素的第一个<li>元素
5. $("ul li:first-child") 选取每一个<ul>元素的第一个<li>元素
6. $("[href]") 选取待遇href属性的元素
7. $("a[target='_blank']") 选取所有target属性值等于_blank的<a>元素
8. $("a[target!='_blank']") 选取所有target属性值不等于_blank的<a>元素
9. $(":button")选取所有type=button的<input>元素和<button>元素
10. $("tr:even") 选取偶数位置的<tr>元素
11. $("tr:odd") 选取奇数位置的<tr>元素
jQuery事件
什么是事件
页面对不同访问者的响应叫做事件
事件处理程序指的是当HTML中发生某些事件时所调用的方法
实例:
- 在元素上移动鼠标
- 选取单选按钮
- 点击元素
常见的DOM事件:
# 鼠标事件:
click dbclick mouseenter mouseleave
# 键盘事件:
keypress keydown keyup blur
# 表单事件:
submit change focus unload
# 文档/窗口事件
load resize scroll
jQuery事件方法语法:
在jQuery中,大多数DOM事件都有一个等效的jQuery方法.
页面中指定一个点击事件:
$("p").click();
下一步是定义什么时间触发事件,您可以通过一个事件函数实现:
$("p").click(function(){
//动作触发后执行的代码!!
});
常用的jQuery事件方法
# $(document).ready() 文档完全加载完后执行函数
# $("p").click(function(){$(this).hide()};
# $("#p1").dbclick(function(){$(this).hide();});
# $("#p1").mouseenter(function(){alert("...");});
# mousedown mouseup hover()
# focus() blur()...
网友评论