入口函数:$(document).ready(function(){ console.log("jquery入口函数") }) ;$(function(){ console.log("jquery入口函数") }) ;
window.οnlοad= function(){ console.log("js入口函数") } js入口函数执行比jquery入口函数执行晚;都会等待文档加载完成,jq不等待图片;
1.x版本:兼容IE678; 2.x版本:不兼容IE678; 3.x版本:不兼容IE678,更加精简;
开发环境 -- (git,svn仓库)--测试环境 --(git,svn仓库) -- 生产环境
jQuery对象不能调用DOM对象的方法;(是一个伪数组;取出来$("li")[0]) var lis = $("li");lis[0].style.backgroundColor = "red"; lis.get(0)..style.backgroundColor = "red";
DOM对象不能调用jQuery对象的方法;(需要把DOM对象转换成jQuery对象$(变量)) var dv = document.getElementById("dv); $(dv).text("hello");
修改样式:css(name,value);
$("li").css("backgroundColor":"pink");
$("li").css({backgroundColor:"red",color:"blue",fontSize:"18px",borderBottom:"1px solid #000"});
隐式迭代:设置操作的时候:会给jq内部的所有对象都设置上相同的值;获取的时候:只会返回第一个元素对应的值。
添加类:addClass; 移除类:removeClass;判断类:hasClass; 切换样式类:toggleClass;
修改属性:attr(name,value);
$("li").attr("backgroundColor":"pink");
$("li").attr({backgroundColor:"red",color:"blue",fontSize:"18px",borderBottom:"1px solid #000"});
对于布尔类型的属性,不要attr方法,应该用prop方法;
$("input").prop("checked",true);
列表全选:
$("#j_cbAll"),click(function(){
$("#j_tb input").prop("checked",$(this).prop("checked"));
});
$("#j_tb input").click(function(){
var allLength = $("#j_tb input").length;
var checkedLength = $("#j_tb input:checked").length;
if(allLength == checkedLength){
$("#j_cbAll").prop("checked", true);
}else{
$("#j_cbAll").prop("checked", false);
}
})
基本动画:显示:show(speed); show([speed],[callback]); 隐藏:hide(speed); hide([speed],[callback]);
滑入:slideUp(speed); slideUp([speed],[callback]); 滑出:slideDown(speed); slideDown([speed],[callback]); 切换:slideToggle(speed); slideToggle([speed],[callback]);
淡入:fadeIn(speed); fadeIn([speed],[callback]); 淡出:fadeOut(speed); fadeOut([speed],[callback]); 切换:fadeToggle(speed); fadeToggle([speed],[callback]);
animate:自定义动画。
$(selector).animate({params},[speed],[easing],[callback]);
params:要执行动画的css属性,带数字(必选);speed:执行动画时长;easing:执行效果,默认为swing(缓动)可以是linear(匀速)callback:动画执行完后立即执行的回调函数。
stop()方法:停止动画效果。
stop(clearQueue, jumpToEnd);
第一个参数:是否清楚队列;第二个参数:是否跳转到最终效果。
创建添加元素:
append();appendTo();prepend();prependTo(); before(); after();
清空节点与删除节点:
empty(); remove();
弹幕:
<div class="#boxDom"></div>
<textarea name="" id="txt" cols="30" rows="10"></textarea><button id="btn">发布</button>
$(function(){
var colors= ["red","green","hotpink","pink",yellow"];
$("btn").click(function(){
var randomColor = parseInt(Math.random()*colors.length);
var randomY = parseInt(Math.random() * 400)
if($("#txt").val().trim().length() ===0){return;}
$("<span></span>").text($("#text).val()).css("color",colors[randomColor]).css("left","1400px")
.css("top",randomY).animate({left:-500},10000,"linear",function(){$(this).remove();}).appendTo("#boxDom");
$("#text").val("");
})
$("#text").keyup(function(e){
if(e.keyCode == 13 ){ $("#btn").click();
})
})
val方法用于设置和获取表单元素的值,例如input/textarea的值;
$("input").val("思念"); $("input").val();
html方法与text方法:html方法相当于innerHTML(识别标签),text方法相当于innerText;
获取页面可视区宽高:
$(window).resize(function (){
$(window).width();$(window).height();
});
获取宽度:
innerWidth()=padding+width; outerWidth()=padding+width+border; outerWidth(true) = padding+width+border+margin;
scrollTop与scrollLeft:设置或者获取垂直滚动条的位置;
获取页面被卷曲的高度:$(window).scrollTop(); 获取页面被卷曲的宽度:$(window).scrollLeft();
offset();相对于doc;position()相对于有定位的父元素;
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册:
click(handler) 单击事件 ;mouseenter(handler) 鼠标进入事件 ;mouseleave(handler) 鼠标离开事件
缺点:不能同时注册多个事件
bind方式注册事件:
//第一个参数:事件类型 ;//第二个参数:事件处理程序
$("p").bind("click mouseenter", function(){ //事件响应方法 });
缺点:不支持动态事件绑定
delegate注册委托事件:给父元素注册委托事件,最终还是有由子元素来执行。
// 第一个参数:selector,要绑定事件的元素
// 第二个参数:事件类型
// 第三个参数:事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点:只能注册委托事件,因此注册时间需要记得方法太多了
on注册事件:
jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
on注册简单事件:
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件:
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",“span”, function() {});
on注册事件的语法:
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
$(selector).on(events[,selector][,data],handler);
事件解绑
unbind方式(不用)
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate方式(不用)
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off方式(推荐)
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
触发事件:
$(selector).click(); //触发 click事件
$(selector).trigger("click");
jQuery事件对象:
jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置(忽视滚动条)
//pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡,又能阻止浏览器默认行为。
delay设置延时来推迟执行;
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height: 60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//给li注册鼠标进入事件,让li下面的span top:0 播放音乐
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top: 0});
//播放音乐
var idx = $(this).index();
$(".nav audio").get(idx).load();
$(".nav audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top: 60});
});
//节流阀 :按下的时候,触发,如果没弹起,不让触发下一次
//1. 定义一个flag
var flag = true;
//按下1-9这几个数字键,能触发对应的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//弹起的时候,触发mouseleave事件
});
</script>
<div class="nav">
<ul><li><a href="javascript:void(0);">导航1</a><span></span></li>
<li><a href="javascript:void(0);">导航2</a><span></span></li>
<li><a href="javascript:void(0);">导航3</a><span></span></li>
<li><a href="javascript:void(0);">导航4</a><span></span></li>
<li><a href="javascript:void(0);">导航5</a><span></span></li>
<li><a href="javascript:void(0);">导航6</a><span></span></li>
<li><a href="javascript:void(0);">导航7</a><span></span></li>
<li><a href="javascript:void(0);">导航8</a><span></span></li>
<li><a href="javascript:void(0);">导航9</a><span></span></li> </ul>
<div><audio src="mp3/1.ogg"></audio><audio src="mp3/2.ogg"></audio>
<audio src="mp3/3.ogg"></audio><audio src="mp3/4.ogg"></audio>
<audio src="mp3/5.ogg"></audio><audio src="mp3/6.ogg"></audio><audio src="mp3/7.ogg"></audio><audio src="mp3/8.ogg"></audio><audio src="mp3/9.ogg"></audio>
链式编程:
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。
each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。
作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){});
$("li").each(function(index,element){
$(element).css("opacity","(index+1)/10");
})
多库共存
jQuery使用$作为标示符,但是如果与其他框架中的$冲突时,jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c
jquery.color.js 可以支持颜色的渐变。animate不支持颜色的渐变。$("div").animate({ backgroundColor:"#ffc0cb"},1000);十六进制
jquery.lazyload.js 懒加载
<img class="lazy" data-original = "img/example.png" alt="">
$("img.lazy").lazyload();
jquery插件: jquery.prototype === $.fn
$.fn.bgColor = function(color){ this.css("backgroundColor",color); return this; };