jQuery是一个快速、简洁的JavaScript框架。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery 处理了js的兼容性
jq库的引入方式和外部js文件一致
写jquery 代码的时候 写成jQuery $
window.jQuery = window.$ = jQuery;
一.选择器
jquery 选择器支持所有的cs1-cs3选择器
jquery 如何选择dom元素 获取dom元素返回集合类型
基本选择器
可以根据标签名，ID名，class类名称获取
<button id="btn" class="btnlist">按钮</button>
<button id="btn1" class="btnlist"><span>按钮</span></button>
<p>123</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
console.log($()); //init__proto__: Object(0)add: ƒ ( selector, context )addBack: ƒ ( selector )addClass: ƒ ( value )after: ƒ ()ajaxComplete: ƒ ( fn )ajaxError: ƒ ( fn )ajaxSend: ƒ ( fn )ajaxStart: ƒ ( fn )ajaxStop: ƒ ( fn )ajaxSuccess: ƒ ( fn )andSelf: ƒ ( selector )animate: ƒ ( prop, speed, easing, callback )append: ƒ ()appendTo: ƒ ( selector )attr: ƒ ( name, value )before: ƒ ()bind: ƒ ( types, data, fn )blur: ƒ ( data, fn )change: ƒ ( data, fn )children: ƒ ( until, selector )clearQueue: ƒ ( type )click: ƒ ( data, fn )clone: ƒ ( dataAndEvents, deepDataAndEvents )closest: ƒ ( selectors, context )constructor: ƒ ( selector, context )contents: ƒ ( until, selector )contextmenu: ƒ ( data, fn )css: ƒ ( name, value )data: ƒ ( key, value )dblclick: ƒ ( data, fn )delay: ƒ ( time, type )delegate: ƒ ( selector, types, data, fn )dequeue: ƒ ( type )detach: ƒ ( selector )domManip: ƒ ( args, table, callback )each: ƒ ( callback, args )empty: ƒ ()end: ƒ ()eq: ƒ ( i )error: ƒ ( data, fn )extend: ƒ ()fadeIn: ƒ ( speed, easing, callback )fadeOut: ƒ ( speed, easing, callback )fadeTo: ƒ ( speed, to, easing, callback )fadeToggle: ƒ ( speed, easing, callback )filter: ƒ ( selector )find: ƒ ( selector )finish: ƒ ( type )first: ƒ ()focus: ƒ ( data, fn )focusin: ƒ ( data, fn )focusout: ƒ ( data, fn )get: ƒ ( num )has: ƒ ( target )hasClass: ƒ ( selector )height: ƒ ( margin, value )hide: ƒ ( speed, easing, callback )hover: ƒ ( fnOver, fnOut )html: ƒ ( value )index: ƒ ( elem )init: ƒ ( selector, context, rootjQuery )innerHeight: ƒ ( margin, value )innerWidth: ƒ ( margin, value )insertAfter: ƒ ( selector )insertBefore: ƒ ( selector )is: ƒ ( selector )jquery: "1.9.1"keydown: ƒ ( data, fn )keypress: ƒ ( data, fn )keyup: ƒ ( data, fn )last: ƒ ()length: 0load: ƒ ( url, params, callback )map: ƒ ( callback )mousedown: ƒ ( data, fn )mouseenter: ƒ ( data, fn )mouseleave: ƒ ( data, fn )mousemove: ƒ ( data, fn )mouseout: ƒ ( data, fn )mouseover: ƒ ( data, fn )mouseup: ƒ ( data, fn )next: ƒ ( until, selector )nextAll: ƒ ( until, selector )nextUntil: ƒ ( until, selector )not: ƒ ( selector )off: ƒ ( types, selector, fn )offset: ƒ ( options )offsetParent: ƒ ()on: ƒ ( types, selector, data, fn, /*INTERNAL*/ one )one: ƒ ( types, selector, data, fn )outerHeight: ƒ ( margin, value )outerWidth: ƒ ( margin, value )parent: ƒ ( until, selector )parents: ƒ ( until, selector )parentsUntil: ƒ ( until, selector )position: ƒ ()prepend: ƒ ()prependTo: ƒ ( selector )prev: ƒ ( until, selector )prevAll: ƒ ( until, selector )prevUntil: ƒ ( until, selector )promise: ƒ ( type, obj )prop: ƒ ( name, value )push: ƒ push()pushStack: ƒ ( elems )queue: ƒ ( type, data )ready: ƒ ( fn )remove: ƒ ( selector, keepData )removeAttr: ƒ ( name )removeClass: ƒ ( value )removeData: ƒ ( key )removeProp: ƒ ( name )replaceAll: ƒ ( selector )replaceWith: ƒ ( value )resize: ƒ ( data, fn )scroll: ƒ ( data, fn )scrollLeft: ƒ ( val )scrollTop: ƒ ( val )select: ƒ ( data, fn )selector: ""serialize: ƒ ()serializeArray: ƒ ()show: ƒ ( speed, easing, callback )siblings: ƒ ( until, selector )size: ƒ ()slice: ƒ ()slideDown: ƒ ( speed, easing, callback )slideToggle: ƒ ( speed, easing, callback )slideUp: ƒ ( speed, easing, callback )sort: ƒ sort()splice: ƒ splice()stop: ƒ ( type, clearQueue, gotoEnd )submit: ƒ ( data, fn )text: ƒ ( value )toArray: ƒ ()toggle: ƒ ( speed, easing, callback )toggleClass: ƒ ( value, stateVal )trigger: ƒ ( type, data )triggerHandler: ƒ ( type, data )unbind: ƒ ( types, fn )undelegate: ƒ ( selector, types, fn )unload: ƒ ( data, fn )unwrap: ƒ ()val: ƒ ( value )width: ƒ ( margin, value )wrap: ƒ ( html )wrapAll: ƒ ( html )wrapInner: ƒ ( html )__proto__: Object
//获取的是整个init
console.log($("#btn")); //根据id获取元素
console.log($(".btnlist")); //根据class获取元素
console.log($("button")); //根据标签名获取元素
console.log($("button")[0]); //返回的是个集合类型，获取集合里边索引为0
console.log($("*")); //获取浏览器中所有的元素
console.log($("#btn,#btn1")); //同时获取两个元素，用逗号隔开
层级选择器
获取子元素，紧跟的下一个同级元素
<button id="btn1" class="btnlist"><span>按钮</span></button>
<p>123</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
console.log($("ul>li")); //获取ul下边的所有li
console.log($("ul li"));
console.log($("#btn1+"));//匹配紧接在 btn1元素后的 next 元素
console.log($("#btn1+ul"));//后边紧接着的不是ul，所以无法获取到
基本筛选器
:animated 匹配所有正在执行动画效果的元素
:not(selector) not里边写对象
:eq(index) 里边写索引
<button id="btn1" class="btnlist"><span>按钮</span></button>
<p>123</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
console.log($("ul:first")); //获取第一个ul标签
console.log($("ul>li:first"));
console.log($("ul>li:last")); //最后一个元素
console.log($("ul>li:not(ul>li:first):not(ul>li:last)"));
console.log($("ul>li:not(ul li:first):not(ul li:last)"));
//不需要那个将那个写在not括号里边，要是不要多个，可以 :not()多个
console.log($("ul>li:even")); //输出索引为偶数的
console.log($("ul>li:odd")); //输出索引为奇数的
console.log($("ul>li:eq(0)")); //输出特定索引的
console.log($("ul>li:eq(0):eq(2)")); //这样写错误，只能写一个eq
console.log($("ul>li:gt(0)")); //匹配的元素大于某个索引
console.log($("ul>li:lt(2)")); //匹配的元素小于某个索引
内容选择器
:contains(text) 括号里边是内容 内容字符串用单引号（双引号里边再写引号用单引号）
:has(selector) 括号里边是元素 匹配的元素里边必须包含某个元素
<button id="btn" class="btnlist">按钮</button>
<button id="btn1" class="btnlist"><span>按钮</span></button>
<p></p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
console.log($("ul>li:contains(1)"));
console.log($("button:contains('按')"));
console.log($("*:empty")); //匹配空元素
console.log($("button:has(span)"));//匹配的元素必须包涵某个元素
console.log($("*:parent")); //匹配的元素必须是父元素
可见性选择器
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
<button id="btn" class="btnlist" style="display: none">按钮</button>
<button id="btn1" class="btnlist"><span>按钮</span></button>
console.log($("button:hidden"));
console.log($("button:visible"));
属性选择器
<button id="btn" class="btnlist">按钮</button>
<button id="btn1" class="btnlist"><span>按钮</span></button>
console.log($("button[id]")); //匹配包含特定属性的代码
console.log($("button[id='btn']")); //匹配给定的属性是某个特定值的元素
console.log($("button[id!='btn']"));
console.log($("button[id^='b']")); //匹配给定的属性是以某些值开始的元素
console.log($("button[id$='1']")); //匹配给定的属性是以某些值结束的元素
console.log($("button[id*='n']")); //匹配给定的属性是包含某些值的元素
console.log($("button[id='btn1'][class='btnlist']")); //复合属性选择器，需要同时满足多个条件时使用
子元素选择器
<span><p>111</p></span>
<ul>
<span>111</span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
console.log($("ul>li:first-child")); //输出为空
console.log($("ul>span:first-child")); //输出span
console.log($("ul>li:last-child"));
console.log($("ul>li:first-of-type")); //输出第一个li子集 输出同类型的第一个
console.log($("ul>li:last-of-type"));
console.log($("ul>li:nth-child(1)")); //输出第N个子元素 第一个子元素不是li，输出为空
console.log($("ul>li:nth-child(2)")); //输出第N个子元素，N是从1开始
console.log($("ul>li:nth-last-child(1)")); //倒着数的第一个子元素
console.log($("ul>li:nth-of-type(1)")); //输出当前类型的第一个子元素
console.log($("ul>li:nth-last-of-type(1)")); //当前类型的最后一个子元素
console.log($("p:only-child")); //如果某个元素是父元素中唯一的子元素，那将会被匹配
表单选择器
<input type="reset"/>
<input type="submit"/>
<input type="text"/>
<input type="checkbox"/>
<input type="password"/>
<input type="radio"/>
<input type="file"/>
<input type="image"/>
<input type="button"/>
console.log($(":input"));
console.log($(":radio"));
console.log($(":text"));
console.log($(":password"));
console.log($(":button"));
console.log($(":image"));
console.log($(":submit"));
console.log($(":reset"));
console.log($(":file"));
表单对象属性选择器
针对表单对象里边有特定属性的
console.log($(":checked")); //匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
console.log($(":disabled")); //匹配所有不可用元素
console.log($(":enabled")); //匹配所有可用元素
console.log($(":selected")); //匹配所有选中的option元素
二. dom元素属性操作
jquery 可以隐式迭代 一次性操作一堆
attr(name|pro|key,val|fn)
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)
attr 获取或者设置元素的属性值
.removeAttr（） 移除属性
<button class="btn" id="btn1" title="你好"></button> //id名和类名称不要一样
<button class="btn"id="btn2" title="123"></button>
$("#btn1").attr("class", "btnlist");
$("#btn1").attr("data-index", 1); //设置自定义属性
$("#btn1").attr({
name:"btn",
value:"按钮"
}); //同时设置多个属性，json写法
//回调函数 返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值
$(".btn").attr("title", function (index, attr) {
return index+attr;
});
//$("#btn").removeAttr("title"); //移除属性
//获取属性
console.log($("#btn").attr("data-index")); //获取属性
两个元素具有相同的class，但是属性不相同，用class类名称获取的时候，只可以获取到最后一个，这也就是下图用回调函数设置title属性只设置了最后一个的原因
在使用回调函数设置属性值时，要想同时给多个元素设置属性，多个元素的属性必须相同，否则只能获取到多个元素的最后一个
prop 设置或者获取元素的属性值
prop和attr两个大致的使用方法一样
不同：① 在移除属性方面，prop 不会删除属性 undefined 。删除属性浏览器可能会产生错误，为了避免浏览器产生的错误，只删除属性值
②在设置属性的时候，常规属性一般都可以设置上，对于有的设置不上的属性，换方法
<button class="btn" id="btn" title="你好">按钮</button>
<input type="checkbox"/>篮球
$("#btn").prop("name", "111");
//回调函数设置
$("#btn").prop("name", function (index, prop) {
return "222";
});
//获取属性
console.log($("#btn").prop("name"));
$("#btn").removeProp("name"); //只删除属性值，不会删除属性 undefined
$("#btn").removeProp("title"); //删除属性浏览器可能会产生错误，为了避免浏览器产生的错误，只删除属性值
$("input").attr("checked","checked");
$("input").prop("checked",true); //设置是true或false
//点击按钮的时候，选择篮球
$("#btn").click(function (){
//console.log($("input").attr("checked")); //输出checked和undefined
console.log($("input").prop("checked")); //输出false和true
//$("input").attr("checked",!$("input").attr("checked"));//属性在变checked和undefined之间，但是无效
$("input").prop("checked",!$("input").prop("checked")); //这个可以获取到属性
});
//设置的时候，常规属性可一设置到，有的设置不上的属性，换方法
操作元素的css 类
addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])
1.一个参数为直接类别切换， 原本有的删除，没有的添加上
2.两个参数 1.切换的类 2.bool类型值 确定是否切换
3.还可以写回调函数 函数参数一：索引值，参数二：原本的类名称值
<button name="btn" id="btn" >按钮</button>
<input type="checkbox" checked/>篮球
<input type="text" value="请输入...."/>
//若添加多个类名称，以空格分隔开
$("#btn").addClass("b1");
$("#btn").removeClass(); 括号里边什么都不写，表示移除所有的类名称
$("#btn").removeClass("b1 b3");
//$("#btn").toggleClass("b1 b3 b4",false);
$("#btn").toggleClass(function (index, old) {
console.log(old);
return old + " b3 b2 b5"; //old是原本有的，就不见了，b3 b2 b5原本没有就添加上了
});
HTML代码/文本/值
元素的html text value
html() 获取或者设置元素的html
text() 获取或者设置元素的text
<button id="btn" >按钮</button>
console.log($("#btn").html()); //<span>按钮</span>
console.log($("#btn").text()); //按钮
$("#btn").html("你好"); //改变文本值
$("#btn").text("你好");
$("#btn").html("<span>你好</span>"); //可以自动识别标签
$("#btn").text("<span>你好</span>"); //text不可以自动识别标签
console.log($("#btn").html());
val() 设置或者获取元素的value
<input type="text" value="请输入...."/>
console.log($("input[type=text]").val());
$("input[type=text]").val("请看我...");
$("input[type=text]").val(function (index, old) {
return "新值"
});
三.css
操作元素的css
css() 获取或设置元素的样式
一次性操作多个样式，写成json格式
$("#btn").css("width","100px");
console.log($("#btn").css("width"));
$("#btn").css({
"width":'200px',
"height":"30px",
});
位置和尺寸
offset() 获取当前元素的偏移位置的 相对于视口（电脑屏幕）偏移 此方法只对可见元素有效。
position() 相对父元素的偏移
scrollTop scrollLeft 获取或者设置元素的滑动left top 参数为number
获取匹配元素相对滚动条顶部和左侧的偏移。此方法对可见和隐藏元素均有效。
innerHeight()内容高,（包括补白、不包括边框)此方法对可见和隐藏元素均有效。
outerHeight()获取第一个匹配元素外部高度（默认包括补白和边框）,此方法对可见和隐藏元素均有效
.block{
width: 100px;
height: 200px;
/*overflow-y: scroll;*/
overflow-y: hidden;
overflow-x: scroll;
}
.b{
height: 200px;
width: 200px;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
padding: 20px 20px;
margin: 10px;
}
<div class="block">
<div class="b"></div>
</div>
<div class="box"></div>
//offset() 获取当前元素的偏移位置的 相对于视口（电脑屏幕）偏移 此方法只对可见元素有效。
console.log($(".block").offset());
console.log($(".block").offset().left);
console.log($(".block").offset().top);
//position() 相对父元素的偏移
console.log($(".block").position());//当前元素的父元素是浏览器
//scrollTop scrollLeft 获取或者设置元素的滑动left top 参数为number
//获取匹配元素相对滚动条顶部和左侧的偏移。
//此方法对可见和隐藏元素均有效。
$(".block").on("scroll",function(){
console.log($(".block").scrollLeft());
console.log($(".block").scrollTop());
})
$(".block").scrollLeft(30); //直接写数值就行，不用引号和单位 参数为number
console.log($(".box").width());
console.log($(".box").height());
console.log($(".box").innerWidth());
console.log($(".box").innerHeight()); //内容高
console.log($(".box").outerWidth()); //获取第一个匹配元素外部高度（默认包括补白和边框）,此方法对可见和隐藏元素均有效
console.log($(".box").outerHeight());
$(".box").width(function (index,old){
console.log(index,old);
return old+100;
});
四.元素筛选
元素过滤
jquery 里面的当前对象是 $(this)
eq() 根据索引匹配元素 + -1 赋值倒着开始取元素
hasClass() 检测是否具有什么类 只能检测class类名称 不写符号 返回true/false
filter() 参数 匹配器 写符号
is() 参数匹配器要写符号 判断是否有这个参数 返回true false
has() 匹配包涵特定的后代的元素
not() 除过哪个元素 要其他元素
slice(开始索引，结束索引) 类似原生的slice
get() 参数索引 直接对应索引的元素 如果不写参数转化为array
<ul>
<li>1</li>
<li>2</li>
<li class="lilist" id="lilist">3</li>
<li>4</li>
<p>41</p>
<li>5</li>
</ul>
console.log($("ul>li").eq(0)); //获取出来的是一个集合
console.log($("ul>li").eq(-2));
console.log($("ul>li").first()); //第一个元素
console.log($("ul>li").last()); //最后一个元素
console.log($("ul>li").eq(2).hasClass("lilist")); //匹配特定类 不写符号
console.log($("ul>li").filter(".lilist")); //写符号
console.log($("ul>li").eq(2).is("#lilist"));
$("ul>li").each(function (index){
var boo=$(this).is(function () {
return index%2==0;
})
console.log(boo);
});
var num = $("ul>li").map(function () {
return $(this);
});
console.log(num);
//get（） 参数索引 直接对应索引的元素 如果不写参数转化为array
console.log(num.get());
console.log(num.get(1));
console.log($("ul").has(".lilist")); //包含特定后代的元素
console.log($("ul>li").not(".lilist")); //除过这个元素的其他元素
console.log($("ul>li").slice(1, 2)); //开始截取，截取停止
元素查找
jquery可以进行链式操作
同一个对象链式操作,多个对象链式操作
尽量避免多个链 3-4
children() 找父元素子集
find() 找当前匹配元素的子集
next nextAll prev prevAll nextUntil prevUntil 匹配同辈元素找固定某个
siblings 同胞兄弟元素 添加参数过滤
parent 直接父级 parents 所有的父级 添加参数过滤
each map dom元素的遍历 fn index
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="li5">5</li>
<p>6</p>
</ul>
console.log($("ul").children().eq(2).next()); //下一个
console.log($("ul").children().eq(2).prev()); //前一个
console.log($("ul").children().eq(2).nextAll()); //下一个所有
console.log($("ul").children().eq(2).prevAll()); //前一个所有
console.log($("ul").children().eq(2).parent());
console.log($("ul").children().eq(2).parents());//0: ul 1: body 2: html
console.log($("ul").children().eq(2).parents("body"));//特定父元素
console.log($("ul").children().eq(2).siblings()); //所有同胞兄弟元素
console.log($("ul").children().eq(2).siblings(".li5"));//特定同胞兄弟元素
console.log($("ul").add(".li5")); //获取ul，再获取add里边的元素
//map遍历和each遍历
$("ul").children().each(function (index){
$(this).html(parseInt($(this).text())+index);
});
$("ul").children().map(function (index){
$(this).html(10+index);
});
写这篇博客的时候，看见了沈从文先生的这段话，分享分享
“你眼睛还没调转过来望我，只起了一个势。我早就惊乱的同一只听到弹弓弦子响中的小雀了，我是怕这样与你的灵魂接触。”
我是如此深切真挚的爱着你，又怕与你唇舌相接，灵魂都发烫。
五.事件
页面载入
//dom渲染完成事件 相当于window.onload
$(window).ready(function (){
console.log("1");
});
//简写
$(function (){
console.log(2);
});
常规事件
点加事件就行，不需要加on。可以同时绑定多个事件（连续点就行，链式操作）
$(window) 浏览器事件
change 文本发生变化
scroll 滚动条滚动事件
mousewheel 鼠标滚轮事件
resize 浏览器窗口变化事件
dblclick 双击事件
select 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit 表单提交事件
//data（执行事件传递的参数） fn （事件的执行回调函数）
$("button").click(1, function () {
//传递的参数在event.data
console.log("你点我");
}).mouseenter(function () {
console.log(1);
}).mouseleave(function () {
console.log("2");
}); //可以连续绑定多个事件，不用写on
$("input").blur(function () {
console.log("失");
}).focus(function () {
console.log("获");
});
$("body").keypress(function () {
console.log("按键");
}).keydown(function () {
console.log("按下");
}).keyup(function () {
console.log("抬起");
});
$(window).scroll(function (){
console.log($(this).scrollTop());
});
$(window).bind("mousewheel",function (){
console.log(1); //用滚轮控制滚动条
});
事件切换
hover 切换的是onmouseover onmouseout 这两个事件
$("button").hover(function(){},function(){}); //切换两个事件
$("button").hover(function () {
console.log("over");
}, function () {
console.log("out");
});
事件处理
bind 事件的绑定 一次性绑定多个事件，空格隔开事件
unbind 事件的移除 不写参数全部移除，写参数移除特定的
$("body,html").bind("keydown mousemove", function () {
console.log("key");
$(this).unbind("mousemove");
});
on 事件的绑定 参数2 相当把父元素的事件委托给当前过滤元素来执行
off 事件的移除 全部移除 指定移除
<button>按钮</button>
<button class="btn">按钮</button>
<button>按钮</button>
<ul>
<li>11</li>
<li>22</li>
<li class="info">33</li>
<li>44</li>
</ul>
//on的两个参数
$("button").on("mousemove", function () {
console.log("move");
});
//on的三个参数情况，第二个参数将事件委托给特定的子元素
$("ul").on("click", ".info", function () {
console.log(1);
$("button").off("mouseenter");
});
one 绑定一次性事件
$("ul>li:first").one("click", function () {
console.log("li");
});
trigger 自动触发指定类型事件
写项目的时候，需要自动触发其他事件的次数比较多，所以trigger用的次数还是比较高的
<div class="tri" style=" width: 100px; height: 100px; background: red">
<input type="text" value="你看我变色"/>
$(".tri").click(function () {
console.log("你点我");
}).trigger("click"); //没有点击便自动触发，链式操作
$("input").select(function () {
$(this).css("color", "red"); //文本框里边文字直接被选择
}).trigger("select").on("my", function () {
console.log("自定义事件"); //也可以触发自定义事件
}).trigger("my");
事件的执行参数
return false; 阻止事件默认行为
原生js ：return false可以阻止事件监听，不可以阻止事件冒泡
在jQuery中：等于阻止事件冒泡和事件默认行为
$(window).keypress(10, function (e) {
console.log(e.timeStamp);//前后两次点击时间差 毫秒
console.log(e.currentTarget);//冒泡阶段的元素(当前的目标元素)
console.log(e.target);//最初触发的dom元素（当前触发它的目标元素）
console.log(e.data);//传递数据 在data 10(执行值)
e.stopPropagation(); //阻止事件冒泡
e.preventDefault(); //阻止事件默认行为
return false;//阻止事件默认（原生js不可以用return false;阻止事件冒泡，在监听里边可以，在监听里边失效，等于阻止事件冒泡和事件默认行为）
});
六.canvas 画布
API元素 提供画东西的一些方法
var canvastext=$("canvas")[0]; //返回的是一个集合类型，要加索引
canvastext.width=document.documentElement.clientWidth; //浏览器可视宽和高
canvastext.height=document.documentElement.clientHeight;
var content=canvastext.getContext("2d");//想在canvas中画画，将canvas转化为2D模型(画画给2D模型画)
//画线 起始点和终止点坐标
content.strokeStyle="red"; //设置样式
content.moveTo(0,0); //起始点坐标
content.lineTo(0,100); //终止点坐标
content.stroke();
//画字
content.font="50px 宋体";
content.fillStyle="red"; //样式
content.fillText("c99999nvas",0,100);//参数二：x坐标，参数三：y坐标
content.strokeText("canvas",300,100);//空心字体
//画矩形 fillRect
content.fillRect(100,100,100,100); //矩形的坐标和宽高 fillRect区域
content.clearRect(130,130,30,30);//中间抠出一块
content.fill();
//线矩形 strokeRect
content.strokeRect(200,100,100,100);
content.stroke();
//画图片
var image=new Image();
image.src="./img/01.jpg";
console.log(image);
document.body.appendChild(image);
content.drawImage(image,10,10,10,200,200,200,100,200);
//从开始剪切的x，y坐标。剪切的宽度和高度。图片在画布上放置图片的x,y位置。要使用的图像宽度和高度
//画圆
content.arc(300,400,100,0,Math.PI*2,true);
content.arc(500,400,100,0,Math.PI,false);//半圆
content.arc(100,400,100,0,Math.PI,true);//半圆
//x,y起始坐标。半径，起始角度，终止角度，bool参数，顺时针画圆(true)还是逆时针画圆(false)
content.fill();
//画弧线
content.fillStyle="yellow";
content.moveTo(10,10);
content.lineTo(100,20);
content.arcTo(150,20,150,70,50); //创建弧 起始点。终止点。50弧长
content.lineTo(150,120); //创建垂直线
content.stroke();
//椭圆
content.ellipse(300,300,100,50,Math.PI*2,0,Math.PI*2,true);
//(起始点xy。半径xy。旋转的角度，起始角，结果角，顺时针还是逆时针)
content.fill();
//画渐变色
var linear=content.createRadialGradient(300,300,0,300,300,100);//创建一个线性渐变
linear.addColorStop(0,"red");
linear.addColorStop(0.2,"green");
linear.addColorStop(0.4,"blue");
linear.addColorStop(0.6,"orange");
linear.addColorStop(0.8,"pink");
linear.addColorStop(1,"black");
content.fillStyle=linear;
content.ellipse(300,300,100,100,Math.PI*2,0,Math.PI*2,true);
content.fill();
七.动画
fn 动画执行完成 每个里边都有一个参数fn,表示动画完成
show hide toggle 显示隐藏+ 切换 display block none
sliderDown sliderUp sliderToggle 上下滑动动画
fadeout 淡出（从有到无） fadein 淡入(从无到有)
fadetoggle fadeto多了一个透明度的参数（第二个） 透明度
<button>按钮</button>
<div class="block">国庆快乐</div>
$("button").click(function(){
$(".block").hide();
$(".block").toggle(1000,function(){
console.log(1);
});
$(".block").slideToggle(function(){
console.log(2);
})
$(".block").fadeIn(1000,function(){
console.log(3);
})
$(".block").fadeTo(1000,0.5,function(){
console.log(4);
})
})
自定义动画
animate 参数：动画的属性 时间 速度 fn
delay 延迟多少秒之后执行 延迟后边动画执行
stop 停止的是当前正在执行的动画（停了后，再开始，从下一个动画开始执行）
第一个参 是否清除队列 第二个参数 是否立即完成当前动画
finish 停止当前正在运行的动画，删除所有排队动画 并完成匹配元素所有的动画(看不到过程)
span{
width: 100px;
height: 100px;
background: papayawhip;
display:block;
}
<button>按钮</button>
<input type="submit"/>
<span>国庆快乐</span>
$(function(){
$("button").click(function(){
$("span").animate({
marginLeft:800
},1000,"linear").delay(1000).animate({
marginTop:400
},1000,"linear").animate({
marginLeft:0
},1000,"linear").animate({
marginTop:0
},1000,"linear");
})
$("input").click(function(){
$("span").stop(false,true);
})
})
八. jq继承
each 遍历数组和对象 两个参数：遍历的对象，callback回调函数
extend 扩展(必须先扩展再使用)，这种封装给$符号使用
对象的合并(属性一致，后边的覆盖前面的；属性不一致，合并)
assign 对象合并
fn 这种封装给jquery对象原型追加的方法或者属性（fn其实指的是init{ }）
makeArray 将类数组对象转化为数组对象
map 将一个数组元素转换到另一个数组中
toArray 将集合中的所有dom元素转化为一个数组
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
//each 遍历数组和对象 两个参数：遍历的对象，callback回调函数
var arr = [1, 2, 3];
$.each(arr, function (index, val) {
console.log(index, val);
})
$.each($("li"), function (index, val) {
console.log(index, val);
})
//extend 扩展 对象的合并
//这种封装给$符号使用
$.extend({
getName: function () {
console.log(1);
}
})
$.getName(); //必须先扩展再使用
var stu = {
name: 123,
sex: "男",
age: 18
}
var s = {
name: 222,
sex: "女",
}
var person = $.extend({}, stu, s);
//属性一致，后边的覆盖前面的；属性不一致，合并
console.log(person);
//assign 对象合并
var o = Object.assign(stu, s);
console.log(o);
//makeArray 将类数组对象转化为数组对象
console.log($.makeArray($("li")));//所有的类数组都可以转
//console.log($.makeArray($("li").get()));
//map 将一个数组元素转换到另一个数组中
console.log($.map([1, 2, 3], function (val) {
return val + 2;
}));
//toArray 将集合中的所有dom元素恢复成一个数组
console.log($("li").toArray());
//fn 这种封装给jquery对象原型追加的方法或者属性（fn其实指的是init{}）
$.fn.mySort=function(){
console.log(1);
};
$("li").mySort();
console.log($()); //init {}
九.文档处理
内部插入
append(content|fn) 向每个匹配的元素内部追加内容。
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend(content|fn) 向每个匹配的元素内部前置内容。
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
before 在每个匹配的元素之前插入内容。
after 在每个匹配的元素之后插入内容。
clone 克隆
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
