【整理】jQuery知识点1

原创 2016年06月01日 15:03:25
★★★ ============================================================= 页面加载顺序
1、css外部文件 放在head标签之间和body标签之间效果一样


2、js dom对象的获取一定要在该dom元素加载之后,不然报错变量名undefined,可以放在body结束标签之前,但是为了阅读方便一般把它放在head标签之间,并加入事件
document.addEventListener("DOMContentLoaded", function(){}, false);  或者
window.addEventListener( "load", completed ); 或者jQuery中的
$(document).ready(function(){}; 等价于
$(function(){}); //至于为什么等价,源码中很清楚,本方法传入jQuery对象的参数是一个function,
后面还是调用的ready方法。


3、如果js外部文件声明在head标签之间,那么会先加载完成js文件,再加载body及其之间的dom元素,不会出现dom树已经加载完,js文件还未加载完,这是个很重要的认识,必须证明一下,下面是我自己的证明方法,在随便一个js文件,随便一个可执行的位置(不能是function),哪怕是js框架的最末端,加入一句话
alert(document.body),它一定会弹出null,因为并没有加载到body,这就说明了head标签之间的js文件一定先加载完成。


4、至于用document.addEventListener("DOMContentLoaded", function(){}, false); 还是用
window.addEventListener( "load", function(){});我个人喜欢都用或只用前者,jQuery的机制是使用前者,源码中同时声明了这两个事件,并且任何一个执行都会首先删除这两个事件,这就说明不会都执行,经过测试,试了好多遍,发现它一定会首先执行前者,然后执行后者,即使没有图片等资源需要加载。至于为什么都用,我只能说他能满足我的一些极个别的特殊构造,加快执行效率,可以让它在图片加载完成前先做一些事情,而后面的一些事情只能图片等资源加载完全之后。


★★★ ============================================================= jQuery 选择器
1、元素选择器
在页面中选取所有 <p> 元素:
$("p")


2、#id 选择器
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
$("#test")


3、.class 选择器
语法如下:
$(".test")
用户点击按钮后所有带有 class="test" 属性的元素都隐藏:


$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$(".test:first") 选取class 为 test 的第一个元素
$("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> 元素


★★★ ============================================================= jQuery 与 dom 对象互转
$("#id1") 这是一个jQuery对象
$("#id1")[0]  这是一个dom对象
$("#id1").context 这是一个dom对象,与楼上等价
var a = document.getElementById("a"); //dom对象
var jq = $(a); //jq对象


★★★ ============================================================= jQuery 事件
jQuery 是为事件处理特别设计的。


jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click(function(){});


常用的 jQuery 事件方法
click(function(){})    该函数在用户点击 HTMl 元素时执行。
dblclick(function(){})
mouseenter(function(){})
mouseleave(function(){})
mousedown(function(){})
mouseup(function(){})
hover(function(){},function(){}) 当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
focus(function(){})
blur(function(){})


★★★ ============================================================= jQuery 效果- 隐藏和显示
jQuery hide() 、 show() 、toggle()
语法:
$(selector).hide(speed,callback);     隐藏
$(selector).show(speed,callback);     显示
$(selector).toggle(speed,callback);   切换


★★★ ============================================================= jQuery 效果 - 淡入淡出
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()


jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
实例:
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});


jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
实例
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});


jQuery fadeToggle() 方法
语法:
$(selector).fadeToggle(speed,callback);
实例
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});


jQuery fadeTo() 方法
语法:
$(selector).fadeTo(speed,opacity,callback);
实例
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});


★★★ ============================================================= jQuery 效果 - 滑动
jQuery 滑动方法
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()


jQuery slideDown() 方法
语法:
$(selector).slideDown(speed,callback);
实例
$("#flip").click(function(){
  $("#panel").slideDown();
});


jQuery slideUp() 方法
语法:
$(selector).slideUp(speed,callback);
实例
$("#flip").click(function(){
  $("#panel").slideUp();
});


jQuery slideToggle() 方法
语法
$(selector).slideToggle(speed,callback);
实例
$("#flip").click(function(){
  $("#panel").slideToggle();
});


★★★ ============================================================= jQuery 效果 - 动画
jQuery 动画 - animate() 方法
语法:
$(selector).animate({params},speed,callback);
实例
$("button").click(function(){
  $("div").animate({left:'250px'});
}); 


jQuery animate() - 操作多个属性
实例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 


jQuery animate() - 使用相对值
实例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 


jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
实例
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});


jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
实例 1
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
}); 


实例 2
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
}); 


★★★ ============================================================= jQuery 停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
实例
$("#stop").click(function(){
  $("#panel").stop();
});


★★★ ============================================================= jQuery Callback 方法
Callback 函数在当前动画 100% 完成之后执行。


jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。


实例
以下实例在隐藏效果完全实现后回调函数:
使用 callback 实例
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});


以下实例没有回调函数,警告框会在隐藏效果完成前弹出:
没有 callback(回调)
$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});


★★★ ============================================================= jQuery Chaining
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
版权声明:本文为博主原创文章,未经博主允许不得转载。

web前端知识点整理

一,html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1....
  • wcr19910118
  • wcr19910118
  • 2014年12月19日 00:02
  • 370

计算机网络重要知识点总结 面试必备

计算机网络常见面试题总结 1.      OSI,TCP/IP,五层协议的体系结构 OSI分层(7层):物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 TCP/IP分层(4层):网...
  • u011225629
  • u011225629
  • 2015年04月23日 17:20
  • 2625

Storm基本知识总结

Storm是一个开源的分布式实时计算系统,可以简单、可靠的处理大量的数据流。Storm的部署和运维都很便捷,而且更为重要的是可以使用任意编程语言来开发应用...
  • fish9164
  • fish9164
  • 2016年09月09日 15:09
  • 396

各种数据结构的知识点归纳

各种数据结构 By SemiWaker
  • semiwaker
  • semiwaker
  • 2017年03月14日 09:02
  • 322

iOS知识点大总结

本文文章转载于:http://blog.csdn.net/liaoyp_ios_android/article/details/9282201#rd [objc] view plainc...
  • a787188834
  • a787188834
  • 2014年10月23日 14:49
  • 1039

iOS学习笔记-----常用知识点总结

1.id与instanncetypeid 与 instancetype 区别 1.id 可以当返回值类并且可以声明对象 2.instancetype 只可以当返回值类型 3.instanc...
  • czzj0212
  • czzj0212
  • 2016年04月19日 20:28
  • 417

Mybatis复习整理

Mybatis 知识点整理,有些问题不是不会,也不是不懂,只是没有见过!
  • fangdengfu123
  • fangdengfu123
  • 2017年03月16日 15:34
  • 348

刘汝佳训练指南——数论专题知识点总结:

数论是一个神奇的东西,各种结论都很经典,有些懂,有些自己还不是很懂。接下来就一个一个的介绍吧。第一、素数,素数本身就是一个很让人惊奇的数,因为它代表的是唯一,自己就有连个因数,一个是1,一个是自己,因...
  • bobodem
  • bobodem
  • 2015年10月24日 16:33
  • 555

离散数学知识点整理

1. 群满足如下条件的二元运算的代数结构 满足封闭性 有单位元 有逆元 满足结合律 2. 阿贝尔群(交换群或加群)它除了满足一般的群公理,即: 运算的结合律 满足封闭性 有单位元 所有的元素都有逆元...
  • violet_echo_0908
  • violet_echo_0908
  • 2016年05月18日 22:37
  • 1382

线性代数知识汇总

1.  线性代数知识图谱 线性代数是代数学的一个分支,主要处理线性关系问题。线性关系意即数学对象之间的关系是以一次形式来表达的。例如,在解析几何里,平面上直线的方程是二元一次方程;空间平面的方程是三元...
  • MyArrow
  • MyArrow
  • 2016年11月27日 16:27
  • 2412
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】jQuery知识点1
举报原因:
原因补充:

(最多只允许输入30个字)