jQuery基础学习一 简介、选择器、事件
2015-08-07 21:11
926 查看
一、概念:
jQuery是一个JavaScript库,可以极大的简化前端的JavaScript编程,并且很容易学习。
jQuery可以通过很一行很简单的代码,标记到网页中使用。
二、jQuery的库包:
1、HTML元素选取
2、HTML元素操作
3、CSS操作
4、HTML事件函数
5、JavaScript特效和动画
6、HTML DOM 的遍历和修改
7、AJAX
8、Utilities
9、除以上外,jQuery还有大量的插件
三、安装(使用)
jQuery是一个库包,也就是一个JavaScript的文本文件。将其引入即可使用。
1、下载后引入
使用本机的目录地址引用:
<head>
<scripttype="text/javascript" src="/jquery-1.10.2.min.js"></script>
</head>
2、通过网络CDN地址引用:这种方法会好一点,因为不会占用服务器资源,并且能保存缓存。
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery,按这些地址引用即可。
http://libs.baidu.com/jquery/1.10.2/jquery.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
谷歌和微软的会被墙,最好是用国内的前三个。
四、jQuery语法
通过jQuery,可以自由选取、查询HTML中的元素(标签),并对“它们”执行操作。
1、基础语法:
$(selector).action()-------$符号为定义jQuery,selector为选择符,action为要做的动作.。
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有p段落
$("p .test").hide() - 隐藏所有 class="test" 的p段落
$("#test").hide() - 隐藏所有 id="test" 的元素
2、文档就绪事件
jQuery的所有函数都要处在一个就绪函数里:
$(document).ready(function(){
//
jQuery methods go here...
});
意思是,优先将jQuery文件加载完成,在进行jQuery的其他方法。
还可以使用简洁的写法:
$(function(){
//
jQuery methods go here...
});
五、jQuery选择器。
使用jQuery的选择器,可以很方便的选择到HTML的单个元素或元素组(tag、class、id、name...),它基于已存在的CSS选择器,另外还有一些自定义的选择器。
1、标签选择器: $("tag")
2、id选择器: $("#id")
3、class选择器:$(".class")
六、jQuery事件
jQuery的重点在 事件处理。
1、常见的DOM事件:
2、jQuery事件的方法语法
在jQuery中,大多数DOM事件都有一个等效的方法
1)单击事件:$("#id").click(function(){});
2)双击事件:$("#id").dblclick(function(){});
3)鼠标移入事件:$("#id").mouseenter(function(){});
4)鼠标移出事件:$("#id").mouseleave(function(){});
5)鼠标按键按下事件:$("#id").mousedown(function(){});
6)鼠标按键弹起事件:$("#id").mouseup(function(){});
7)鼠标悬停事件:$("#id").hover(function(){},function(){}); 第一个为鼠标移入事件,第二个为鼠标移出事件 ---常用于移入显示,移出时隐藏某个元素
8)元素获得焦点事件:$("#id").focus(function(){});
9)元素失去焦点事件:$("#id").blur(function(){}); 常用于表格或者表单的选择变色(显眼)
3、显示和隐藏元素
1、语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
两个可选参数:
speed:此参数可以规定 显示和隐藏的速度,取值可以是:”slow“、”fast“、”毫秒“
callback:动作完成后要执行的函数
例:
$("button").click(function(){
$("p").hide(1000);
});2、切换显示和隐藏 toggle
$("button").click(function(){
$("p").toggle();
});点击显示、再点击为隐藏.
$(selector).toggle(speed,callback);
jQuery是一个JavaScript库,可以极大的简化前端的JavaScript编程,并且很容易学习。
jQuery可以通过很一行很简单的代码,标记到网页中使用。
二、jQuery的库包:
1、HTML元素选取
2、HTML元素操作
3、CSS操作
4、HTML事件函数
5、JavaScript特效和动画
6、HTML DOM 的遍历和修改
7、AJAX
8、Utilities
9、除以上外,jQuery还有大量的插件
三、安装(使用)
jQuery是一个库包,也就是一个JavaScript的文本文件。将其引入即可使用。
1、下载后引入
使用本机的目录地址引用:
<head>
<scripttype="text/javascript" src="/jquery-1.10.2.min.js"></script>
</head>
2、通过网络CDN地址引用:这种方法会好一点,因为不会占用服务器资源,并且能保存缓存。
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery,按这些地址引用即可。
Baidu CDN:
http://libs.baidu.com/jquery/1.10.2/jquery.min.js
又拍云 CDN:
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
新浪 CDN:
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
Google CDN:
Microsoft CDN:
谷歌和微软的会被墙,最好是用国内的前三个。四、jQuery语法
通过jQuery,可以自由选取、查询HTML中的元素(标签),并对“它们”执行操作。
1、基础语法:
$(selector).action()-------$符号为定义jQuery,selector为选择符,action为要做的动作.。
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有p段落
$("p .test").hide() - 隐藏所有 class="test" 的p段落
$("#test").hide() - 隐藏所有 id="test" 的元素
2、文档就绪事件
jQuery的所有函数都要处在一个就绪函数里:
$(document).ready(function(){
//
jQuery methods go here...
});
意思是,优先将jQuery文件加载完成,在进行jQuery的其他方法。
还可以使用简洁的写法:
$(function(){
//
jQuery methods go here...
});
五、jQuery选择器。
使用jQuery的选择器,可以很方便的选择到HTML的单个元素或元素组(tag、class、id、name...),它基于已存在的CSS选择器,另外还有一些自定义的选择器。
1、标签选择器: $("tag")
2、id选择器: $("#id")
3、class选择器:$(".class")
六、jQuery事件
jQuery的重点在 事件处理。
1、常见的DOM事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
在jQuery中,大多数DOM事件都有一个等效的方法
1)单击事件:$("#id").click(function(){});
2)双击事件:$("#id").dblclick(function(){});
3)鼠标移入事件:$("#id").mouseenter(function(){});
4)鼠标移出事件:$("#id").mouseleave(function(){});
5)鼠标按键按下事件:$("#id").mousedown(function(){});
6)鼠标按键弹起事件:$("#id").mouseup(function(){});
7)鼠标悬停事件:$("#id").hover(function(){},function(){}); 第一个为鼠标移入事件,第二个为鼠标移出事件 ---常用于移入显示,移出时隐藏某个元素
8)元素获得焦点事件:$("#id").focus(function(){});
9)元素失去焦点事件:$("#id").blur(function(){}); 常用于表格或者表单的选择变色(显眼)
3、显示和隐藏元素
1、语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
两个可选参数:
speed:此参数可以规定 显示和隐藏的速度,取值可以是:”slow“、”fast“、”毫秒“
callback:动作完成后要执行的函数
例:
$("button").click(function(){
$("p").hide(1000);
});2、切换显示和隐藏 toggle
$("button").click(function(){
$("p").toggle();
});点击显示、再点击为隐藏.
$(selector).toggle(speed,callback);
相关文章推荐
- jQuery 学习笔记二
- jquery easyui树的简答构造+动态生成js全局变量
- jQuery实现的Div窗口震动效果实例
- jQuery实现时尚漂亮的弹出式对话框实例
- jquery post error
- jQuery基础DOM和CSS操作
- jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
- jquery chosen 插件
- jQuery基于ajax实现星星评论代码
- jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)
- Jquery的提示插件 jquery.poshytip.js
- Jquery autocomplete 百度式自动填充
- 使用jQuery清空file文件域的解决方案
- jQuery实现网页抖动的菜单抖动效果
- jQuery过滤选择器
- jQuery实现高亮显示网页关键词的方法
- JQuery中$.ajax()方法参数详解
- jQuery.extend 函数详解
- jQuery实现信息提示框(带有圆角框与动画)效果
- 一个简单的jQuery插件的写法 tableUI