入口函数
原生JS
window.onload():只能出现一次，在dom元素、图片和外部资源都加载完成的时候才会调用
jquery入口函数
$(document).ready()和$():文档加载完毕，但是图片没有加载完毕
$(window).ready():文档和图片加载完毕的时候
jquery的入口函数可以出现多次，不会出现事件覆盖
DOM元素和JQuery对象
//原生
var nativeTagBox = document.getElementsByTagName("div");
var nativeClassBox = document.getElementsByClassName("box");
var nativeIdBox = document.getElementById("box");
console.log(nativeTagBox);
console.log(nativeClassBox);
console.log(nativeIdBox);
//jquery
var jqTagBox = $("div");
var jqClassBox = $(".box");
var jqIdBox = $("#box");
console.log(jqTagBox);
console.log(jqClassBox);
console.log(jqIdBox);
- 无论什么方式获取的jquery获取的对象都是数组，数组中包含原生js的DOM对象，也就是说jsDOM元素只是jquery的一部分。
- jquery获取的DOM在原生jsDOM的基础上包装了一些东西而已
js转jquery
$(nativeIdBox);//用$包裹一层原生DOM就转化成jquery对象
jquery转成js
console.log(jqIdBox[0]);//从数组中取
console.log(jqIdBox.get(0));//调用get方法
选择器
基本选择器
$("div");//标签
$(".box");//类名
$("#box");//id
层级选择器
//后代选择器(只要后代中有li都会设置)
$("ul li").html("1111231231231");
//自带选择器(必须是他的儿子才能设置)
$("ul>li").html("1111231231231");
基本过滤选择器
//even:从0开始索引值是偶数
$("ul li:even").css("background-color","red");
//odd:从0开始索引值是奇数
$("ul li:odd").css("background-color","blue");
//eq:传入索引，如果是负数就从后面开始找
$("ul li:eq(-3)").css("backgroundColor","green");
筛选选择器
//find:筛选所有后代元素查找指定元素，必须指定参数
$("ul").find("span").css("background-color","pink");
//children:筛选所有子代指定元素
$("ul").children("a").css("background-color","gray");
//eq:查找前面对象中所有元素中索引值的元素
$("ul").children().eq(1).css("background-color","gray");
//prev:当前元素的上一个兄弟元素
$("ul").find("a").prev().css("background-color","gray");
//prevAll:当前元素前面所有元素
console.log($("ul").find("a").prevAll());
//next:当前元素的下一个兄弟元素
$("ul").find("a").next().css("background-color","gray");
//nextAll:当前元素后面所有元素
console.log($("ul").find("a").prevAll());
//siblings:当前元素的除自己之外的素有兄弟元素
$("ul").find("a").siblings().css("background-color","gray");
//parent:父亲元素
$("ul").find("a").parent().css("background-color","gray");
样式操作
直接通过CSS方法操作
// css(json);
$("div").css({"width":100,"height":100,"background-color":"red"});
// css(两个参数：方法和值)
$("div").css("background-color","pink");
// css(一个参数：属性值，获取属性）,带单位
console.log($("div").css("width"));
类操作
- 添加类
//添加类（原生js就是className = 'box'）
$("div").eq(0).mouseover(function () {
$("div").eq(1).addClass("box");
});
- 移除类
//移除类
$("div").eq(0).mouseout(function () {
$("div").eq(1).removeClass("box");
})
- 切换类
//切换类（toggle）
$("div").eq(1).toggleClass("box");
- 判断是否有类名
//判断是否有类名
console.log($("div").eq(0).hasClass("box"));
动画
- 显示和隐藏:show，hide ,toggle(切换显示和隐藏)
//不带参数
$("#show").click(function () {
$(".box").show();//毫秒值
});
//毫秒值（通过宽高，透明度，dispay控制动画）
$("#show").click(function () {
$(".box").show(1000);//毫秒值
});
//字符串，slow大概600毫秒值 normal大概400毫秒 fast大概是200毫秒
$("#show").click(function () {
$(".box").show("fast");
});
//回调函数
$("#show").click(function () {
$(".box").show("fast",function() {
alert("1");//动画完成
});
});
- 滑入滑出：slideUp，slideDown
//滑入滑出(通过控制高度和display)
$("#slideUp").click(function () {
$(".box").slideUp();//也可以传参数，毫秒值，字符串，回调函数
});
$("#slideDown").click(function () {
$(".box").slideDown();
});
//滑入滑出切换
$("#slideToggle").click(function () {
$(".box").slideToggle();
});
- 淡入淡出
//淡入淡出(通过控制透明度和display)
$("#fadeIn").click(function () {
$(".box").fadeIn();//也可以穿参数，毫秒值，字符串，回调函数
});
$("#fadeOut").click(function () {
$(".box").fadeOut();
});
//淡入淡出切换
$("#fadeToggle").click(function () {
$(".box").fadeToggle();
});
//改透明度(从当前的透明度变到给定的透明度，再规定时间内)
$("#fadeTo").click(function () {
$(".box").fadeTo(1000,0.5)//必须给时间
});
- 自定义动画
//自定义动画：第一个参数json,第二个参数毫秒值，第三个参数回调函数
$("#animate").click(function () {
$(".box")
.animate({"width":100},1000)
.animate({"height":100},1000)
.animate({"width":400},1000)
.animate({"height":400},1000);
});
- 停止动画
//第一个参数代表后续动画是否需要执行，true代表后续动画不执行，
//第二个参数代表当前动画是否执行完毕，true代表当前动画执行完毕再停止
$("#stop").click(function () {
$(".box").stop(true,true);
});
节点操作
动态创建jquery对象
/**
* 动态创建Jquery对象
*/
//方法一(类比于createElement)
console.log($("<div>我是创建出来的</div>"));
//方法二（类比于innerHTML,识别标签）,创建出来并添加到ul上
$("ul").html("<li>我是html创建出来的</li>");
添加、删除、复制元素
/**
* 添加元素
*/
var newLi = $("<li>添加的li</li>");
//append（添加与被添加是父子关系）
$("ul").append(newLi);//用append添加，从后追加
newLi.appendTo($("ul"));//把新创建的li塞进ul中
//prepend（添加与被添加是父子关系）
$("ul").prepend(newLi);//prepend，从头追加
newLi.prependTo($("ul"));
//after（添加与被添加是兄弟关系）
$("li").after(newLi);//在当前元素的后面添加元素
//before（添加与被添加是兄弟关系）
$("li").before(newLi);//在当前元素的前面添加元素
/**
* 删除和清空元素
*
*/
//清空里面所有子元素(保留自己)：方法一
$("ul").html("");
//清空里面所有子元素(保留自己)：方法二
$("ul").empty();
//删除指定元素：删除自己(自杀)
newLi.remove();
/**
* 复制元素
*/
$("ul").append(newLi.clone());
属性操作
attr、prop
/**
* attr和prop，用法类比oc存取方法
* prop多用来影响DOM的动态属性，例如表单中的checked、selected、disabled
*
*
*/
//绑定属性
$("input").attr("aaa",111);//对没有的属性绑定，对已有的属性就是设置
$("button").eq(0).click(function () {
console.log($("input").attr("aaa"));//获取属性
});
//移除属性
$("button").eq(1).click(function () {
$("input").removeAttr("aaa");//移除
console.log($("input").attr("aaa"));
});
val():表单value值
//val()：设置获取表单元素返回的值，例如input,select,textarea
console.log($("input").val());//获取inut标签的值p
$("button").eq(2).click(function () {
$("input").val("我是新设置的value值");
console.log($("input").val());
});
text()、html()
//text()：设置获取文本内容，类比innerText
//html()：类比innerHTML
console.log($("div").text());//获取文本内容
$("button").eq(3).click(function () {
$("div").eq(0).text("我是新设置的文本内容");
});
坐标值操作
width、height
//width和height与js中的offset scroll，client都不一样，只是获取宽高，跟magin padding border都没关系
//获取宽高没单位
console.log($(".div2").width());
console.log($(".div2").height());
//设置宽高
$(".div2").width(200);
$(".div2").height(200);
offset、position
//设置或者获取元素相对于文档的left和top,无论当前盒子是否有定位，无论父盒子是否有定位，都是相对文档的left和top
console.log($(".div2").offset());//获取
//设置，如果通过jquery设置了offset，那么会默认让当前元素设置为相对定位(relative)
$(".div2").offset({left:100,top:100});
//获取距离当前盒子最近的带有定位的父盒子的位置，只能获取不能设置
console.log($(".div2").position());//基本就是获取css设置的position的left和top
scroll
//scrollTop,scrollLeft和原生js的scroll一样，可以设置也可以获取
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
事件机制
绑定事件
/**
* 绑定事件
*/
//第一种绑定事件,并且不会被覆盖
$(document).click(function () {
alert("1");
});
$(document).click(function () {
alert("2");
});
//第二种绑定,可以绑定多个事件，也不会被覆盖
$(document).bind("click mouseover",function () {
alert("1");
});
$(document).bind("click mouseover",function () {
alert("2");
});
//第三种delegate，用父盒子绑定里面子盒子的事件,可以绑定多个事件,也不会被覆盖
//第一个参数：子元素，第二个参数：事件名
$(document).delegate("div","click mouseover",function () {
alert("1");
});
$(document).delegate("div","click mouseover",function () {
alert("2");
});
//第四种on,用的最多
//第一个参数：事件名，第二个参数：子元素 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
$(document).on("click mouseover","div",{"name":"aaa"},function (event) {
alert(event.data.name);
});
$(document).on("click mouseover","div",{"name":"bbb"},function (event) {
alert(event.data.name);
});
解绑事件
//解绑 unbind/undelegate/off分别对应后三种绑定
//第一个参数是事件名，第二个参数元素，第三个参数事件函数名
$(document).off("click","div");//把所有的div下的click事件都解绑
事件触发
/**
* 事件触发
*/
//正常情况下都是用户触发事件
$(document).on("click mouseover",function () {
alert("页面被点击了");
});
//手动触发事件:方式一
$(document).click();
$(document).mouseover();
//手动触发事件：方法二(触发浏览器默认行为)
$(document).trigger("click");
$(document).trigger("mouseover");
//手动触发事件：方法三(不触发浏览器默认行为)，比如文本框获取焦点行为就是浏览器的默认行为
//也就是只执行程序，但是不会触发事件，而trigger即执行了程序又触发了事件
$(document).triggerHandler("click");
事件对象
/**
* 事件对象event
*/
$(document).on("click",{"name":"hahaha"},function (event) {
console.log(event.data); //传递给事件处理程序的额外数据
console.log(event.currentTarget); // 等同于this，当前DOM对象
console.log(event.pageX); // 鼠标相对于文档左部边缘的位置
console.log(event.target); // 触发事件源，不一定===this
console.log(event.stopPropagation()); // 阻止事件冒泡
console.log(event.preventDefault()); // 阻止默认行为
console.log(event.type); // 事件类型：click，dbclick…
console.log(event.which); // 鼠标的按键类型：左1 中2 右3
console.log(event.keyCode); // 键盘按键代码
});
其他
each:虽然jquery有隐式迭代，但是有些情况也需要迭代
//为每一个元素匹配一个回调函数
var liArr = $("ul li");
liArr.each(function (index,element) {
liArr.eq(index).css("opacity", parseFloat((index + 1) / liArr.length));
console.log(element);//这个元素是原生jsDom对象，不是jquery对象
element.innerHTML = index + 1;
});
});
多库共存
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//打印版本号。
console.log($.fn.jquery);//1.11.1
//让1.11.1放弃$的使用权
$.noConflict();//放弃一个使用权
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
//放弃两个符号的使用权，同时定义一个新的使用权
var newJquery = $.noConflict(true);//放弃两个版本$的使用权
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
console.log(newJquery.fn.jquery);
});
</script>
插件
<script src="jquery-1.11.1.js"></script>
<script src="jquery.color.js"></script>
<script src="jquery.lazyload.min.js"></script>
<!--自定义插件-->
<script src="jquery.custom.js"></script>
<script>
$(function () {
//插件之color
$("button").eq(0).on("click",function () {
//background-color不支持，可以用插件让支持
$(".colorDiv").animate({"background-color":"red","width":"200"},2000,function () {
alert("动画结束");
});
});
//插件之懒加载
//使用插件：
// 1.引包。(必须在jquery之下)
// 2.通过调用方法实现功能，而参数的不同，功能也可能不同。
$("img.lazy").lazyload();
});
//自定义插件
$("button").on("click",function () {
$("button").setColorRed();
});
</script>
