jquery笔记整理
01-jquery简介
1)功能:
·html元素选取
·Html元素操作
·Css操作
·Html事件函数
·JavaScript特效和动画
·DOM的遍历及修改
·AJAX
·Utilities
·插件
2)版本支持
·jquery2 及以上不支持IE6,7,8
·使用注释:
·<!--[if lt IE 9]>
·<script src="Script/jquery-1.9.0.js"></script>
·<![endif]-->
·<!--[if gte IE 9]><!-->
·<script src="Script/jquery-2.0.0.js"></script>
·<!--<![endif]-->
3)版本
·Production version:实际网站,压缩版
·Development Version:测试和开发,未压缩
4)引用:
文件类型:xxx.js
·<script src="xxx.js"></script>
·CDN(内容分发网络)引用
·<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
--CDN:
https://baike.baidu.com/item/CDN/420951?fr=aladdin
常用CDN引用:
1、谷歌
<script src="http://ajax.googleapis.com/ajax/1ibs/jquery/1.10.2/jquery.min.js">
</script>
2、微软
<script src="http://ajax.Microsoft.com/ajax/jquery/jquery/1.10.2/jquery.min.js">
</script>
使用百度、又拍云、新浪、谷敌或微软的jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。
所有结果是,当他们访问您的站点时,会从缓存中加载jQuery,这样可以减少加载时间。
同时,大多数CDN都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,
这样也可以提高加载速度。
02-jquery语法
1)步骤:
$(selector).action();
·$:jquery
·查询:selector
·操作: action
2)选择器:Xpath(xml中的查询信息的语言)+CSS
$(this).hide();
$("p").hide();
$("p.test").hide();
$("#test").hide();
3)文档就绪事件:
//文档加载完执行方法
$(document).ready(function(){
});
$(function(){
});
03-jquery选择器
1)HTML
1、元素
2、id
3、class
2)CSS
$("p").css("background","red");
3)more
$("*") --选取所有元素
$(this) --选取当前htnl元素
$("p.td") --选取class为td的p元素
$("p:first")--选取第一个p元素
$("ul li:first")--选取第一个ul li元素
$("ul li:first-child")选取每个ul的第一个li元素
$("[href]") --选取带有href属性的元素
$("a[target='_blank']")--选取所有target属性为"_blank"的a元素
$("a[target!='_blank']")--选取所有target属性不为"_blank"的a元素
$(":button")--选取所有type="button"的input元素和button元素
$("tr:even")--选取偶数位置的tr元素
$("tr:odd")--选取奇数位置的tr元素
4)独立文件内引用jquery函数
04-jquery事件
1)dom事件对应的Jquery事件
2)常见事件:
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
3)比较keypress、keydown与keyup
·keydown: 在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
·keypress: 在键盘上按下一个按键,并产生一个字符时发生,返回ASCII码。
注意:shift、alt、ctrl等键按下并不会产生字符,所以监听无效,
换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
·keyup: 用户松开某一个按键时触发,与keydown相对,返回键盘代码。
05-jquery效果-01隐藏显示及切换
1)隐藏和显示,切换
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//$(selector)选中的元素为n,callback执行n次
//callback可以是函数名,也可以是匿名函数
//callback函数名后加括号,函数会立即执行,而不是完成显示隐藏后执行
可选参数speed为显示速度
取值:slow,fast,毫秒
可选参数callback是隐藏或显示或切换后执行的函数名称
例:$("p").hide(1000,function(){
$(p).show();
});
05-jquery效果-02淡入淡出
1)淡入淡出函数
·fadeIn()--淡入
·fadeOut()--淡出
·fadeToggle()--如果淡入,则淡出,反之。
·fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);--speed,opacity为必选参数
05-jquery效果-03滑动
1)滑动函数
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);--在slideUp,slideDown之间切换
--没有注明都为可选参数
05-jquery效果-04动画
1)animate简介
--用于创建自定义动画
--语法:
$(selector).animate({params},speed,callback);
--params为必选参数,定义了形成动画的CSS属性
$(selector).animate({styles,speed,easing,callback);
--easing为内置函数
取值:swing,liner
$(selector).animate(styles,options);
--options为规定动画的额外选项
可能的值:
·speed-设置动画的速度
·easing-规定要使用的easing 函数
·callback-规定动画完成之后要执行的函数·step-规定动画的每一步完成之后要执行的函数
·queue-布尔值。指示是否在效果队列中放置动画。如果为false,则动画将立即开始
·specialEasing-来自styles参数的一个或多个CSS属性的映射,以及它们的对应 easing函数
//默认情况下html都有一个静态的位置,设置位置时要相对于CSS设置,如设置子属性
//父级relative,子absolute
//params可以为多个属性,逗号隔开
--animate可以所有的css属性,必须使用Camel命名属性名,如paddingLeft,marginLeft
--如果要生成颜色动画,jquery提供了Color Animations插件
--只有数字值可创建动画(margin:30px),字符串无法创建动画(background:red)
2)animate()使用相对值
+=,-= --创建相对动画,相对于元素的当前值改变
例:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
3)animate()使用预定义的值
show,hide,toggle
例:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
4)animate()使用队列功能
例:
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'});
div.animate({width:'300px',opacity:'0.8'});
div.animate({height:'100px',opacity:'0.4'});
div.animate({width:'100px',opacity:'0.8'});
});
});
</script>
05-jquery效果-05停止动画
1)stop()
语法:
$(selector).stop(stopAll,goToEnd);
--可选参数stopAll规定是否清除动画队列,默认为false
--可选参数goToEnd规定是否立即完成当前动画,默认为false
--
05-jquery效果-06callback方法
1)
callback函数在当前动画完成后执行。
//JavaScript代码是逐条执行的通过传参执行函数可以避免动画
//效果冲突。
例:
有回调函数
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
});
</script>
无回调函数
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("现在段落被隐藏了");
});
});
</script>
05-jquery效果-07Chaining方法
1)chaining方法
--允许我们一条语句中执行多个jquery方法(相同元素上)
--jquery方法链接
--即将多个动作函数链接起来执行
例:
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
书写格式:(厉害!!!)
//jquery会舍弃多余的空格,当成一句去执行
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
jquery笔记整理的更多相关文章
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- python学习笔记整理——字典
python学习笔记整理 数据结构--字典 无序的 {键:值} 对集合 用于查询的方法 len(d) Return the number of items in the dictionary d. 返 ...
- 从0开始学Swift笔记整理(五)
这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...
- Deep Learning(深度学习)学习笔记整理系列之(五)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- 学习ReactNative笔记整理一___JavaScript基础
学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...
- Deep Learning(深度学习)学习笔记整理系列之(八)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(七)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
随机推荐
- SpringBoot系列——Redis
前言 Redis是一个缓存.消息代理和功能丰富的键值存储.StringBoot提供了基本的自动配置.本文记录一下springboot与redis的简单整合实例 官方文档:https://docs.sp ...
- 第66章 视频 - Identity Server 4 中文文档(v1.0.0)
第66章 视频 66.1 2019 January [NDC] - 使用ASP.NET Core 2.2和3.0保护Web应用程序和API 1月[NDC] - 为基于OpenID Connect / ...
- revit融合
解决了嵌入部分也会布置砖胎膜或土方问题 1.需根据板往相应方向拉伸,创建拉伸体(非实例) 2.根据轮廓创建融合体 3.将两个物体融合 //创建平面 //创建草图平面,文档必须是族文档 Plane pl ...
- Tomcat的常用内置对象
Tomcat的常用内置对象 1.request内置对象 所谓内置对象就是容器已经创建好了的对象,如果收到一个用户的请求就会自动创建一个对象来处理客户端发送的一些信息,这个内置对象就是request.类 ...
- PHP的简单跳转提示的实现
在PHP开发中,尤其是MVC框架或者项目中,会碰到很多跳转情况,比如:登录成功或失败后的跳转等等. 以下以MVC框架开发中为基础,示例讲解: 在基础控制器类中:Conrtoller.class.php ...
- SAP MM 采购ERP顾问咨询费限制总金额的框架协议实现方案
SAP MM 采购ERP顾问咨询费限制总金额的框架协议实现方案 [业务场景] 采购部门与ERP咨询公司签订了一个框架协议,只规定不同级别顾问的人天费用,不限定这些不同级别咨询顾问的具体采购的人天数,但 ...
- Dynamics 365-关于BPF的进一步探究
关于BPF是什么,以及如何在CRM中配置BPF,可以参阅熊宸大神的博客Dynamics 365 Business Process Flow -- 让你不再惧怕复杂的业务流程! 1. CRM中发生了什么 ...
- 解决Geoserver请求跨域的几种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题.不同前端语 ...
- ZOJ 2480 - Simplest Task in Windows
Simplest Task in Windows Time Limit: 2 Seconds Memory Limit: 65536 KB A typical windows platfor ...
- WEB框架-Django框架学习(二)- 模型层
今日份整理为模型层 1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库, ...