jquery初识

2016-09-17 本文已影响0人 edwin_hei

什么是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()...